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?
Related
I am trying to scroll in both directions horizontally and vertically at the same time in react native app, where i have scrollview contains group of horizontal flatlists.
However I need to stop scrolling horizontally in order to be able to scroll vertically.
<ScrollView>
<ItemComponent dataState={this.state.Homepage} renderItemProp={renderItem}/>
<ItemComponent dataState={this.state.Politik} renderItemProp={renderItem} />
......
....
</ScrollView>
ItemComponent :
<View >
<FlatList
horizontal={true}
style={{ marginTop:10,marginLeft:15,marginBottom:10 }}
showsHorizontalScrollIndicator={false}
data={dataState}
renderItem={renderItemProp}
/>
</View>
I can't seem to manage this simple layout and all the tricks I find for ScrollView don't match my case.
My content has a header and a footer that should "stick" to it.
But when my content becomes too big, the header should be naturally stuck at the top of the screen, the footer at the bottom of the screen, and the middle part is taken by the content which should be scrollable.
Here is the code for the layout and I join some screens.
Red: screen
Blue: content header
Green: content (Scrollview)
Yellow: content footer
<View style={styles.screen}>
<View style={styles.contentHeader}>
{contentHeader}
</View>
<ScrollView style={styles.content}>
{content}
</ScrollView>
<View style={styles.contentFooter}>
{contentFooter}
</View>
</View>
My problem is that the ScrollView should take only the height required by its content but it does not.
Any suggestions ?
You can use FlatList and use its ListFoooterComponent and ListHeaderComponent for rendering your header and footer you can also render these with ScrollView but its recommended to use FlatList for more performant and support.
Have a look at this to FlatList
https://reactnative.dev/docs/flatlist
Otherwise, you can use stickyHeaderIndices prop for rendering header in ScollView and place your footer outside of the ScrollView with these styles.
This will work
<View style={styles.screen}>
<ScrollView style={styles.content} stickyHeaderIndices={[0]}>
<View style={styles.contentHeader}>
{contentHeader}
</View>
{content}
</ScrollView>
<View style={[styles.contentFooter, {position: 'absolute, bottom: 0}]}>
{contentFooter}
</View>
</View>
I need to fix the input in the bottom of the screen, so that keyboard pushes this input (similar to instagram comments).
Here's an example():
https://snack.expo.io/LPRwoGpik
It's working fine, but if I put the FlatList inside the ScrollView the bottom input is dissapearing.
What's the right way to solve this problem?
try this
<View style={{flex: 1,}} >
<ScrollView>
{content}
</ScrollView>
<TextInput style={{position: "absolute", bottom :0}}/>
</View>
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
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>