3 thoughts on “TextInput inside View doesn’t work”

  1. So interestingly the work’s already been done to support this. RCTView will hit test its subviews regardless of whether they’re in its bounds iff pointerEvents is box-none: https://github.com/facebook/react-native/blob/f3cd27cf483671b8821e4f50bfa7bb370893e59a/React/Views/RCTView.m#L126-136

    And indeed, if we use the original example in https://github.com/boopathi/textinputbug/blob/326362e5d39588682048bccda281d6bb2701d04a/index.ios.js with pointerEvents='box-none' on the problem parent views, it works as expected 💥

    So making this “just work” seems to only be a matter of changing the default pointerEvents, or changing the behavior of RCTPointerEventsUnspecified to fallback to searching its subviews.

  2. For people looking here for a solution, without understanding/going through someone’s code:

    Specify a height to the TextInput seemed to fix the problem of it not working.

    Example:

    <View>
    <View>
        <TextInput
            style={styles.input}
            onChangeText={(text) => this.setState({ input: text })}
            placeholder="Input Here"
        />
    </View>
</View>

    const styles= StyleSheet.create({
    input: {
        height: 20, //comment this out and TextInput wont work (some cases the grey background wont be there)
        width: 100,
        background: 'grey, //added for visual
    },
});

1 possible answer(s) on “TextInput inside View doesn’t work”

  1. For people looking here for a solution, without understanding/going through someone’s code:

    Specify a height to the TextInput seemed to fix the problem of it not working.

    Example:

    <View>
    <View>
        <TextInput
            style={styles.input}
            onChangeText={(text) => this.setState({ input: text })}
            placeholder="Input Here"
        />
    </View>
</View>

    const styles= StyleSheet.create({
    input: {
        height: 20, //comment this out and TextInput wont work (some cases the grey background wont be there)
        width: 100,
        background: 'grey, //added for visual
    },
});