Обрезанный значок с родной базовой кнопкой

Question

Я использую родную базу для создания круглых значков кнопок.
Когда значок маленький, он работает нормально:

<Button   
    rounded 
    style={{
        borderRadius : 32,
        width : 64,
        height : 64,

    }} 
>
    <Icon  
        name="bell"
        type="MaterialCommunityIcons"
        style={{
            fontSize: 35, 
            marginLeft : 14
        }}
    />
</Button>

Когда я меняю размер значка, он обрезается

<Button   
    rounded 
    style={{
        borderRadius : 32,
        width : 64,
        height : 64,

    }} 
>
    <Icon  
        name="bell"
        type="MaterialCommunityIcons"
        style={{
            fontSize: 60, //bigger icon
            marginLeft : 3
        }}
    />
</Button>

Что я должен сделать, чтобы отобразить значок над кнопкой?
РЕДАКТИРОВАТЬ: проблема усугубляется, когда кнопка становится меньше (вертикальная линия обрезки становится ближе к центру кнопки)

Answer 1

Вы можете обернуть изображение в TouchableOpacity, чтобы сделать его кнопкой

<TouchableOpacity> 
 <Image style={{ height: 50, width: 50 }} 
   source= {require('../../res/images/bell.png')} /> 
</TouchableOpacity>