Estoy tratando de crear 3 botones. Uno de los botones tendrá un texto largo. Quiero que tengan el mismo ancho. Por alguna razón, el ancho no cambia cuando intento cambiarlo. Aquí como se ve

Parece que el ancho es contenido de envoltura. ¿Cómo solucionarlo y por qué es así?

Aplicación.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> ); }

estilos.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; `;