Menu
while run on device getting error like this "the title prop of a button must be a string - react native"
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, Button, View } from 'react-native'; export default class sample extends Component { render() { return ( <Button style={{fontSize: 20, color: 'green'}} styleDisabled={{color: 'red'}} onPress={() => this._handlePress()}> title="Press Me" </Button> ); } _handlePress() { console.log('Pressed!'); } } AppRegistry.registerComponent('sample', () => sample); 
928
The closest we can get to styling a <Button /> exported from React Native is with the color prop. Below is an example of two buttons on Android, iOS, and the web. The first button is the default <Button /> and the second is another default <Button /> with its color prop set to "red" .
To create custom buttons, you need to customize the <TouchableOpacity /> component and include the <Text /> component inside of it to display the button text. const AppButton = ({ onPress, title }) => ( <TouchableOpacity onPress={onPress} style={styles. appButtonContainer}> <Text style={styles.
Building Out the Basic Structure /* Write a button component */ import React from 'react'; const Button = (props) => { return ( <button>{props. text}</button> ); } export {Button}; What is this? import React from 'react'; const ListComponent = (props) => { return ( <div> <h1>{props.
I think you have closed the Button tag too early.
<Button style={{fontSize: 20, color: 'green'}} styleDisabled={{color: 'red'}} onPress={() => this._handlePress()}> // <-- closed tag here title="Press Me" </Button> Just close the tag after the title attribute
<Button style={{fontSize: 20, color: 'green'}} styleDisabled={{color: 'red'}} onPress={() => this._handlePress()} title="Press Me" > Press Me </Button> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
