Sometimes, we want to add a circle image button with React Native.

In this article, we’ll look at how to add a circle image button with React Native.

How to add a circle image button with React Native?

To add a circle image button with React Native, we can use the TouchableOpacity and Icon components.

For instamce, we write:

import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View>
      <TouchableOpacity
        style={{
          borderWidth: 1,
          borderColor: 'rgba(0,0,0,0.2)',
          alignItems: 'center',
          justifyContent: 'center',
          width: 100,
          height: 100,
          backgroundColor: '#fff',
          borderRadius: 50,
        }}>
        <Icon name="chevron-right" size={30} color="#01a699" />
      </TouchableOpacity>
    </View>
  );
}

to make the TouchableOpacity round with by setting the width and height and set the borderRadius to be half of the width and height.

And then we align the Icon in the center of TouchableOpacity by setting justifyContent and alignItems to 'center'.

And we add a border around the TouchableOpacity component by setting borderWidth and borderColor.

Conclusion

To add a circle image button with React Native, we can use the TouchableOpacity and Icon components.