Circle background around icon shows as square in react-native

Question

I am trying to give an icon a circle background, but it shows up as a square. The icon has a circle background on Expo Snack but it has a square background in my project. How can I fix this?

My code:

import { View } from 'react-native';
import { Button } from 'react-native-paper';
import Ionicons from 'react-native-vector-icons/Ionicons';

    <View>
      <Button mode="contained">
        <Ionicons
          style={{
            color: '#EFEFEF',
            borderRadius: 32 / 2,
            backgroundColor: '#111310',
            width: 32,
            height: 32,
          }}
          name="person-outline"
        />
      </Button>
    </View>
  );

The icon background is still a square without the parent Button in my project, but I included it so the icon would be centered in its background.

What my icon looks like in Expo snack

What my icon looks like in my project

Answer 1

Problem is when using Button from 'react-native-paper';

Work Around:

You can use OnPress property of Icon.

<Ionicons
          onPress={() => console.log('Ionicons')}
          name="person-outline"
          size={25}
          color={'grey'}
          style={{
            padding: 12,
            borderRadius: 60 / 2,
            backgroundColor: 'powderblue',
          }}
        />

Or you can use TouchableaOpacity

 <TouchableOpacity
          style={{ backgroundColor: 'maroon' }}
          onPress={() => console.log('TouchableOpacity')}>
          <Ionicons
            name="person-outline"
            size={25}
            style={{
              padding: 12,
              color: 'grey',
              borderRadius: 60 / 2,
              backgroundColor: 'powderblue',
            }}
          />
        </TouchableOpacity>
    ```