CODEWITHSUNDEEP
exporeact-nativereact-native-ios
GeekDev
GeekDev

Reputation: 173

secureTextEntry is changing font family React Native

I'm building a form for login that contains username and password fields with React Native using the TextInput component and for the password field, I'm passing the secureTextEntry prop as follows:

<TextInput
value={password}    
onChangeText={(e)=>setPassword(e)}
style={styles.password}
secureTextEntry={true}

But I faced an issue where fontFamily style is not applying on the TextInput with secureTextEntry prop. I figured out a solution that worked ONLY on IOS but NOT on Android by writing the following:

added ref={ref => ref_1 = ref} prop for password textInput so it becomes as follows:

  <TextInput
    value={password}    
    onChangeText={(e)=>setPassword(e)}
    style={styles.password}
    secureTextEntry={true} 
    ref={ref => ref_1 = ref}

trying to set the style on useEffect

let ref_1 =  useRef(null)
  useEffect(()=>{

    ref_1.setNativeProps({
        style:{
          fontFamily:fonts.dinRegular
        }
    })
  
  },[])

But now I have a bug where the whole placeholder is disappearing on ANDROID completely but working perfectly on IOS...

Any other suggestions please?

Upvotes: 2

Views: 1440

Answers (3)

Sushil
Sushil

Reputation: 2490

The following worked for me.

const inputRef = useRef();

useEffect(() => {
    if(inputRef && inputRef.current){
      inputRef.current.setNativeProps({ style: {fontFamily: 'YOUR-FONT-FAMILY'} })
    }    
}, [inputRef.current]);



<TextInput ref={inputRef} />

Upvotes: 1

GeekDev
GeekDev

Reputation: 173

According to this issue

The problem was solved by just updating Expo!

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try this way

ref_1.current.setNativeProps({
        style:{
          fontFamily:fonts.dinRegular
        }
})

Upvotes: 0

Related Questions