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.
Related
In my app I used ScrollView and on my Android Phone(Redmi Note 7) it works as it should, I can scroll only when keybord is open and elemnts are under the keybord. But on the IOS device (IPhone 5S) screen can be scrolled even when keyboard isnt opened.I even dont know what is the reason.
Isn't your elements in ScrollView are longer than the screen height size?
You can check the element is over the screen by clicking Cmd+D Show Inspector and clicking bottom of the view.
Set your scrollview style to flex:1 then it should work.
We have essay way just use KeyboardAvoidingView on render ex:
I hope works well.docs
<ScrollView style={{flex:1}}>
<KeyboardAvoidingView behavior="padding">
{content}
</KeyboardAvoidingView>
</ScrollView>
I have an textInput and a button. While the textInput is focused, the keyboard comes up but if you tap the button with keyboard visible, first the keyboard disappears and then only you can tap button. Why is it? How can I make it work so that the button can be tapped with keyboard visible? The apps developed in android studio (android native) can get the click listener with keyboard visible. But in react native, it is not working. If you tap anywhere but button, then the keyboard should disappear, isn't it? But if you tap on the button with keyboard visible, the btn should receive the listener. I'm testing it in android devices.
P.S you can try it here: https://snack.expo.io/#codebyte99/addcomponents
<TextInput
placeholder={'Type smth'}
style={[{ borderBottomColor: 'gray', borderBottomWidth: 1 }]}
/>
<TouchableOpacity onPress={() => { this._onPressOut(); }}>
<Text>click here</Text>
</TouchableOpacity>
The scrollview contains a prop keyboardShouldPersistTaps which handles the keyboard tap behaviour inside a scrollview.
For your case give it as <ScrollView keyboardShouldPersistTaps='handled'>
Here is a expo link scrollview with keyboard
As an addition to #thakur-karthik answer:
It's very important to note that in the scrollview scenario, some oddity occurs when you have a scrollview in a react-native modal.
Just adding keyboardShouldPersistTaps={'always'} on the scrollview in the modal alone will not work.
If you have scrollviews in any ancestors, they must also have keyboardShouldPersistTaps={'always'} declared on their components
FYI: If you're using react-native-keyboard-aware-scroll-view, you need to do it like this:
<KeyboardAwareScrollView keyboardShouldPersistTaps="always">
ScrollView or Flatlist
The scrollview and Flatlist contain a prop keyboardShouldPersistTaps which handles the keyboard tap behavior inside a Scrollview when the keyboard is visible.
keyboardShouldPersistTaps= 'handled'
In case keyboardShouldPersistTaps is not working you can add the style to the FlatList or scroll, work for me, Becouse keyboardShouldPersistTaps was not working properly
{zIndex:1000}
I'm using a Horizontal ScrollVIew with paging in react native, I'm trying to recreate the coverflow view like Spotify. visually is perfect however I want to call a function when paging left or right, like playNext or playPrev. is there a way to listen to the paging event and direction?
<ScrollView pagingEnabled={true} horizontal={true}>
<CoverFlowItem page_width={D.width} width={width} height={height}
source={{uri: current.poster}}/>
.....
</ScrollView>
https://facebook.github.io/react-native/docs/scrollview#pagingenabled
With this props, you'll get the pagination you want. To get which way its going, you component will need to save the offset each time you scroll. use the props: onScroll, onScrollBeginDrag and/or onScrollEndDrag to access the current offset of the scroll. With it, and the one previously saved, you can determine which way the scroll is going
I am attempting to implement a cropping tool with pinch zoom in React Native. The cropping works fine, but I am having trouble zooming the image while my overlay is on top of it.
Code:
<ScrollView
maximumZoomScale={2}
minimumZoomScale={1}
scrollEnabled={false}
bouncesZoom={false}>
<Animated.View
style={this.getStyles()}
{...this._panResponder.panHandlers}>
<View>
<Image style={[{height: getCropContainerHeight(),
width: this.getCropContainerWidth()}]}
source={{uri: this.props.image}} />
</View>
</Animated.View>
<Overlay movement={{...this._panResponder.panHandlers}} />
</ScrollView>
If the Overlay is inside of the Scrollview, then both the overlay and the image get zoomed in. If the Overlay is outside of the ScrollView then of course the Image does not zoom.
Here is what my app looks like
Any thoughts on how can I zoom in on ONLY the image, without affecting the overlay?
If you want the ScrollView to handle the touch events, you can place the overlay outside of the ScrollView, position it on top of the ScrollView using position: relative or position: absolute, and give the overlay root view a pointerEvents prop of "none".
This way the overlay won't capture the touches.
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.