How to create a simple Button in React native? Code Example

A <Button> component is used to create a simple button in React native. You can customize few properties like color, title, on press event, disable touch sound etc. But it’s limited to what is provided in standard android and ios buttons.

Code Example

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

const App = () => (
  <SafeAreaView style={styles.container}>
    <View>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Simple Button pressed')}
      />
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  }
});

export default App;

Here I have created a button with title and onPress props.

Live Demo

Conclusion

React Native provides a <Button> component which can be used to create native Android and iOS buttons on respective platforms. There are more ways to create a pressable component which can act like a button. But this component is most straight forward way to render native buttons.