CODEWITHSUNDEEP
javascriptreactjsreact-nativescrollviewtextinput
user2849167
user2849167

Reputation: 265

React native textInput scrollView android

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>

Upvotes: 6

Views: 3636

Answers (2)

smk
smk

Reputation: 1

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>

Upvotes: 0

Dusk
Dusk

Reputation: 1877

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.

Upvotes: 3

Related Questions