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.
Related
I am using an ImageBackground component with a parent View height of 200. I have a portrait image as the source of the ImageBackground however it seems to be vertically centering the image. I want the top of the image positioned at the top of the parent/ImageBackground. Heres my code:
<View style={{borderTopLeftRadius:12, borderTopRightRadius:12}}>
<ImageBackground
source={{uri:imageUrl}}
style={{height:200}}
imageStyle={{height:200, borderTopLeftRadius:12, borderTopRightRadius:12, resizeMode:'cover'}}
/>
</View>
I do want the image to take up the entire width, hence the cover mode.
I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when pressed.
To make the user experience nice, I'd like to be able to scroll the FlatList through the touchable text as well. I.e. if the user happen to start their scrolling motion on top of the text, the FlatList would scroll but if it is a simple press event I'd like to open the view with details about the image/video.
No mater what I try I end up with either the text being able to react to the press OR the FlatList being able to scroll. I have tried different configurations with a custom PanResponder and pointerEvents but seem to always end up with a state were one thing does not work. Do you guys have any smart ideas? I am probably just stuck in the wrong train of thought.
This is a simplified view of my component structure:
<View>
<View style={{ position: 'absolute', bottom: 100, zIndex: 10 }}>
<TouchableOpacity onPress={() => console.log('press')}>
<Text>Some Descriptive Text</Text>
</TouchableOpacity>
</View>
<FlatList pagingEnabled horizontal {...otherFlatListProps} />
</View>
I'm trying to display an image over a TouchableOpacity but with the image over the TouchableOpacity takes priority over the button. Is there anyway around this?
I am not sure what you are trying to accomplish. If you need an Image to be touchable nest it in the TouchableOpacity. If you are trying to have an Image as the Touchable Opacity background try
<TouchableOpacity>
<ImageBackground source={image} style={styles.image}/>
</TouchableOpacity>
I haven't used ImageBackground so you may need to check out the docs
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
}}
/>
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.