React Native Button

The button is a key React Native component that renders as a button at the surface of your application. Its a small piece of UI that listens for touch events and then executes some logic upon releasing that event.

It is important to learn button in React Native. There are many buttons built-in React Native, like TextButton, ImageButton, etc. Here is more information about how to make you own buttons in React native.

Example

//App.js 

import { Alert, Button, StyleSheet, View } from 'react-native'
import React, { Component } from 'react';  

class  App extends Component {  

   onPressButton() {  
      Alert.alert('Button Clicked')  
  }  
  render() {  
    return (
      <View style = {styles.container}>
        <View style={styles.button}>  
            <Button  
                onPress={this.onPressButton}  
                title="Click Me"  
            />  
        </View>
      </View>  
    )
  }
 }
 
export default App

const styles = StyleSheet.create ({
   container: {
      flex: 1,  
      justifyContent: 'center',  
   },
   button: {
      margin: 50
   }
})

Output

Change Button Color

<Button  
  title="Click Me"  
  color= "green"
/>

Disable Button Click

<Button  
  title="Click Me"  
  disabled={true}
/>