React Native Paper HelperText consumes space when invisible

Question

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.

And this when it is visible:

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

Answer 1

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.