I have Question is i want to disable scroll of one item from inside two scroll view like as
<ScrollView horizontal={true}> ////Horizontal ScrollView
<ScrollView> ////Vertical ScrollView
<View /> //// View 1
<View /> //// View 2
</ScrollView>
</ScrollView>
i just want to apply only Vertical scrollView on view 1 not Horizontal
Any one help me how i can achieve this.
please use this for disable scrolling
scrollEnabled={false}
i have found an answer, we can handle it with ref , check for demo link
https://snack.expo.dev/#mirza009/table
Related
I am trying to add a fixed gradient to separate items in scroll view, like this:
<ScrollView>
<GradientBackground>
<View>
{...content}
</View>
</GradientBackground>
<GradientBackground>
<View>
{...content}
</View>
</GradientBackground>
</ScrollView>
it should work like here. https://codepen.io/enova22/pen/vYrGGYv
However seems like background-attachment:fixed is not working in ScrollView.
What should I do?
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.
enter image description hereThe structure of my code looks like the following:
<View style={{backgroundColor:'#FFF',flex:1,}}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingBottom:120}} stickyHeaderIndices={[6]}
>
...some content...
<ScrollView horizontal showsHorizontalScrollIndicator={false}
bounces={false}
scrollEventThrottle={16}
pagingEnabled={...}
decelerationRate={...}
snapToInterval={...}
disableIntervalMomentum={true}
snapToAlignment={"center"}
snapToOffsets={screens}
contentContainerStyle={{flexGrow:1}}
>
{horizontalContent}
</ScrollView>
</ScrollView>
but the content inside the horizontal scroll has different heights and all items become the same height as the largest, which creates a huge scroll space. How can fix this? Help pls
If you can see in my sample
Pink, red and blue bar have a specific height, they don’t grow to the containers max.
The turkey bar has a flex:1 which cause the container grow to the max, to prevent this behavior you could wrap the elements container with an view and pass the flex:0 style as i did for the black bar.
I am using flatlist to render some items collected from firestore and I have a problem with ListHeaderComponent prop.
The header is placed to the left and I need to place it on the top of the 1st item (see 2nd image below) and when moved it has to be fixed with the first item of the list as the image.
Currently
Horizontal flatlist with ListHeaderComponent on the left
I need to achieve this when scrolling left:
Horizontal flatlist with ListHeaderComponent on the top of 1st item
You can separate header text from FlatList. Use Text apparently to show the header.
EDIT
If you want to scroll text with a list you can use FlatList inside ScrollView. In this case, you may disable scrolling for FlatList. Please check below for detail.
<ScrollView horizontal>
<Text>Header Text</Text>
<FlatList scrollEnabled={false} />
</ScrollView>
Okay, solved! Here's the code:
<ScrollView horizontal={true}
<View>
<Text>Header Text</Text>
<FlatList horizontal={true}
scrollEnabled={false} />
</FlatList>
</View>
</ScrollView>
Thank you #baymax :)
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 :)