Function ChipsExample

example/app/chips.tsx:5–41

()

import { useState } from "react";

export default function ChipsExample() {
  const [filterChipSelected, setFilterChipSelected] = useState(false);
  const [inputChipSelected, setInputChipSelected] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Chip Example</Text>
      <Chip
        variant="assist"
        labelText="Assist"
        leadingIcon="person"
        trailingIcon="close"
        modifier={Modifier.border({ width: 1, color: "green" })}
      />
      <Chip
        variant="input"
        modifier={Modifier.border({ width: 1, color: "green" })}
        labelText="Input"
        leadingIcon={inputChipSelected ? "check" : undefined}
        selected={inputChipSelected}
        onClick={() => {
          setInputChipSelected(!inputChipSelected);
        }}
      />
      <Chip
        variant="filter"
        labelText="Filter"
        trailingIcon="box"
        selected={filterChipSelected}
        onClick={() => {
          setFilterChipSelected(!filterChipSelected);
        }}
      />
      <Chip variant="suggestion" labelText="Suggestion" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {