React Native – Login Page Application

InsuranceApp/
│
├── android/
├── ios/
├── node_modules/
├── .gitignore
├── .prettierrc.js
├── babel.config.js
├── package.json
├── package-lock.json
├── App.tsx
├── login-screen/
│   └── LoginScreen.tsx
└── home-screen/
    └── HomeScreen.tsx

import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './login-screen/LoginScreen'; // Import LoginScreen component
import HomeScreen from './home-screen/HomeScreen'; // Import HomeScreen component

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert, StyleSheet } from 'react-native';

const LoginScreen = ({ navigation }: any) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    if (username && password) {
      navigation.navigate('Home');  // Navigate to Home screen after login
    } else {
      Alert.alert('Error', 'Please fill in both fields');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Login</Text>
      <TextInput
        style={styles.input}
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  header: {
    fontSize: 30,
    marginBottom: 40,
  },
  input: {
    width: '100%',
    padding: 10,
    marginBottom: 20,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#ccc',
  },
});

export default LoginScreen;

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcomeText}>Welcome to the Home Screen!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcomeText: {
    fontSize: 24,
  },
});

export default HomeScreen;

# Install navigation packages
npm install @react-navigation/native @react-navigation/stack

# Install peer dependencies
npm install react-native-screens react-native-safe-area-context
npm install react-native-gesture-handler react-native-reanimated react-native-vector-icons react-native-paper

C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools 
C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\tools

npx react-native start --reset-cache

PS D:\ReactNativeProject\InsuranceApp> npx react-native start --reset-cache
(node:25784) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Welcome to React Native v0.76
info Starting dev server on port 8081...

                        ▒▒▓▓▓▓▒▒
                     ▒▓▓▓▒▒░░▒▒▓▓▓▒
                  ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
                 ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
                 ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
                 ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
                 ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
                 ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
                  ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
                     ▒▓▓▓▒░░░░▒▓▓▓▒
                        ▒▒▓▓▓▓▒▒


 WARN  the transform cache was reset.
                Welcome to Metro v0.81.0
              Fast - Scalable - Integrated


info Dev server ready

i - run on iOS
a - run on Android
r - reload app
d - open Dev Menu
j - open DevTools

info Opening app on Android...
info A dev server is already running for this project on port 8081.
info Installing the app...
Starting a Gradle Daemon (subsequent builds will be faster)
> Task :gradle-plugin:settings-plugin:checkKotlinGradlePluginConfigurationErrors
> Task :gradle-plugin:shared:checkKotlinGradlePluginConfigurationErrors
> Task :gradle-plugin:shared:compileKotlin UP-TO-DATE
> Task :gradle-plugin:shared:compileJava NO-SOURCE
> Task :gradle-plugin:shared:processResources NO-SOURCE
> Task :gradle-plugin:shared:classes UP-TO-DATE

> Task :app:installDebug
Installing APK 'app-debug.apk' on 'Pixel_4_API_35(AVD) - 15' for :app:debug
Installed on 1 device.

BUILD SUCCESSFUL in 1m 11s
208 actionable tasks: 41 executed, 167 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.insuranceapp/.MainActivity }
 BUNDLE  ./index.js

 (NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) LOG  Running "InsuranceApp" with {"rootTag":11,"initialProps":{},"fabric":true}
 INFO
 💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).