react native Scroll View doesn't scroll from inside text input

user_6086820 0
Viewed 4045

I added multi Text input inside a scroll view. the problem is when I want to scroll down from inside of a text input, I put my finger inside a text input and scroll down but it doesn't scroll down the page, is there a way to fix this? here is a sample code:

export default class ScrollViewWithTextInput extends React.Component {
render() {
    <ScrollView>
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
        <TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        /><TextInput
            style={styles.input}
            placeholder={'توضیحات'}
            underlineColorAndroid='transparent'
        />
    </ScrollView>
}}
const styles = StyleSheet.create({
Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 8
},
input: {
    width: 350,
    height: 100,
    margin: 5,
    borderColor: 'black',
    borderWidth: 2,
    textAlign: 'right'
}})
react-native reactjs
4 Answers

For some reason setting multiline={true} to the TextInput worked for me.

Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.

user_91737780

Use each input as a component. try something like this: 

<TouchableOpacity onPress={()=>this.input.focus()} >
    <View pointerEvents="none" >
        <TextInput ref = {(input) => this.input = input} />
    </View>
</TouchableOpacity>

This will do the trick

user_61701910

Try to adjust the height of the input. I don't really understand why but it solved my problem.

user_99794280

setting

<ScrollView keyboardShouldPersistTaps="always"

in combination with the textInout component below (custom component that i created for text inputs to solve this issue) solved my problem: 

<TouchableOpacity
         activeOpacity={1}
         onPress={()=>this.input.focus()}>
         <View
               pointerEvents="none">
               <TextInput
                  ref = {(input) => this.input = input}
               />
         </View>
    </TouchableOpacity>

Update

a better expression might be:

constructor(props) {
    super(props);
    this._keyboardDidHide = this._keyboardDidHide.bind(this)
    this.onSubmitEditing = this.onSubmitEditing.bind(this)
}

componentWillMount () {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
};
componentWillUnmount () {
    this.keyboardDidHideListener.remove();
}
_keyboardDidHide(){
    this.input.blur()
}

and then the expression above for the TextInput component. because in the previous expression when you press back and the keyboard hides, and you tap on that input again, the keyboard doesn't open, because that input is already focused. so you need to blur and then focus again.

this is my idea, maybe you might perform this in a more creative way :)

btw don't forget to import Keyboard from 'react-native' if you use my expression.

user_88981380
Related