I am using React Native Elements to add a button to my layout here is the code below:
<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 problem is the loading spinner is bigger than the button text, so when you click the button it makes the loading spinner appears within the button and the button height increases to cater for the size of the loading spinner which looks terrible and then it shrinks back down when loading spinner goes away. Ive tried to set the loading spinner size with:
loadingProps={{size:normalize(10)}}
But its not consistent among Android/IOS screen sizes, some devices the button wont increase/decrease in size but other devices do.
Is there a way to set the button height on all devices so the button height never changes once rendered, but also the button height needs to fit the spinner correctly?