6

I am trying to write a very simple app to test react native.

I have some TextInput components in a big ScrollView, as a register formulary.

Everything works fine, but when I scroll clicking on a TextInput, it doesn't scroll.

I can only scroll through the page when I click in blank spaces. Any idea of how to do it?

Thanks.

<ScrollView>
  <TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
  <TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
  <TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
  <TextInput onChangeText={email => this.setState({email})} label={ I18n.t("contactEmail") }/>
</ScrollView>
StephenTG
  • 2,579
  • 6
  • 26
  • 36
user2849167
  • 273
  • 1
  • 4
  • 14
  • possible duplicate of http://stackoverflow.com/questions/39745442/scrollview-cant-scroll-when-focus-textinput-react-native – suman j Sep 29 '16 at 15:49
  • Did you solve this problem? – Craig Wilkinson Nov 28 '17 at 17:22
  • 1
    I had a problem with this and it turned out that it was because I was specifying a `height` in the styles for the `TextInput`, but the contents of the `TextInput` were exceeding that height in Android but not iOS (because the system fonts were overriding my font styles). In case anyone else comes across this it can be fixed by removing the hard coded height or increasing it to ensure that it can contain the content without overflow. – Craig Wilkinson Nov 28 '17 at 17:53

2 Answers2

3

I had the same problem and after searching for a while no answer helped me; so I solved it myself by putting a <TouchableWithoutFeedback /> over each <TextInput> and sending the touch event back to the <TextInput />:

<View>
    <TextInput ref ={(ref)=>this.textInput = ref}>
    <TouchableWithoutFeedback style={{position: 'absolute', top:0, bottom:0, left:0, right:0}}
    onPress={()=>this.textInput.focus()}/>
</View>

You can create a custom component which wraps TextInput like that and use them in your ScrollViews.

Dusk
  • 1,729
  • 10
  • 17
0

I had solve the problem like this:

  <TouchableOpacity
                    activeOpacity={1}
                    style={{ flex: 1 }}
                    onPress={() => this.textInput.focus()} >
                    <View
                        style={{ flex: 1 }}
                        pointerEvents="none" >
                        <TextInput
                            ref={(ref) => this.textInput = ref}
                            style={{ fontSize: 14, color: '#666666', textAlign: 'right', flex: 1 }}
                            placeholder={this.props.placeHolder}
                            defaultValue={this.props.defaultValue ? this.props.defaultValue + '' : ''}
                            placeholderTextColor='#aaaaaa'
                            keyboardType={this.props.keyboardType ? this.props.keyboardType : 'default'}
                            secureTextEntry={this.props.isSecret}
                            onChangeText={this._onChangeText.bind(this)} />
                    </View>
                </TouchableOpacity>
smk
  • 1