Skip to content
Related Articles

Related Articles

How to create a button in react-native using react-native-paper library ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 28 Feb, 2022

React-native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

Prerequisites:

Approach: In this article, we will create different kinds of buttons using the react-native-paper library. We have imported the button component from the library and used it in your application. We will see the approach step-by-step.

Below is the step by step implementation:

Step 1: Create a react-native project using the following command:

npx react-native init DemoProject 

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Start the server using the following:

 npx react-native run-android

Step 4: Installing the dependencies for icons and deep linking:

npm i react-native-vector-icons
react-native link react-native-vector-icons

Step 5: Now go to your project and create a components folder. Inside components folder, create a file ButtonExample.js.

Project Structure: It will look like this.

Implementation: Write down the code in respective files.

ButtonExample.js




import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Button } from 'react-native-paper';
  
const AddButton = () => {
  return (
    <View>
      <View style={styles.button}>
        <Button mode="contained" onPress={() => 
            Alert.alert('button style : contained')}>
          {' '}
          click{' '}
        </Button>
      </View>
      <View style={styles.button}>
        <Button
          mode="outlined"
          icon="camera"
          onPress={() =>
             Alert.alert('button style : outlined and icon ')}>
          click
        </Button>
      </View>
      <View style={styles.button}>
        <Button mode="text" onPress={() => 
             Alert.alert('button style : text ')}>
          {' '}
          click
        </Button>
      </View>
      <View style={styles.button}>
        <Button
          mode="contained"
          color="green"
          onPress={() =>
             Alert.alert('button style : coloured and contained ')}>
          click
        </Button>
      </View>
      <View style={styles.button}>
        <Button mode="contained" disabled>
          click
        </Button>
      </View>
    </View>
  );
};
  
const styles = StyleSheet.create({
  button: {
    margin: 20,
  },
});
  
export default AddButton;

App.js




import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import AddButton from './components/ButtonExample';
  
const App: () => Node = () => {
  return (
    <View>
      <AddButton />
    </View>
  );
};
  
export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: We will see different button styles which we can create using react-native-paper. 

Reference: https://callstack.github.io/react-native-paper/button.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!