I am writing an expo + nativebase app. I have...
<ScrollView>
<ScrollView horizontal>
<Content> </Content> // how to get this to scroll?
</ScrollView>
</ScrollView>
How can I get the nested Content (nativebase's ScrollView) to scroll? I've tried replacing Content with ScrollView with no success.
Image before any scrolling
Image after scrolling down as far as possible. The nested <Content> still has more to display, but won't scroll
Related
The View Structure Below
<ScrollView horizontal pagingEnabled>
<View key={1}/>
<View key={2}>
<ScrollView horizontal={false} pagingEnabled>
<View key={'2-0'}>
<ScrollView horizontal pagingEnabled>{subviews here}</ScrollView>
</View>
<View key={'2-1'}/>
<View key={'2-2'}/>
</ScrollView>
</View>
<View key={3}/>
</ScrollView>
the problem is that,when I scrolled to the view[key:2], and its subview is view[key:'2-0'] right now, then the scrollview nested by view[key:'2-0'] will take over the gesture responder, and I will never ever got chance to swipe horizontally to the view[key:3] or back to view[key:1]. I've tried to set onMoveShouldSetResponderCapture to the outsidest scrollview to take over gesture responder while the insidest scrollview is on the edge. It will only work when I swipe slowly.
Is there anyway to make this work naturally ?
thanks, guys
Finally , I solved this problem be replacing the outsidest scrollview. I implemented the swpie-horizontally view with reanimated and react-native-gesture-handler. So I can totally control the outesidest scroll action.
I'm using the Overlay component from react-native-elements which is supposed to be built over the underlying react-native Modal component. I have tried to place a simple ScrollView within the Overlay but the content just renders till the end of the Overlay and truncates the rest of it.
I suspect it might be a style issue but I have looked through all the possible props without luck.
<Overlay style={{height: height - 20, width: width}}>
<ScrollView>
... Content longer than screen ...
</ScrollView>
</Overlay>
I also have faced the same issue. using the below code.
<Overlay
isVisible={this.props.visible}
onBackdropPress={this.props.onClose}
overlayStyle={styles.overlayStyle}>
<ScrollView contentContainerStyle={{flex:1}}>
... Content longer than screen ...
</ScrollView>
</Overlay>
I solved this by removing the flex:1 from the contentContainerStyle props.
Working code
<Overlay
isVisible={this.props.visible}
onBackdropPress={this.props.onClose}
overlayStyle={styles.overlayStyle}>
<ScrollView>
... Content longer than screen ...
</ScrollView>
</Overlay>
I know there are a lot of issues opened with this question but I couldn't find any solution that work for both IOS and Android. The idea is to have ScrollView That can be scrolled to both directions (vertical and horizontal). At the moment my code looks like that:
<ScrollView contentContainerStyle={{height: 1000}}>
<ScrollView horizontal contentContainerStyle={{width: 1000}}>
// content
</ScrollView>
</ScrollView>
It works fine for IOS but no luck with Android.
For ScrollView inside another scrollView you have to use nestedscroll prop in scrollview to deal with the scrolling.
<ScrollView contentContainerStyle={{height: 1000}}>
<ScrollView horizontal contentContainerStyle={{width: 1000}} nestedScrollEnabled={true}>
// content
</ScrollView>
</ScrollView>
Use the above code and it will work as expected....
I hope this helps...Thanks :)
We need to implement pull to refresh functionality on scrollview in react native app with custom spinner. We have achieved this in iOS by using react native customControl. On iOS, ScrollView is scrolling and we are able to see the spinner on top, when we pull scroll view.
But the same code for android does not work. Because, In android the ScrollView is not scrolling when i pull the scrollview (May be the content is less than the screen height). The spinner will be visible only when we scroll the view. In this case, how to implement/achieve this functionality in android?
<View style={styles.containerStyle}>
<View style={styles.spinner}>
<Spinner />
</View>
<ScrollView
style={styles.scrollview}
contentContainerStyle={styles.contentContainer}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh}
tintColor='transparent'
colors={[ 'transparent' ]}
style={backgroundColor : 'transparent'}
/>
} >
</ScrollView>
</View>
I would like to play exactly this behavior.
A Tab component within a ScrollView should remain affix under the navbar when scroll, the problem is that applying the absolute position to the tab that relates to ScrollView.
This is the structure:
<ScrollView
style={styles.scrollView}
onScroll={this.onScroll}
scrollEventThrottle={16}>
<Image source={....} />
<Tab>...</Tab>
<View style={[styles.content, props.scrollableViewStyle]}>
// lorem ipsum..
</View>
</ScrollView>
Image:
How can I play this in React Native?