CODEWITHSUNDEEP
iosreact-native
matusalem
matusalem

Reputation: 2531

React Native iOS TextInput: switching secureTextEntry switches font

I want to implement show password feature in TextInput in React Native 0.30.0. I've implemented 'eye' button next to TextInput which change state of passwordHidden state variable. Here is my code:

...
  <View style={[styles.passwordWrapper, styles.textInputBorder]}>
        <TextInput
          autoCapitalize={'none'}
          autoCorrect={false}
          clearButtonMode={'while-editing'}
          style={[styles.textInput, styles.passwordInput]}
          onChangeText={(password) => this.onPasswordChange(password)}
          value={this.state.password}
          secureTextEntry={this.state.passwordHidden}
          multiline={false}
          placeholder={Strings.password}
          underlineColorAndroid={Colors.surfacePrimary}
        />
        <TouchableOpacity style={styles.showPasswordButton} onPress={this.onPressShowPassword}>
          <EntypoIcon color={Colors.surfacePrimary} name={this.state.passwordHidden ? 'eye' : 'eye-with-line'} size={20} />
        </TouchableOpacity>
      </View>
...
onPressShowPassword: function () {
    var previousState = this.state.passwordHidden;
    requestAnimationFrame(() => {
        this.setState({
             passwordHidden: !previousState,
        });
    });
},

Here's how password TextInput looks before clicking on button. enter image description here And after clicking: enter image description here And when I tap third time and start type then password is immediately cleared. I am not changing fontFamily in styles even in entire app.

Anybody can explain what is going on? Or just how to overcome that annoying behavior.

Upvotes: 2

Views: 4672

Answers (2)

234 Shk
234 Shk

Reputation: 326

changing the fontSize works for me:

fontSize: (this.state.showPassword) ? 24 : 23

Upvotes: 1

Urska Krivc
Urska Krivc

Reputation: 844

Workaround that is working for me, is removing focus from TextInput, when user clicks show/hide password. One way to do this, is to add ref (for example ref="password") to your TextInput and then call this.refs.password.blur()

Upvotes: 2

Related Questions