Chips in React-Native

Not the ones you can eat…

react-native-paper

Chips can come in handy in mobile apps where you need to display complex entities in small blocks. Chips are basically a text displayed in a rounded background, an optional chip icon. These are checkable and can contain icons as well.

Chips are very easy to implement that's why I chose them to write my first article :D. If you find any troubles implementing ping me in comment section. So, let's get started.

I'm using react-native-paper library as it comes handy with other multiple custom stylish components that you may need in your app (even thou you didn't think you need), but their are multiple options out there if you only need chip component and not all the needless components coming with it, I'll list two:

react-native-chip

react-native-chip-view

Okay, first step first, we need to install library

yarn add react-native-paper
// or if you're using npm
npm install react-native-paper

If you're on a vanilla React Native project, you also need to install and link react-native-vector-icons.

yarn add react-native-vector-icons
// or if you're using npm
npm install react-native-vector-icons
//if you are using react-native version smaller than 0.60 you'll need to manually link 
react-native link react-native-vector-icons

Now, for android you're good to go. But for iOS you might need to install pods. If your project doesn't already have a podfile you will have to initialise it in your project first for further guidance follow this link or any other you like.

And just run it in your project terminal:

$ cd ios && pod install && cd ..

This will link the library and install all pods for you.
Note: Now whenever you make changes to native side of application you have to close your packager and run new instance for changes to apply.

$ react-native run-ios

Now that our project is all set up let's make some Chips.

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

include Chip at top of your javascript file.

return (
<View style = {{flex:1}}>
  <Chip
  key={index}
  textStyle={{ color: Color.WHITE, fontSize: 15 }}
  style={{ backgroundColor: randomColor() }}
  onPress={() => Alert.alert('Clicked Chip')>
     I'm Chip
  </Chip>
</View>
);

Above code will add a single chip to your screen, pretty exciting, han?

Now, let's add dynamic chips:

First thing first initialise a datasource, I'm making a const array of Strings but you can go however you like

const dataSource = [
"Volvo", "Alpha Sports", "Ford", "Gräf & Stift", "Aston Martin", "BMW", "Tarrant Automobile","Push", "Österreichische Austro-Fiat", "Mazda", "Rosenbauer"
]

and now…

<View style = {{flex:1}}>
{
 dataSource.map((item, index) => {
   return (
    <View style={{
    margin: 5,
    flexWrap: 'wrap',
    }}>
       <Chip
       key={index}
       mode="outlined" //changing display mode, default is flat.
       height={30} //give desirable height to chip
       textStyle={{ color:'white',fontSize: 15 }} //label properties
       style={{ backgroundColor: randomColor() }} //display diff color BG
       onPress={() => Alert.alert('Clicked Chip'+ item)}>
       //display text of clicked chip

      //item to display in chip label  
      {item}
      </Chip>
  </View>
);
})}
</View>

What we're doing in above code is taking array of String and mapping each item as a Chip entity with different background colors for that I made a helper function which takes in array of colors and return a random color.

const color = ['red', '#66CCFF', '#FFCC00', '#1C9379', '#8A7BA7'];
randomColor = () => {
let col = color[Math.floor(Math.random() * color.length)];
return col;
};

This is what output looks like:

Pretty cool, right? Still not what you need? You can customize it even more. Chip component has various style props you can check them out here.

You can add icon, Avatar, set selected value and color and even disable a chip making it greyed out.

Woah, man. Finally we're over. I have tried by best to give you detail information about how to add dynamic chips to android and iOS apps. Thanks for reading my article . Please clap if you liked it!