How to display Material Chip View in React Native?

To display chips in the UI, we are going to make use of React Native Paper Material Design. Chips are compact elements that represent input, attribute, or action.

Installation

Install react native paper as shown below ?

npm install react-native-paper

Basic Syntax

The basic chip component structure is as follows ?

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

Properties

The basic properties of chip are as follows ?

Example: Complete Chip Implementation

import * as React from 'react';
import { StyleSheet, 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
    }
});

Different Chip Modes

<!-- Flat Mode (default) -->
<Chip icon="heart" onPress={() => console.log('flat')}>
    Flat Chip
</Chip>

<!-- Outlined Mode -->
<Chip icon="star" mode="outlined" onPress={() => console.log('outlined')}>
    Outlined Chip
</Chip>

<!-- Selected Chip -->
<Chip icon="check" selected selectedColor="blue">
    Selected Chip
</Chip>

Output

The chip component will display as compact, interactive elements with the specified icons and text. The disabled chip will appear grayed out, the outlined chips will have borders, and the selected chips will show with the chosen selectedColor.

Conclusion

React Native Paper's Chip component provides an easy way to create Material Design chips with various modes, icons, and interactive features. Use different props to customize appearance and behavior according to your app's requirements.