Sometimes, we want to add a button in React Native.

In this article, we’ll look at how to add a button in React Native.

How to add a button in React Native?

To add a button in React Native, we can use the Button component.

For instance, we write:

import * as React from 'react';
import { View, Button } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const onPress = () => {
    console.log('button pressed');
  };

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={onPress} title="Hello" color="green" />
    </View>
  );
}

to add a Button.

The title of the button is the button text.

color sets the background color.

The onPress prop is set to the onPress function which runs when the button is pressed.

As a result, 'button pressed' is logged when we press on the button.

Conclusion

To add a button in React Native, we can use the Button component.