CODEWITHSUNDEEP
cssreactjstypescriptreact-nativeflexbox
QueKT
QueKT

Reputation: 11

React native dynamically set button height

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?

Upvotes: 1

Views: 1059

Answers (1)

SRanuluge
SRanuluge

Reputation: 697

Try to use a fixed width and a height for buttonStyle.

<Button
          title="Login"
          buttonStyle={{ width: 150, height: 50, backgroundColor: null }}
          containerStyle={{
            backgroundColor: 'green',
            alignItems: 'center',
            alignSelf: 'center',
            // position: 'absolute',
            elevation: Platform.OS === 'android' ? 5 : 0,
          }}
          loadingProps={{ color: 'red' }}
          loading={true}
          onPress={login}
        />

Feel free for doubts.

Upvotes: 1

Related Questions