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
}}
/>
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 am not able to fill the status bar area with component. I tried to do it by hiding the status bar using <StatusBar hidden />. But this one leaves a white space there. For example I want to fill the green image the status bar.
TLDR: working project link
On the gist link (you've provided on the comment), I can see that you are using the following structure
<SafeAreaView>
<StatusBar ... />
<ImageBackground ...></ImageBackground>
</SafeAreaView>
If you want to hide the status bar and cover the whole screen with the image you need to change SafeAreaView to just View and also remove StatusBar component.
<View>
<ImageBackground ...></ImageBackground>
</View>
Cause SafeAreaView will dynamically put some padding at the top. So although you've put style={{ height: '100%', width: '100%' }} it will respect the padding of SafeAreaView cause it is the parent component here.
Also at this point, you do not need StatusBar, cause the StatusBas already has an image as background.
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 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.