Explore

react native setup cuz i have dementia

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

npx create-expo-app projectName --template blank

install dependencies

npx expo install react-dom react-native-web @expo/metro-runtime

⁠

Create your first app In this tutorial, learn how to create a new Expo project. docs.expo.dev⁠

install expo router

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

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

now we’ll setup some stuff

setup entry point in package.json

{

"main": "expo-router/entry"

}

modify project conf in app.json

{

"scheme": "your-app-scheme"

}

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

npx expo install react-native-web react-dom

{

"web": {

"bundler": "metro"

}

Modify babel.config.js

module.exports = function (api) {

api.cache(true);

return {

presets: ['babel-preset-expo'],

};

⁠

Install Expo Router Learn how to quickly get started by creating a new project with Expo Router or adding the library to an existing project. docs.expo.dev⁠

⁠

now you can run your app!

npx expo start -c

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

⁠

Expo | NativeWind A example of an Expo project can be found on Github www.nativewind.dev⁠

⁠

Tools

1- Cloudinary

⁠

Image and Video Upload, Storage, Optimization and CDN Streamline media management and improve user experience by automatically delivering images and videos, enhanced and optimized for every user. 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

⁠

Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free. 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.

⁠

Starting up

few things to set in your project before starting the real thing !

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

app helps organize your routing, it will have folders/files that structure your screens

Example

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

|app

|(tabs)

|fyp.jsx

|create.jsx

|profile.jsx

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

will be updating this whenever i get my hands on new things/tips , happy coding ^^

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.