How to pass a string as a prop in React Native

Question

I am facing a situation where my component will not render text unless it is rendered as part of ListView. E.g. This one works great:

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) =>
    <View style={styles.buttonContainer}>
      <Button
        onPress={() => navigate('Team', { team: rowData })}
        title={rowData.name}
      />
    </View>
  }
/>

But this one does not work, the button does not show any text as if it didn't receive anything

<View style={styles.container}>
  <View style={styles.buttonContainer}>
    <Button
      onPress={() => navigate('Team')}
      title={'Sample Text'}
    />
  </View>
</View>

My Button component return looks like this:

return (
  <TouchableOpacity onPress={onPress} style={buttonStyle}>
    <Text style={textStyle}>
      {this.props.title}
    </Text>
  </TouchableOpacity>
)

I put console.log(this.props.title) on the render() and the following shows up in the remote debugger console:
undefined "Sample Text"

Dependencies in package.json

"react": "16.0.0-alpha.6", "react-native": "^0.43.4", "react-navigation": "git+https://github.com/react-community/react-navigation.git"

Answer 1

Try removing those brackets because you don't need them: title='Sample Text'