Nested scrollview stuck at the bottom

[mostafaspace]

I'm having this issue when I scroll down inside a BottomSheetBehavior, the NestedScrollView stuck at the bottom, and when I try to scroll up it jumps back to bottom..

I also couldn't apply that fix. https://stackoverflow.com/questions/37691748/nested-scrollview-automatically-scrolls-to-bottom

[cesardeazevedo]

Hi, are you using the react-native-bottom-sheet-behavior?

How exactly you are using it? could you provide a way that i could reproduce the problem? I've tested nested scroll example on the bottom-sheet-behavior, but i didn't had any problems.

Without a example project is really hard to help you, since this project is too generic.

[mostafaspace]

Yes Im using it with react-native-bottom-sheet-behavior

The problem is: when I started scrolling and then scroll up, it suddenly scroll down to the end of the list and then get stuck there.

<CoordinatorLayout>
            <View style={styles.content}>
                <MapView
                    ref={(ref) => { this.mapRef = ref }}
                    style={StyleSheet.absoluteFillObject} >
                    {this.markerList()}
                </MapView>
                <Header searchBar rounded>
                    <Item>
                        <Button style={{ paddingTop: 0 }} transparent onPress={() => this.props.openDrawer() }>
                            <Icon active name="ios-menu" />
                        </Button>
                        <Icon active name="search" />
                        <Input placeholder={I18n.t('search')} onChangeText={(searchText) => {this.loadData(searchText)}}/>
                    </Item>
                </Header>
            </View>

            <BottomSheetBehavior
                peekHeight={50}
                hideable={false}
                state={STATE_ANCHOR_POINT}
                anchorEnabled={true}
                ref={ref => { this.bottomSheet = ref }}>
                <View style={styles.bottomSheet}>
                    <TouchableOpacity onPress={() => this.handleState()} style={styles.bottomSheetHeader}>
                        <Text style={styles.label}>{I18n.t('directory')}</Text>
                    </TouchableOpacity>
                    <View style={styles.bottomSheetContent} >
                        {this.isLoading(this.state.isLoading)}
                        <NestedScrollView ref={ref => { this.nestedScroll = ref }} style={styles.scroll}>
                            {this.renderList()}
                        </NestedScrollView>
                    </View>
                </View>
            </BottomSheetBehavior>
        </CoordinatorLayout>

[cesardeazevedo]

I don't think you need NestedScrollView, NestedScrollView is not required if you are using BottomSheetBehavior with anchorEnabled=true

NestedScrollView + BottomSheetBehavior will only fit if you are not the anchor point and defined a fixed height, like in this gif

Now, if you are using the anchor point with anchorEnabled, the BottomSheetBehavior is already a NestedScrollView Itself (see), so it might causing a conflict.

If you look at the google maps example there's no NestedScrollView, and can you scroll the whole view without problems.

I hope i understood your issue, i also didn't be abled to run your code, so let me know if you got it.

[mostafaspace]

Yeah. I just replaced the NestedScrollView with a normal View and the scroll is fixed! Thank you so much!