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
This results in a screen that is half blue and half yellow, should it not be 2/3 yellow?
<View style={{flex:1,flexDirection:'column'}}>
<View style={{flex:1,backgroundColor: 'blue'}}></View>
<ScrollView style={{flex:2}} contentContainerStyle={{flex:1,backgroundColor: 'yellow'}}></ScrollView>
</View>
In general you are right, but react native's ScrollView behaves a little bit differently. As you can read in the docs:
Keep in mind that ScrollViews must have a bounded height in order to
work, since they contain unbounded-height children into a bounded
container (via a scroll interaction). In order to bound the height of
a ScrollView, either set the height of the view directly (discouraged)
or make sure all parent views have bounded height. Forgetting to
transfer {flex: 1} down the view stack can lead to errors here, which
the element inspector makes easy to debug.
In order to achieve your wanted behavior, you can do the following:
<View style={{flex:1,flexDirection:'column'}}>
<View style={{flex:1,backgroundColor: 'blue'}}></View>
<View style={{flex:2}}> // surround scrollview with flex 2
<ScrollView contentContainerStyle={{flex:1,backgroundColor: 'yellow'}}></ScrollView>
</View>
</View>
I'm using scrollView like this
<ScrollView style={{flex:1}}>
<Text />
<Some components />
<Webview />
</ScrollView>
And Webview has height and can scroll too. also webview should zoom in/out.
but when i try zoom in/out not really zooming properly.
after then, i realised scrollview interrupt pinching zoom.
So I added props in
<ScrollView scrollEnabled={this.state.isScrollEnabled} / >
then decide scroll if pinch event detect or not.
I searched about this issue, and was recommended to use PanResponder but i still dont know how to detect pinch Event...
Help me please.
(+) should be working Android and IOS both..
Use this library: https://github.com/kiddkai/react-native-gestures (it is using PanResponder). Wrap your ListView with Gesture View according to the docs, assign handler on pinch gesture, and in the handler decide if scrolling should be enabled or not for the list by changing the value of this.state.isScrollEnabled. That should work.
I'm new to React Native, so am probably asking something very obvious, but please help.
I have a view wrapped in a touchable, so that the whole area responds to tapping. Then have a ScrollView nested inside the view. The overall structure is something like this:
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View>
<ScrollView>
<Text>Hello, here is a very long text that needs scrolling.</Text>
<ScrollView>
</View>
</TouchableWithoutFeedback>
When this compiles and runs, the tapping is detected, but the scroll view doesn't scroll at all. I made the above code short and simple, but each component has the proper styling and I can see everything rendering fine and the long text is cutoff at the bottom of the ScrollView. Please help.
Thank you!
This is what worked for me:
<TouchableWithoutFeedback onPress={...}>
<View>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
// Scrollable content
</View>
</ScrollView>
</View>
</TouchableWithoutFeedback>
The onStartShouldSetResponder prop stops the touch event propagation towards the TouchableWithoutFeedback element.
I'm using this structure it's working for me:
<TouchableWithoutFeedback onPress={() => {}}>
{other content}
<View onStartShouldSetResponder={() => true}>
<ScrollView>
{scrollable content}
</ScrollView>
</View>
</TouchableWithoutFeedback>
You can have a scrollView or FlatList inside a TouchableWithoutFeedback. Tho you shouldn't but some times you have no other choice to go. Taking a good look at this questions and answer validates that.
close react native modal by clicking on overlay,
how to dismiss modal by tapping screen in react native.
For the Question, The only way you can make it work (atleast that i know of), or the simplest way is to add a TouchableOpacity around Text in your code like this,
<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
<View>
<ScrollView>
<TouchableOpacity>
<Text>Hello, here is a very long text that needs scrolling.</Text>
</TouchableOpacity>
<ScrollView>
</View>
</TouchableWithoutFeedback>
Note: TouchableOpacity is a wrapper for making Views respond properly to touches so automatically you can style it the way you would have styled your View Component then set some of its special props to whatever you want e.g activeOpacity etc. Moreso you can use TouchableHighlight it works, but it receives one child element i.e you enclose all your component inside a parent one.
I'm using this structure it's working for me:
<TouchableOpacity>
{other content}
<ScrollView>
<TouchableOpacity activeOpacity={1}>
{scrollable content}
</TouchableOpacity>
</ScrollView>
I found that for my situation the other examples did not work as they disabled the ability to click or disabled the ability to scroll. I instead used:
<FlatList
data={[{key: text1 }, { key: text2 } ...]}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={this.onPressContent}>
<Text style={styles.text}>{item.key}</Text>
</TouchableWithoutFeedback>
)}
/>
I happend to need to multiple chunks but you could use single element in the data array for one piece of text.
This let the press event to fire as well as let the text scroll.
Trying to use a ScrollView component inside a TouchableWithoutFeedback component can cause some unexpected behavior because the TouchableWithoutFeedback component is designed to capture user gestures and trigger an action, but the ScrollView component is designed to allow users to scroll through content.Here is what the official docs say
Do not use unless you have a very good reason. All elements that
respond to press should have a visual feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.
Thats write , you cannot have a scroll view inside the TouchableWithoutFeedback, it the property of react native that it will disable it, you can instead have your scroll view outside the TouchableWithoutFeedback tab and add the other contents that you want upon the click inside a view tag.
You can also use the Touchable Highlights instead, if the TouchableWithoutFeedback does not works.
With having React-Native, I would like to implement Stretchy header(pull down in ScrollView and zoom top image), mentioned in http://blog.matthewcheok.com/design-teardown-stretchy-headers/
Do we have plugin for this? If not, could you tell me how to implement this with React Native?
Implement ScrollView's onScroll function, and detect its content offset.
And check https://github.com/lelandrichardson/react-native-parallax-view for more details.
<View style={{flex:1}}>
<Image style={{width:320,position:'absolute'}} />
<ScrollView style={{backgroundColor:'transparent'}}>
<HeaderView />
<Components />
</ScrollView>
</View>
Make the Image's position with 'absolute'.
Make the ScrollView's backgroundColor with 'transparent'.
And add a header view with a height equals to the Image's height to ScrollView.
Then comes your components.
And Animate is optional.