Create a dynamic width TextInput that is centered to the middle of the screen

Viewed 71

I have a certain problem that I am facing and would like to see whether or not what I am facing is a react-native bug that needs submission to the react-native issues or if it is an error on my part.

I am trying to create a TextInput that is centered to my screen and is supposed to be able to grow in width as one types into it, once enough text is written it wraps to the next line. I am facing a problem that as one types in the TextInput the text appears first and then changes the size of the view causing a flicker and words typed to disappear and then reappear. Eventually the UI settles correctly and appears correct, but as one types the previous written characters can flow to be greater than the width of the View despite the View has no limit to width. I know I have figured out this is due to the parent have a alignItems property that makes the children (in this case the TextInput) centered.

The goal is to make the view expanded in width along side the text being written without this flickering bug.

return (
  <KeyboardAvoidingView behavior="height" keyboardVerticalOffset={Platform.OS === 'ios' > 0 : 24} style={styles.flex1}>
    <View style={styles.addingText}>
      <TextInput
        multiline
        returnKeyType="done"
        blurOnSubmit={true}
        textAlignVertical="center"
        style={styles.defaultAddingText}
        autoFocus={addingText}
        selectionColor="#3C99FF"
        underlineColorAndroid="transparent"
        value={text}
        onChangeText={handleTextChange}
        onSubmitEditing={handleSubmit}
      />
    </View>
  </KeyboardAvoidingView>
);

const styles = StyleSheet.create({
    flex1: {
      flex: 1,
    },
    addingText: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 100,
  },
    defaultAddingText: {
    paddingHorizontal: 10,
    borderRadius: 10,
  },
});
1 Answers

Give a height to your defalutAddingText style as following,

const styles = StyleSheet.create({
    flex1: {
      flex: 1,
    },
    addingText: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 100,
  },
    defaultAddingText: {
    height:auto,
    paddingHorizontal: 10,
    borderRadius: 10,
  },
});
Related