I am showing pictures gallery in full screen mode. I am using scrollview in horizontal for scrolling the pictures. Right now I can scroll the pictures by swiping left or right and I using the pagingEnabled enabled props.
But I want to add more gesture, where when user tap on left or right ( a distance from the edge) , it will automatically mapping the swapping gesture. How can I do this?
I assume your scroll view looks like this with pagingEnabled and horizontal props.
<ScrollView
horizontal={true}
pagingEnabled={true}
onMomentumScrollEnd={event => {
this.setState({xOffset: event.nativeEvent.contentOffset.x })
}}>
// Content
</ScrollView>
The position can be calculated with :
this.state.xOffset/ DeviceSize.width
onMomentumScrollEnd is called each time you scroll an item in the ScrollView
(the content must be full width in this case)
Get a ref to the <ScrollView> then to scrollToEnd() or use scrollTo methods - https://facebook.github.io/react-native/docs/scrollview.html#scrollto
To calculate page number, you would use onLayout to calculate sizes of your pages. If it's the width of the device then that's easy, just use Dimensions.get('window').width then feed that to the x in scrollTo.
Related
I have a horizontal scroll view and inside of it I've some views:
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}>
{myData.map((dataObj, index) =>
<MyTestCell />
)}
</ScrollView>
The MyTestCell is a custom component and everything in it inside a <View></View>
Based on the content some MyTestCell are larger in height than others. Is there a way to NOT let MyTestCell View take the height of the longest component?
For example here is a screenshot of the bottom part of a cell which is just there because another cell in the scroll view is of that height:
So, is there a fix to this? Basically, I'm asking if there is a way to absolute the height of a view inside scroll view rather than inheriting the height of its parent it should just keep the height which it requires.
It might be late but you can do it but setting the flexGrow to 0 on the child component.
I'm new to React-native and I've a very simple(at least i think so) problem.
I've an ImageBackground with resizeMode='contain', now I would like to have the background positioned to the top of the container...
<ImageBackground style={styles.imageBackground} source={backgroundImage} resizeMode='contain'>
... some content
</ImageBackground>
The image is rendered in the right way, but the problem is that it is vertically centered, instead I would like to have it top aligned...
This is an example of the result of my ImageBackground
This is an example of the result with the bottom added to ImageStyle
In the ImageBackground component, the image isn't vertically centered, rather it is positioned absolutely to fill the container. You can check the source here. The reason it's appearing vertically centered is probably because of the resizeMode contain. To top align it, you can make user of the prop imageStyle that you can set to something like this:
<ImageBackground
imageStyle={{
bottom: 40 // Whatever offset you want from the bottom
}}
/>
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.