Chip

import { Chip } from 'reactnatively';

1import { useState } from 'react';2import { ScrollView, StyleSheet } from 'react-native';3import { Chip } from 'reactnatively';45const categories = ['All', 'Design', 'Engineering', 'Marketing', 'Finance', 'Operations'];67export function CategoryFilter() {8  const [selected, setSelected] = useState('All');910  return (11    <ScrollView12      horizontal13      showsHorizontalScrollIndicator={false}14      contentContainerStyle={styles.row}15    >16      {categories.map((cat) => (17        <Chip18          key={cat}19          label={cat}20          variant="glass"21          size="md"22          isSelected={selected === cat}23          onPress={() => setSelected(cat)}24        />25      ))}26    </ScrollView>27  );28}2930const styles = StyleSheet.create({31  row: { flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingVertical: 12 },32});

1import { useState } from 'react';2import { View, StyleSheet } from 'react-native';3import { Ionicons } from '@expo/vector-icons';4import { Chip, TextInput, Heading } from 'reactnatively';56export function TagInput() {7  const [tags, setTags] = useState(['react-native', 'expo', 'typescript']);89  function removeTag(tag: string) {10    setTags((prev) => prev.filter((t) => t !== tag));11  }1213  return (14    <View style={styles.container}>15      <Heading level="h5" style={{ marginBottom: 12 }}>Tags</Heading>16      <View style={styles.wrap}>17        {tags.map((tag) => (18          <Chip19            key={tag}20            label={tag}21            variant="subtle"22            icon={<Ionicons name="pricetag-outline" size={12} color="rgba(255,255,255,0.5)" />}23            onDismiss={() => removeTag(tag)}24            size="sm"25          />26        ))}27      </View>28      <TextInput placeholder="Add tag..." size="sm" style={{ marginTop: 12 }} />29    </View>30  );31}3233const styles = StyleSheet.create({34  container: { padding: 20 },35  wrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },36});