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

Question

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'
}})

Answer 1

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'.

Answer 2

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

Answer 3

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

Answer 4

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.