React Native Authentication

Authentication Flow:

Step	Screen	Purpose	Navigation
1	`Onboarding`	Only shown once	→ `SignUp`
2	`SignUpScreen`	Create account	→ `Home`
3	`SignInScreen`	Login existing user	→ `Home`
4	`HomeScreen`	After login	Logout → `SignIn`

Before: After:

MYAPP/ MYAPP/ ├── src/ ├── src/ │ ├── assets/ │ ├── assets/ │ ├── routes/ │ ├── routes/ │ │ └── AuthStack.js │ │ └── AuthStack.js // modified │ └── screens/ │ └── screens/ │ ├── OnboardingScreen.js │ ├── HomeScreen.js <-- ✅ Newly Added │ ├── SignInScreen.js │ ├── OnboardingScreen.js │ └── SignUpScreen.js │ ├── SignInScreen.js // modified │ │ └── SignUpScreen.js // modified ├── App.jsx ├── App.jsx // modified

📦Install Required Packages**:**

     **npm i @react-native-async-storage/async-storage  → For storing tokens and session data.**

     (Asyncstorage is a storage system that allows to store data locally in user’s device)

     **npm i react-native-svg  → For using SVG assets.**

    ** npm i react-native-linear-gradient  → For applying gradient effects in UI.**

Add the following line to your android/app/build.gradle file to include the font assets for react-native-vector-icons:
```
**apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"** 
```

 <Svg height="70" width="100%" viewBox={`0 0 ${width} 70`} style={styles.svgCurve}>
    <Path
      fill="#fff"
      d={`M0,0 C${width * 0.25},70 ${width * 0.75},0 ${width},60 L${width},70 L0,70 Z`}
    />
 </Svg>

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

It’s a regular expression (regex) used to validate email addresses.