The Development Server Returned Error Code:500(React Native)

Question

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 here Running 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, }, })

This is the code for the registration page of the app

 ***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', } })

Answer 1

please check you code

***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 ,
  },
})

you are using 'Styles' instead of 'styles' in

 <View style={Styles.RegForm}>

Try to remove the node_modules and package-lock.js and clear the npm cache and expo cache and start the application again,

npm cache clean --force

expo start --clear