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 styling works in React yet. This is my code:

var tapSpeed = React.createClass({   render: function() {     return (       <View style={styles.container}>         <Text style={styles.welcome}>           Tap me as fast as you can!         </Text>         <View style={styles.button}>         !         </View>       </View>     );   } });  var styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#FFCCCC'   },   welcome: {     fontSize: 20,     textAlign: 'center',     margin: 10   },   button: {     textAlign: 'center',     color: '#ffffff',     marginBottom: 7,     border: 1px solid blue,     borderRadius: 2px   } }); 

Answer 1

Update: use built-in Button component.

Deprecated:

Wrap your View into TouchableHighlight for iOS and TouchableNativeFeedback for Android.

var {   Platform,   TouchableHighlight,   TouchableNativeFeedback  } = React;  var tapSpeed = React.createClass({   buttonClicked: function() {     console.log('button clicked');   },   render: function() {     var TouchableElement = TouchableHighlight;     if (Platform.OS === 'android') {      TouchableElement = TouchableNativeFeedback;     }     return (     <View style={styles.container}>       <Text style={styles.welcome}>         Tap me as fast as you can!       </Text>       <TouchableElement         style={styles.button}         onPress={this.buttonClicked.bind(this)}>         <View>           <Text style={styles.buttonText}>Button!</Text>         </View>       </TouchableElement>             </View>     );   } });        

Answer 2

You can use built in react-native Button element.

import React, { Component } from 'react'; import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native';  class MainApp extends Component {  _onPress() {   Alert.alert('on Press!');  }    render() {     return (       <View style={styles.container}>         <View style={styles.buttonContainer}>           <Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/>         </View>       </View>     );   } }  const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#FFFFFF'   },   buttonContainer: {     backgroundColor: '#2E9298',     borderRadius: 10,     padding: 10,     shadowColor: '#000000',     shadowOffset: {       width: 0,       height: 3     },     shadowRadius: 10,     shadowOpacity: 0.25   } })  AppRegistry.registerComponent('MainApp', () => MainApp); 

Read More Here.