Hiển thị Material Chip View trong React Native với react-native-paper

Cài đặt

npm install react-native-paper

Sau đó: npx pod-install (iOS).

Import

import { Chip } from 'react-native-paper';

Cú pháp cơ bản

<Chip 
  icon="camera" 
  onPress={() => console.log('camera')}
  style={styles.chip}
>
  Click Here
</Chip>

Các props chính

Ví dụ 1: Các loại Chip cơ bản

import * as React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import { Chip } from 'react-native-paper';

const MyComponent = () => (
  
    {/* Flat chip - disabled */}
     console.log('camera')}
    >
      Click Here
    

    {/* Outlined chip - selected */}
     console.log('apple')}
    >
      Apple Icon
    

    {/* Outlined chip - selected, có icon khác */}
     console.log('calendar')}
    >
      Select Date
    
  
);

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  chip: { marginTop: 10 },
});

export default MyComponent;

Ví dụ 2: Chip có nút close (Filter/Tag removable)

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Chip } from 'react-native-paper';

const FilterChips = () => {
  const [filters, setFilters] = useState([
    { key: '1', label: 'React Native' },
    { key: '2', label: 'TypeScript' },
    { key: '3', label: 'Expo' },
  ]);

  const removeFilter = (key) => {
    setFilters(filters.filter(f => f.key !== key));
  };

  return (
    
      {filters.map(filter => (
         removeFilter(filter.key)}
        >
          {filter.label}
        
      ))}
    
  );
};

const styles = StyleSheet.create({
  container: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 16 },
  chip: { margin: 0 },
});

export default FilterChips;

Ví dụ 3: Chip group chọn đơn (Radio behavior)

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Chip } from 'react-native-paper';

const SortOptions = () => {
  const [sortBy, setSortBy] = useState('newest');
  const options = [
    { key: 'newest', label: 'Mới nhất' },
    { key: 'oldest', label: 'Cũ nhất' },
    { key: 'popular', label: 'Phổ biến' },
  ];

  return (
    
      {options.map(opt => (
         setSortBy(opt.key)}
        >
          {opt.label}
        
      ))}
    
  );
};

const styles = StyleSheet.create({
  container: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 16 },
  chip: { margin: 0 },
});

export default SortOptions;

Lưu ý

• Icon sử dụng tên từ MaterialCommunityIcons (xem tại materialdesignicons.com).
• Chip không tự quản lý state selected - phải tự handle qua onPress + state.
• Để accessibility tốt hơn, thêm accessibilityRole="button" và accessibilityState={{ selected }}.