android-logo

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
react-native-button
react-native-button

Change Button Color


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

react-native-button

Disable Button Click


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

react-native-button

previous-button

facebook-logo
twitter-logo
instagram-logo

2020 © All rights reserved.