CODEWITHSUNDEEP
reactjsreact-nativecapslock
javascript apprentice
javascript apprentice

Reputation: 23

React native TextInput Component - showing caps lock icon when caps is activated

The caps lock icon is popping up as an inbuilt feature of React Native - TextInput component. I would like to style this icon so I can apply the right padding to it.

No documentation on this feature, but seems to be turned on when secureTextEntry prop is true for the component.

<DefaultInputField
    id="password"
    placeholder="Enter password..."
    label="Password"
    secureTextEntry=true
/>

enter image description here

Upvotes: 2

Views: 1008

Answers (1)

Robin de Rozario
Robin de Rozario

Reputation: 91

If you only want to apply (right) padding you could do the following.

  1. Wrap your input field with a View and apply the border styling to the view. Apply the (right) padding to this View.
  2. Remove the border styling from your input field and make fit perfectly within your view.

If done correctly this will visually yield the same result but you can control the right padding.

Upvotes: 1

Related Questions