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.
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?
I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll
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
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 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 :)