Search code examples
reactjsreact-nativereact-native-paper

React Native | title prop button must be string


I'm using React Native Paper in my react native project and running in iOS simulator.

While clicking on Buttton I'm navigating to signup page. When I click I 'm getting below errors.

title prop button must be string

CODE:

<View style={styles.middle}>
 <Animatable.View
  animation="fadeInUpBig"
> 
<Text style={styles.textContainer}>Welcome!</Text>

<View style={styles.formArea}>
  <TextInput
    left={<TextInput.Icon name="account-hard-hat" />} ƒ
    style={styles.FormControl}
    mode="outlined"
    label="Username"
    theme={{ colors: { primary: "#007fff" } }}
    value=""
  />
  <TextInput
    left={<TextInput.Icon name="lock" />}
    right={<TextInput.Icon name="eye-off" />}
    style={styles.FormControl}
    secureTextEntry={true}
    mode="outlined"
    label="Password"
    theme={{ colors: { primary: "#007fff" } }}
    value=""
  />
   <Text style={styles.ForgotPwd}> Forgot Password? </Text>
  <Button  style={[styles.Button]} mode="contained">
    <Text style={styles.ButtonText}> Sign In </Text>
  </Button>
  <Divider style={{ marginTop: 25, marginBottom: 25, backgroundColor: "#C6C6C6" }} />
  <Text style={styles.NewAccTxt}> Don't have an account?</Text>
  <Button onPress = {() => navigation.navigate('SignUp')} style={styles.Button} mode="contained">
<Text style={styles.ButtonText}> Create new one </Text>
  </Button>
</View>
</Animatable.View>

Screenshot:

enter image description here


Solution

  • You have done this

    <Button  style={[styles.Button]} mode="contained">
        <Text style={styles.ButtonText}> Sign In </Text>
      </Button>
    

    Which wont work because React Native expects something like this

      <Button title={styles.ButtonText} style={[styles.Button]} />
    

    Better use something like the TouchableOpacity but for button title is a required prop