Input: switching secureTextEntry from true to false (or back) causes the cursor to move back to the beginning

[kaitlynbrown]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink

Issue Description

When changing an Input field from masked to unmasked or unmasked to masked, the cursor also jumps back to the beginning of the field

node, npm, react-native, react and native-base version, expo version if used, xcode version

node v9.11.2 npm v5.6.0 yarn v1.9.4 react-native v0.57.0-rc.4 react v16.4.1 native-base v2.8.1 Pixel 2, Android 8.1.0

Expected behaviour

When the secureTextEntry prop of the Input component is changed from true to false (or false to true), the cursor should remain where it is in the input field

Actual behaviour

When the secureTextEntry prop of the Input component is changed from true to false (or false to true), the cursor moves to the beginning of the field

Steps to reproduce

Given the following component:

import React from "react";
import { View, Item, Icon, Input, Label } from "native-base";
import theme from "theme";

class InputItem extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isMasked: !!props.isPassword
    };
  }

  toggleMask = () => {
    const { isMasked } = this.state;
    this.setState({ isMasked: !isMasked });
  };

  render() {
    const { label, active, isPassword, error, ...props } = this.props;
    const { isMasked } = this.state;
    return (
      <View style={{ paddingBottom: 15 }}>
        {label && <Label>{label}</Label>}
        <Item regular error={!!error} active={active}>
          <Input
            placeholderTextColor="rgba(0, 0, 0, 0.7)"
            secureTextEntry={isMasked}
            {...props}
          />
          {isPassword && (
            <Icon
              active
              type="Ionicons"
              name={eyeconName(isMasked)}
              onPress={this.toggleMask}
            />
          )}
          {error && (
            <Icon
              active
              name="alert"
              style={{ color: theme.danger }}
            />
          )}
        </Item>
      </View>
    );
  }
}

const eyeconName = isMasked => isMasked ? "md-eye" : "md-eye-off";

with isPassword set to true, the input should be masked and there should be an eye icon. Tapping the eye icon will cause the input to be unmasked, and change the icon to have a slash through it. It also, unfortunately, returns the cursor to the beginning of the field

Is the bug present in both iOS and Android or in any one of them?

At least Android. Have not tested on iOS

[suvenduchhatoi]

@kaitlynbrown Most probably it is a React-native issue with 'secureTextEntry' property of 'TextInput' component...So, as native-base is built on top of "react-native", same issue with 'Input' component... Check out the link https://github.com/facebook/react-native/issues/10678

Yes, indeed even 'TextInput' of React-Native behaves the same way with secureTextEntry:

[suvenduchhatoi]

Closing the issue due to no response for a while...Hope your issue has been resolved.You can reopen the issue if you still feel the issue is exclusive to "native-base"...