How to display Material Chip View in React Native?

React NativeJavascriptMobile Development

To display chips in the UI, we are going to make use of React Native Paper Material Design.

Install react native paper as shown below −

npm install --save-dev react-native-paper

The chip component looks as follows on the UI −

The basic chip component is as follows −

<Chip icon="icontodisplay" onPress={onPressfunc}>Chip Name</Chip>

The basic properties of chip are as follows −

PropsDescription
modeThe values for mode are flat and outlined. With flat mode you will not get a border and with outlined the border for the chip will be displayed.
iconThe icon to be given to the chip.
selectedThe values are true/false. If true the chip will be selected.
selectedColorColor to be given for the selected chip.
disabledTo disable the chip.
onPressThe function will be called when the user taps on the chip.
onCloseThe function will be called when user taps on the close button.
textStyleThe style to be given to the chip text.
styleThe style to be given to the chip component.

Example: To Display Chip

The code that displays chip is as follows −

<SafeAreaView style={styles.container}>
   <Chip icon="camera" disabled onPress={() => console.log('camera')}>Click
      Here</Chip>
      <Chip icon="apple" mode="outlined"selectedColor='green' selected
         onPress={() => console.log('apple')}>Apple Icon</Chip>
</SafeAreaView>

Example

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Chip } from 'react-native-paper';
const MyComponent = () => (
   <SafeAreaView style={styles.container}>
      <Chip icon="camera" style={styles.chip} disabled onPress={() =>
         console.log('camera')}>Click Here</Chip>
         <Chip icon="apple" style={styles.chip}
            mode="outlined"selectedColor='green' selected onPress={() =>
            console.log('apple')}>Apple Icon</Chip>
         <Chip icon="calendar-month" style={styles.chip} mode="outlined" selected
            onPress={() => console.log('calendar')}>Select Date</Chip>
      </SafeAreaView>
   );
   export default MyComponent;
   const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
   chip: {
      marginTop:10
   }
});

Output

raja
Published on 01-Jul-2021 09:35:14
Advertisements