How to add a button in React Native?

Question

I´m confused with this whole \"no CSS\" thing, but I understand why it\'s beneficial. All I want to do is place a button in the middle of the screen but I don\'t understand how

Answer 1

You have two options to achieve a touchable component/button to handle user's events.

• One is to use the built in Button Component. Check the docs here http://facebook.github.io/react-native/docs/button.html
• Two use either TouchableHighlight or TouchableNativeFeedback or TouchableOpacity or TouchableWithoutFeedback. Think of this as a way for you to convert different areas of your app to tappable(clickable) or a way for you to create a custom button. Each component here is different based on how it behaves once it's tapped by the user. Check the docs for more details. http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html etc.

Concerning styling in react native you will need to understand flexbox layout. Check this css flexbox article all rules are applicable to react-native https://css-tricks.com/snippets/css/a-guide-to-flexbox/ except that you will have to capitalize the rules e.g align-content to alignContent