Hello I am pretty new to react native I am working on this project it is a Sign In/Sign Up page for a project i am working on enter image description hereRunning through expo,Running this on a physical device.I have tried other options available on stack overflow none of them at least worked for me
***App.js***import React from 'react'import{StyleSheet,Text,View}from 'react-native'import RegForm from './app/Components/RegForm'export default class App extends React.Component{ render(){ return(<View style={Styles.Container}><RegForm /></View> ) }}const styles=StyleSheet.Create({ container:{ flex:1 , justifyContent:'center', backgroundColor:'#36485f' , paddingLeft:60 , paddingRight:60 , },})***RegForm***import React from 'react'import{StyleSheet,Text,View,TextInput,TouchableOpacity}from 'react-native'export default class RegForm extends React.Component{ render(){ return(<View style={Styles.RegForm}><Text style={styles.header}>Registration</Text><TextInput style={styles.TextInput} placeholder="Please Enter your Name" /><TextInput style={styles.TextInput} placeholder="Please Enter your Email" /><TextInput style={styles.TextInput} placeholder="Please Enter your Password" secureTextEntry={true} /><TextInput style={styles.TextInput} placeholder="Please Enter your Mobile No" /><TextInput style={styles.TextInput} placeholder="Please Enter your CNIC" /><TouchableOpacity style={styles.button}><Text style={styles.btntext}>Sign Up</Text></TouchableOpacity></View> ) }}const styles=StyleSheet.Create({ RegForm:{ alignSelf:'strech' , }, header:{fontSize:24 ,color:'#fff',paddingBottom:10 ,marginBottom:40 ,borderBottomColor:'#199187',borderBottomWidth:'1', }, TextInput:{ alignSelf:'strech', height:40 , marginBottom:30 , color:'#fff' , borderBottomColor:'#f8f8f8', borderBottomWidth:1 , }, button:{ alignSelf:'strech', alignItem:'center', padding:20 , backgroundColor:'#59cbbd', marginTop:30 , }, btntext:{ color:'#fff', fontWeight:'bold', }})