React native project setup guide

React Native is a kind of app in different kind of environment, which allows us to compile it in both ios and android platforms. 

1. Install expo globally in your local machine.

-npx i -g expo-cli

2. Install reacr-native project.

It will start starting template of our app. It will install all the the depandencies we need to start or run our app.

3. Install DOM dependencies. 

If you want to open react app in you browser than you really need to download these dependencies in your project.

-npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

4. For front-end styles we will use tailwind css. for that we will install ReactWind react native package.

Go to the official ReactWind site

https://www.nativewind.dev/quick-starts/expo

a. Install tailwindcss pakcage

-npm i react-wind

b. Install tailwind dev dependencies

-npm i --dev tailwindcss

Now go to package.json file and check these dependencies are installed.

c. Now we need to create tailwind config file

// tailwind.config.js

-npx tailwindcss init

add this script

content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],

add in bebal.config.js file

plugins: ["nativewind/babel"],

Restart the server and see the changes.

5. Install react native navigation.

Go to the official doc and run the latest command to install navigation depensencies.

a. Install navigation package

-npm install @react-navigation/native

b.Install other important dependencies.

npx expo install react-native-screens react-native-safe-area-context

Install Native-Stack navigator

-npm install @react-navigation/native-stack

After that use stack navigator in your app like so

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Notifications" component={Notifications} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}