EmreG
EmreG

Reputation: 165

React Native ScrollView is not working properly

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

Answers (0)

Related Questions