I've implemented a button using React Native Elements in my layout. Here's the code snippet:
<Button
title="Login"
buttonStyle={{ backgroundColor: Colour.green }}
containerStyle={{
paddingLeft: '20%',
paddingRight: '20%',
alignSelf: 'center',
position: 'absolute',
bottom: '-5.2%',
elevation: Platform.OS === 'android' ? 5 : 0,
}}
titleStyle={{ fontSize: normalize(10) }}
loading={loggingIn}
onPress={login}
/>
The issue I'm facing is that the loading spinner appears larger than the button text, causing the button height to increase while the spinner is visible, resulting in an unsightly fluctuation in button size. I've tried setting the loading spinner size using:
loadingProps={{size:normalize(10)}}
However, this approach isn't consistent across different Android and iOS devices. Some devices maintain the button size, while others adjust it based on the spinner size.
Is there a way to ensure the button height remains constant on all devices after rendering, while also accurately accommodating the loading spinner size?