Open In App

How to create Chip in react-native using react-native-paper ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 see how to create a chip in react native using react-native-paper library. Chips are used to display mini entities into a block form. In this project, we will create different chips, which can display simple text, icons with text, disabling the chip, etc.

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 the components folder, create a file Chip.js.

Project Structure: It will look like this.

Example: Write down the code in respective files. Chip is similar to button in terms of functionality. We can directly import Chip from react-native-paper library. It has mode props. To display icon, we can use icon prop.

Chip.js




import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Chip } from 'react-native-paper';
  
const ChipExample = () => {
  return (
    <View>
      <View style={styles.chip}>
        <Chip
          icon="information"
          mode="flat"
          onPress={() => Alert.alert('Information chip pressed')}>
          Information
        </Chip>
      </View>
      <View style={styles.chip}>
        <Chip icon="forward" mode="outlined">
          Forward{' '}
        </Chip>
      </View>
      <View style={styles.chip}>
        <Chip icon="heart" mode="outlined" selectedColor="red">
          Favourites
        </Chip>
      </View>
      <View style={styles.chip}>
        <Chip disabled>Simple(disabled)</Chip>
      </View>
    </View>
  );
};
  
export default ChipExample;
  
const styles = StyleSheet.create({
  chip: {
    width: 120,
    marginLeft: 20,
    marginTop: 20,
    marginBottom: 10,
  },
});


Filename: App.js

Javascript




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


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

npx react-native run-android

Output:

References: https://callstack.github.io/react-native-paper/chip.html



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads