Categories
JavaScript Answers React Native Answers

How to add a button in React Native?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *