CODEWITHSUNDEEP
react-nativetextinput
Maruf Sharifi
Maruf Sharifi

Reputation: 81

keep keyboard open when clicks out of TextInput react native

I have problem with keyboard, when i click the button to show password the TextInput get blur, and hide the keyboard. i want to keep keyboard open when the button clicks. i have found a workaround it works well with ios but doesn't work with android? is it a public problem? what should i do?

<View>
    <TextInput ref={inputRef} secureTextEntry={secure} style={styles.input} {...rest} />
      <TouchableWrapper style={styles.secureTextWrapper} onPress={_handleSecureTextEntryChange}>
       secure ? 'show' : 'hide'
      </TouchableWrapper>
</View>

Upvotes: 0

Views: 1357

Answers (1)

Bataklik
Bataklik

Reputation: 155

This is how I did my password input, I created a container representing the TextInput with some borders. Inside the container a title and passwordContainer.

passwordContainer:

  • TextInput
  • TouchableOpacity with the icons
<SafeAreaView style={styles.inputContainer}>
  <Text style={styles.titleInput}>{title}</Text>
  <View style={styles.textContainer}>
    <Ionicons name={iconLeft} size={22} color="#1F2341" />
    <TextInput
      style={styles.textInput}
      placeholder={placeholder}
      onChangeText={propertyChange}
      placeholderTextColor="#3f4783"
      secureTextEntry={secureText}
      enablesReturnKeyAutomatically
      value={value}
    />
    <TouchableOpacity onPress={onSecurePress}>
      <Ionicons name={iconRight} size={22} color="rgba(31, 35, 65, 0.7)" />
    </TouchableOpacity>
  </View>
</SafeAreaView>;

onSecurePress:

onSecurePress={() => setSecureText(!secureText)}

style:

const styles = StyleSheet.create({
  inputContainer: { marginBottom: 15 },
  textContainer: {
    backgroundColor: "rgba(255,255,255,0.8)",

    alignItems: "center",
    flexDirection: "row",
    height: 50,
    paddingLeft: 10,

    //borderWidth: 4,
    borderRadius: 15,
    borderWidth: 0.5,
    borderColor: "rgba(0,0,0,0.2)",

    marginHorizontal: 20,
    marginVertical: 5,

    shadowOffset: { height: 2, width: 2 },
    shadowColor: "black",
    shadowOpacity: 0.1,
  },

  titleInput: {
    marginHorizontal: 20,
    marginVertical: 5,
    paddingLeft: 10,
    color: "#6E6E6E",
  },
  textInput: {
    width: "80%",
    padding: 10,
  },
  errorContainer: { marginLeft: "10%" },
  errorMessage: {
    color: "#e74d3c",
    fontFamily: "MontserratItalic",
  },
});

Upvotes: 1

Related Questions