Search code examples
react-nativereact-native-vector-icons

Add Circular Shape in Icon

How do I add a circular shape in a filter icon? I'm using react-native-vector-icons

Here's the picture of what I've wanted

enter image description here

import Icon from "react-native-vector-icons/Ionicons";

<TouchableOpacity onPress={() => {}}>
  <Icon size={25} name={"filter-outline"} />
</TouchableOpacity>;
Solution

  • Here is an example of what you want (https://snack.expo.dev/M9YBSLM3S)

    And the code explained below, the key is to use position:"absolute" to overlay views over each other, and transform to move views left and right, and up and down.

     const SIZE = 15;
  return (
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
     <TouchableOpacity onPress={() => {}}>
        <Icon   size={30} name={"filter-outline"} />
        <View style={{
          width:SIZE*2,
          height:SIZE*2,
          borderRadius:SIZE,
          backgroundColor:"gray",
          justifyContent:"center",
          alignItems:"center",
          paddingTop:SIZE*.2,
          position:"absolute",
          transform:[
            {translateX:15},
            {translateY:-10}

          ]
        }}>
          <Text>1</Text>
        </View>
         
    </TouchableOpacity>

    </View>
  );