React Native में Material Chip View कैसे प्रदर्शित करें

UI में चिप्स प्रदर्शित करने के लिए हम React Native Paper Material Design का उपयोग करने जा रहे हैं।

React Native Paper को नीचे दिखाए अनुसार इंस्टॉल करें:

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

चिप कंपोनेंट UI पर इस प्रकार दिखता है:

बेसिक चिप कंपोनेंट इस प्रकार है:

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

चिप की बेसिक प्रॉपर्टीज इस प्रकार हैं:

उदाहरण: चिप प्रदर्शित करना

चिप प्रदर्शित करने वाला कोड इस प्रकार है:

<SafeAreaView style={styles.container}>
     console.log('camera')}>Click     Here</Chip>
     console.log('apple')}>Apple Icon</Chip>
</SafeAreaView>

उदाहरण

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

आउटपुट