{"id":104,"date":"2024-11-24T15:32:41","date_gmt":"2024-11-24T15:32:41","guid":{"rendered":"https:\/\/blog.vyomscode.com\/?p=104"},"modified":"2024-11-24T15:32:41","modified_gmt":"2024-11-24T15:32:41","slug":"creating-authentication-in-react-native-part-1-home-and-register-screens","status":"publish","type":"post","link":"https:\/\/blog.vyomscode.com\/index.php\/2024\/11\/24\/creating-authentication-in-react-native-part-1-home-and-register-screens\/","title":{"rendered":"Creating Authentication in React Native – Part 1: Home and Register Screens"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Building a robust authentication system is a cornerstone of any modern mobile application. In this two-part series, we\u2019ll explore how to implement authentication in a React Native app using Expo Router and TypeScript.<\/p>\n\n\n\n

This first part focuses on creating the Home<\/strong> and Register<\/strong> screens and setting up the necessary navigation structure.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n
\n\n\n\n

1. Setting Up Authentication Layout<\/strong><\/h2>\n\n\n\n

To start, we need to define the layout for authentication screens. Modify the auth\/_layout.tsx<\/code> file as follows:<\/p>\n\n\n\n

import { Redirect, Stack } from 'expo-router'; \n\nexport default function AuthLayout() { \n  return ( \n    <Stack>  \n      <Stack.Screen name=\"index\" options={{ headerShown: false }} \/> \n      <Stack.Screen name=\"Register\" options={{ headerShown: false }} \/> \n      <Stack.Screen name=\"Login\" options={{ headerShown: false }} \/> \n      <Stack.Screen name=\"OTPVerify\" options={{ headerShown: false }} \/> \n      <Stack.Screen name=\"ForgetPass\" options={{ headerShown: false }} \/>\n    <\/Stack>\n  );\n}\n<\/code><\/pre>\n\n\n\n
You can add additional screen definitions to the layout as needed.<\/p>\n\n\n\n
\n\n\n\n
2. Creating the Home Screen<\/strong><\/h2>\n\n\n\n
The Home Screen<\/strong> introduces users to the app and provides a “Get Started” button.<\/p>\n\n\n\n
Code: auth\/index.tsx<\/code><\/h5>\n\n\n\n
\"\"<\/figure>\n\n\n\n
import React from 'react';\nimport { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';\nimport { useNavigation, NavigationProp } from '@react-navigation\/native';\nimport { ListAuth } from '@\/src\/types'; \nimport Logo from '..\/..\/..\/assets\/images\/icon.png';  \nimport authbg from '..\/..\/..\/assets\/images\/authbg.jpg';\nimport Colors from '@\/src\/constants\/Colors'; \n\nconst HomeScreen = () => {\n  const navigation = useNavigation<NavigationProp<ListAuth>>();\n\n  const handlePress = () => {\n    navigation.navigate('Register');   \n  }; \n\n  return (\n    <View style={styles.container}>\n      <View style={styles.backgroundContainer}>\n        <Image source={authbg} style={styles.backgroundImage} \/>\n      <\/View>\n      <View style={styles.content}>\n        <Text style={styles.heading}>Hey, Welcome to<\/Text>\n        <Image source={Logo} style={styles.logo} \/> \n        <TouchableOpacity style={styles.button} onPress={handlePress}>\n          <Text style={styles.buttonText}>Get Started \u279c<\/Text>\n        <\/TouchableOpacity>\n      <\/View>\n    <\/View>\n  );\n};\n\nconst styles = StyleSheet.create({ \n  container: {\n    flex: 1,\n    paddingTop: 80,\n    alignItems: 'center',\n    backgroundColor: 'white',\n  },\n  backgroundContainer: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: -1,\n  },\n  backgroundImage: {\n    flex: 1,\n    width: null,\n    height: null,\n  },\n  content: {\n    alignItems: 'center',\n    zIndex: 1,  \n  },\n  logo: {\n    width: 170,\n    height: 90,\n    marginBottom: 20,\n  },\n  heading: {\n    fontSize: 22,\n    fontWeight: 'bold',\n    color: Colors.blue.color,\n    marginBottom: 5,\n    fontStyle: 'italic',\n  },\n  button: {\n    backgroundColor: Colors.orange.color,\n    paddingVertical: 20,\n    paddingHorizontal: 70,\n    borderRadius: 5,\n    marginTop: 380,\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 18,\n    fontWeight: 'bold',\n  },\n});\n\nexport default HomeScreen;\n<\/code><\/pre>\n\n\n\n
Notes:<\/h3>\n\n\n\n