Search code examples
react-nativestylespaddingtextinput

React Native TextInput padding is not working while display is set

I have a textinput component that will appear after a button pressed.

const [inputDisplay,setinputDisplay]=useState("none")
<TextInput
    style={[CommonStyles.textInput, { display: inputDisplay}]}
    keyboardType="phone-pad"
    placeholder="Code"
/>

    textInput: {
        backgroundColor: 'rgba(155,155,155,0.9)',
        width: '100%',
        height: 40,
        padding: 8,
        borderRadius: 3,
    },

The padding is not working with display set. But when I delete the display setting, it works fine.

Any solution on this issue?

Solution

  • Can you try conditional rendering instead?

    {display !== "none" && (
  <TextInput
    style={CommonStyles.textInput}
    keyboardType="phone-pad"
    placeholder="Code"
  />
)}

    Then in your CommonStyles.textInput, you can add display: 'flex'.