<!-- The react-native-linear-gradient is not configured with snack so the usage guide is added here to be displayed in documentation. -->

### LinearGradient Usage

Using LinearGradient in React Native Elements is supported through the
[react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)
package. If you're using expo or create-react-native-app then you can use
`linearGradientProps` prop right out the box with no additional setup.

For react-native-cli users, make sure to follow the
[installation instructions](https://github.com/react-native-community/react-native-linear-gradient#add-it-to-your-project)
and use it like this:

```jsx
import { Chip } from '@rneui/themed';
import LinearGradient from 'react-native-linear-gradient';

...

<Chip
  ViewComponent={LinearGradient} // Don't forget this!
  linearGradientProps={{
    colors: ['red', 'pink'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
  }}
/>
```

```SnackPlayer name=RNE Chip
import React from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import { Chip, withTheme, colors } from '@rneui/themed';

type ChipsComponentProps = {};

const Chips: React.FunctionComponent<ChipsComponentProps> = () => {
return (
  <>
    <ScrollView>
      <View style={styles.contentView}>
        <View style={{ alignItems: 'center' }}>
          <Chip title="Solid Chip" containerStyle={{ marginVertical: 15 }} />
          <Chip
            title="Disabled Chip"
            disabled
            containerStyle={{ marginVertical: 15 }}
          />
          <Chip
            title="Outlined Chip"
            type="outline"
            containerStyle={{ marginVertical: 15 }}
          />
          <Chip
            title="Outlined & Disabled"
            type="outline"
            disabled
            containerStyle={{ marginVertical: 15 }}
          />
          <Chip
            title="Left Icon Chip"
            icon={{
              name: 'bluetooth',
              type: 'font-awesome',
              size: 20,
              color: 'white',
            }}
            containerStyle={{ marginVertical: 15 }}
          />
          <Chip
            title="Right Icon Chip"
            icon={{
              name: 'close',
              type: 'font-awesome',
              size: 20,
              color: 'white',
            }}
            iconRight
            containerStyle={{ marginVertical: 15 }}
          />
          <Chip
            title="Pressable Icon Chip"
            icon={{
              name: 'bluetooth',
              type: 'font-awesome',
              size: 20,
              color: colors.primary2,
            }}
            onPress={() => console.log('Icon chip was pressed!')}
            type="outline"
            containerStyle={{ marginVertical: 15 }}
          />
          <Chip
            title="Pressable Icon Chip"
            icon={{
              name: 'close',
              type: 'font-awesome',
              size: 20,
              color: colors.primary2,
            }}
            onPress={() => console.log('Icon chip was pressed!')}
            iconRight
            type="outline"
            containerStyle={{ marginVertical: 15 }}
          />
        </View>
      </View>
    </ScrollView>
  </>
);
};

const styles = StyleSheet.create({
contentView: {
  flex: 1,
  marginTop: 20,
},
});

export default withTheme(Chips, '');
```
