I'm trying to create 3 buttons. One of the button will have a long text. I want them to have the same width. For some reason the width doesn't change when I try to change it. Here how it looks

It looks like the width is wrap content. How to solve it and why is it like that?

App.js

import React from 'react';

export default function App() {
  return (
    <CustomScrollView >
      <View2>
        <BtnFeature activeOpacity={0.9} onPress={undefined}>
          <FontAwesome name="user" size={40} color='#fff' />
          <PanelText>Text 1</PanelText> 
        </BtnFeature>
        <BtnFeature activeOpacity={0.9} onPress={undefined}>
          <FontAwesome5 name="user" size={40} color='#fff' />
          <PanelText>Very Long Text</PanelText> 
        </BtnFeature>
        <BtnFeature activeOpacity={0.9} onPress={undefined} >
          <FontAwesome5 name="user" size={40} color='#fff' />
          <PanelText>Text 3</PanelText> 
        </BtnFeature>
      </View2>
    </CustomScrollView>
  );
}

styles.js

export const CustomScrollView = styled.ScrollView`
    margin-top: ${StatusBarHeight - 10}px;
    flex: 1;
    background-color: ${white};
`;

export const PanelText = styled.Text`
    color: ${black}; 
    font-size: 14px;
    font-weight: bold;
    background-color: ${empty}; 
    text-align: center; 
`;

export const View2 = styled.View`
    background-color: ${gray};
    padding: 15px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
`;

export const BtnFeature = styled.View`
    background-color: ${blizzardBlue};
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 100px;
    width 111px;
    border-radius: 10px;
`;