CODEWITHSUNDEEP
react-nativereact-native-paper
Chen
Chen

Reputation: 970

React Native Paper HelperText consumes space when invisible

I am displaying error messages for input fields with React Native Paper, and I am using the HelperText. This is my code:

      <TextInput
        mode="outlined"
        label="Password"
        placeholder="Password"
        value={Password}
        secureTextEntry={true}
        onChangeText={onChangePassword}
        style={{height: 40}}
      />
      <HelperText type="error" visible={isSubmit && PasswordValid()}>
        {password_message}
      </HelperText>

And with no error message it displays like this, and the helperText consumes a space (I did inspect it as well, there is a space) even it is invisible.

enter image description here

And this when it is visible:

enter image description here

How do I get rid of the white space when it is invisible?

Upvotes: 0

Views: 3850

Answers (2)

Sahesh
Sahesh

Reputation: 885

You can have a dynamic styling based on the visibility of the error or try as follows. Change margin value according to your need

 <View style={{marginVertical:-3}}><HelperText type="error" visible={isSubmit && PasswordValid()}>
    {password_message}</View>

or

Conditional rendering.

{hasErrorVisible ?<View> <HelperText type="error" visible={isSubmit && PasswordValid()}>
  {password_message}
</HelperText></View> : null}

Upvotes: 1

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

Conditionally render it

{isTrue ? <HelperText type="error" visible={isSubmit && PasswordValid()}>
  {password_message}
</HelperText> : null}

This won't mount the element to the views until the isTrue value is true hence no empty space.

In your case you can do something like this

{isSubmit && PasswordValid() ? <HelperText type="error" visible={true}>
      {password_message}
    </HelperText> : null}

Make sure isSubmit && PasswordValid() is a boolean.

Upvotes: 3

Related Questions