Explore

react native setup cuz i have dementia

Hiii! in case someone is somehow using this, don’t for now! its under construction because dummy react native keeps changing every second so the project settings also changed! , working on newer version ^^

Hello! just recently i started learning react native, and while trying to re-build things i found myself struggling in the most basic stuff, so, i made this lil guide so that i don’t need to go back to tutorials each time., hope you find it even a tiny bit helpful!

You can add this doc to your coda account to be able to edit it and customize it <3

step by step how to setup your rn project !

ill be using the following:

react native (duh)

expo

native wind

supabase

Project Setup

create expo project

install dependencies

⁠

Loading docs.expo.dev⁠

install expo router

which is a file based router that basically lets you navigate through your screens

now we’ll setup some stuff

setup entry point in package.json

modify project conf in app.json

web edition: to be able to view it on web (app.json)

Modify babel.config.js

⁠

Loading docs.expo.dev⁠

⁠

now you can run your app!

the -c (clear cache) is important here because of all the changes made, but you dont need to apply it everytime

options to run your project

you can install expo go app on your phone and run it by scanning the QR code you get after running it.

download android studio to run it on an emulator.

or on web , but for me i haven’t been able to see the nativewind changes on web so skip.

install native wind

i got tired of step by step this aint complicated you can follow the docs <3

⁠

Loading www.nativewind.dev⁠

⁠

fast config

in your tailwind file, add this direct line:

⁠

Starting up

delete App.js in your main directory we won’t be working on that

Expo Router looks for your app folder, so start by creating that

Example

say your app has 3 tabs, fyp, profile, and create ,this will be the structure of your files

NOTICE:

the brackets () are important in naming the folders, with them expo-router is able to recognize the files that require routing under each folder

Tools

1- Cloudinary

⁠

Loading cloudinary.com⁠

⁠

Cloudinary is a tool that let you optimize media used in your app, by applying changes that you want to do, such as scaling, changing quality, even AI based things like focusing on objects (ex: face), in order to make your media smaller therefor uploading it will be flexible, fast and non consuming.

pro tip

when you need to use some media, let’s say an image, you can go to the cloudinary site, login, go to your project dashboard , and under media library, you can just upload your image and copy its public_id and paste it in your project, that image is already optimized and ready to be used!

⁠

2-Supabase

⁠

Loading supabase.com⁠

⁠

Supabase is a Firebase like tool, which has so many functionalities such as database, authentification, instant api and so on.

personally, i enjoyed working with it, the docs are super simple, and you don’t need to do any hardcoding really.

⁠

Never too extra!

swiper

is a package that lets you swipe your screen left and right just like in tinder! except this one is too nerdy

cmd:

npm install react-native-swiper

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.