react-native: TextInput inside View doesn't work

<View>
  <TextInput placeholder="This works" />
  <View>
    <TextInput placeholder="This doesn't work" />
  </View>
</View>

The sample project with this bug is here - https://github.com/boopathi/textinputbug

Am I doing something wrong here ?

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 2
  • Comments: 18 (9 by maintainers)

Commits related to this issue

Most upvoted comments

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
    },
});

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.