Reputation: 165
I am developing a survey form. In sum, I want to use ScrollView in scrollable page. Questions are came from json with their type (like type: 'list'/ 'check' / radio / 'autocomplete'), and my High Ordered Component gets and puts questions to phone screen. HOC is like that:
import {Container, ... } from 'native-base'
<Container>
.
.
.
<Content key="form" style={Style.content}>
{questions}
</Content>
.
.
.
</Container>
If questions are more than 6 or 7, phone screen can be scrollable (I think this scrollable feature comes from 'Container' component). In my autocomplete component, I want to use ScrollView for suggestions below the textInput. Autocomplete component like below:
<View>
.
.
.
<TextInput
style={Style.ACTextInput}
ref={ref => this.textInputRef = ref as FocusableTextInput}
multiline={true}
onChangeText={(text) => {
this.setState({ filter: text })
this.filterOptions(text)
}
}
value={this.state.filter} >
</TextInput>
</View>
{/* TODO: Need to use nested scroll view. */}
<Content style={{ height: 250 }}>
{/* <ScrollView style={Style.suggestionContainer}
scrollEnabled={true} > */}
{this.state.showOptions.map(this.drawSuggestions)}
{/* </ScrollView> */}
</Content>
.
.
.
</View>
If phone screen is not scrollable, autocomplete suggestion part scrolls fine. However, if phone screen is scrollable(if I have more than 6-7 question in a page) autocomplete part looses its scrollable feature and phone screen begins scroll..I wrote 2 different part of my work, because I thought that this problem may be occurred one of these. I also searched to use NestedScrollView in react-native and I found that it is common issue for android devices. Is there any solution for this ? Thanks
Note: my test phone is Samsung S6 android 7.0
Upvotes: 0
Views: 672