I have an image for my app, and it should cover the entire screen. It's a bit wide and tall, so I want to rescale it to fit the screen (never mind aspect ratio at the moment). However, the width and height I apply don't rescale the image, but rather clip it.
Here's my code:
render() {
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const imageWidth = { width: width };
return (
<View style={styles.container}>
<Image
style={styles.openingImage, imageWidth}
source={require('./src/images/opening.jpg')}>
</Image>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#ff0000',
},
openingImage: {
resizeMode: 'cover',
}
});
Why is it cliping instead of resizing?
Set both width and height of the Image to undefined
imageStyle: {
width: undefined,
height: undefined,
}
Related
I want create a rotate icon inside a image:
<ImageBackground style={stylesNative2.image} source={{ uri }} >
<TouchableOpacity onPress={ () => { alert("handler here") }} tyle={styles.rotateImageIcon}>
<Icon name='rotate-ccw' type='Feather' style={styles.rotateImageIcon} />
</TouchableOpacity>
</ImageBackground>
const stylesNative2 = StyleSheet.create({
image: {
zIndex: 0,
position: 'absolute',
height: h,
width: WIDTH,
resizeMode: 'cover',
transform: [{ rotate: this.state.imageRotation + 'deg' }]
}
});
const styles = StylesManager.getStyles({
rotateImageButton: {
backgroundColor: 'transparent',
elevation: 0,
zIndex: 1
},
rotateImageIcon: {
marginTop: '1rem',
marginLeft: '1rem',
fontSize: '1.7rem',
color: 'white',
}
});
The icon appear but the TouchableOpacity is not working.
Any idea why it's not working?
I think it's because ImageBackgroud have a pointerEvent like this one:
pointer-events: none;
http://facebook.github.io/react-native/docs/view#pointerevents
Can you try to wrap your <TouchableOpacity> on a <View>?
Mayby it's the zIndex...
A touchable opacity is transparent so you don't have to add zIndex on it.
When we add TouchableOpacity inside the ImageBackground .
We need to add the zindex greater than ImageBackground.
like zindex:100
Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position: fixed
I tried to run my code on various screen sized emulators and the layout of my design varies from device to device. I need help to make the layout more responsive and fixed on different sized screens such as tablets, 3"mobile and 6"mobile.
-----------or connect with us on----------- I want to style this line in better way and that remains the same look on every device
I tried using the dimensions of the screen by defining the width and height using variables, and by describing the values in percentages, but nothing worked.
import React, { Component } from 'react';
import { View,TouchableOpacity, Text, StyleSheet, Image, Dimensions } from 'react-native';
import BacgroundImage from './BackgroundImage';
import Buttons from './Reusable/Button';
const { width: WIDTH } = Dimensions.get('window');
class LaunchScreen extends Component {
render() {
return (
<BacgroundImage>
<View style={styles.logoContainer}>
<Image
source={require('./images/logo.png')}
style={styles.PlaceLogo}
/>
</View>
<View style={styles.Buttons}>
<Buttons style={styles.signupButton}
onPress={() => navigate('Login')}>
<Text style={styles.buttonText}> SIGN UP</Text>
</Buttons>
<Buttons style={styles.loginButton}>
<Text style={styles.buttonText}> SIGN IN</Text>
</Buttons>
</View >
<View style={styles.sepratorView}>
<Text style={styles.sepratorText}>--------- or connect with us on ---------</Text>
</View >
<View style={styles.socialButtonStyle}>
<TouchableOpacity
style={styles.fbstyle}
activeOpacity={0.5}
>
<Image
source={require('./images/facebookicon.png')}
style={styles.iconstyle}
/>
<View
style={styles.sepratorLine}
/>
<Text
style={styles.socialButtonText}
>FACEBOOK</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.googlestyle}
onPress={this.signIn}
activeOpacity={0.5}
>
<Image
source={require('./images/google.png')}
style={styles.iconstyle}
/>
<View
style={styles.sepratorLine}
/>
<Text style={styles.socialButtonText} >GOOGLE</Text>
</TouchableOpacity>
</View>
</BacgroundImage>
);
};
}
const styles = StyleSheet.create({
logoContainer: {
flex: 1
},
PlaceLogo: {
width: WIDTH - 140,
margin: 75,
resizeMode: 'center',
justifyContent: 'center',
alignItems: 'center',
},
yosoButtons: {
width: WIDTH - 80,
justifyContent:'center',
marginTop:350
},
signupButton: {
height:40,
paddingTop:7,
marginBottom: 15,
},
loginButton: {
height:40,
paddingTop:7,
marginBottom: 15
},
buttonText: {
},
sepratorText: {
textAlign:'center',
fontSize:20,
color: '#b6b7ba',
},
sepratorView: {
flexDirection: 'row',
justifyContent:'center',
alignItems:'center'
},
socialButtonStyle:{
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
margin:5
},
fbstyle:{
flex:1,
flexDirection:'row',
borderColor:'white',
alignItems:'center',
backgroundColor:'#485a96',
borderWidth:1,
borderRadius:35,
height: 40,
marginLeft:15,
marginRight:15
},
googlestyle:{
flex:1,
flexDirection:'row',
alignItems:'center',
backgroundColor:'#dc4e41',
borderWidth:1,
borderRadius:35,
borderColor:'white',
height: 40,
marginRight:15
},
iconstyle:{
resizeMode:'stretch',
height:25,
width:25
},
sepratorLine:{
backgroundColor:'white',
width:2,
height: 40
},
socialButtonText:{
color: '#fff',
flex:1,
textAlign: 'center',
fontSize: 15,
fontWeight: "bold"
}
});
export default LaunchScreen;
I want the layout to remain the same. Both the logo and buttons remain at the same position on every device display.
And I want a better dynamic solution for separator I have used in code
--------------or connect with us on-----------
I got a workaround solution for this problem. I am assigning values using the height and width of the screen to the styling.
import { StyleSheet, Dimensions } from 'react-native';
const { width: WIDTH, height: HEIGHT } = Dimensions.get('window');
SomeText: {
fontSize: HEIGHT / 38,
marginTop: WIDTH / 20,
}
I'm trying to overlap elements as shown in the wireframe, as well as position them.
I've tried
- position: 'relative' and the element disappears
- position: 'absolute' but alignItems: 'center' does nothing
Can anyone help identify what's missing?
Wireframe of Wishlist (ignore the different header; it was from an old version)
This is what I get instead, even after using flex
I've attached code from all the separate .js files, and left out all import and export statements.
Thank you!
----------- in WishlistDetail.js------------
// Each Item on The Wishlist
const WishlistDetail = () => {
return (
<View>
<WishlistCard>
<WishlistThumbnail />
<WishlistThumbnailFilter />
<WishlistPrice />
<WishlistItemDetail />
</WishlistCard>
</View>
);
};
---------- in WishlistCard.js------------------
// Creating WishlistCard
const WishlistCard = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
// WishlistCard Style
const styles = StyleSheet.create({
containerStyle: {
borderWidth: 0.75,
backgroundColor: 'white',
borderColor: 'rgb(217, 217, 217)',
height: 125 // ******* not too sure
}
});
---------- in WishlistThumbnail.js------------------
const WishlistThumbnail = () => {
const { wishlistThumbnailStyle } = styles;
return (
<View>
<Image
style={wishlistThumbnailStyle}
source={{ uri: 'http://www.startwire.com/job-applications/logos/amazon.png' }}
/>
</View>
);
};
// All Styling
const styles = StyleSheet.create({
wishlistThumbnailStyle: {
height: 95,
width: 95,
padding: 20,
position: 'absolute',
justifyContent: 'center'
}
});
---------- in WishlistThumbnailFilter.js------------------
// Creating Wishlist Thumbnail Filter
const WishlistThumbnailFilter = () => {
return (
<View style={styles.wishlistThumbnailFilterStyle} />
);
};
// Image Filter Style - 146 125 192.2
const styles = StyleSheet.create({
wishlistThumbnailFilterStyle: {
width: 160,
borderTopColor: 'rgba(13, 13, 13, 0.05)',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopWidth: 250,
borderLeftWidth: 0,
borderRightWidth: 90
}
});
---------- in WishlistPrice.js------------------
const WishlistPrice = () => {
const { textStyle, viewStyle } = styles;
return (
//INSERT PRICE HERE
<View style={viewStyle}>
<Text style={textStyle}>30€</Text>
</View>
);
};
// Wishlist Price Style
const styles = StyleSheet.create({
viewStyle: {
backgroundColor: 'transparent',
padding: '3',
// alignItems: 'flex-end',
justifyContent: 'flex-end',
position: 'absolute'
// position: 'relative'
},
textStyle: {
fontSize: 11.5,
fontFamily: 'Bariol_Regular',
color: 'rgb(127, 127, 127)'
}
});
---------- in WishlistItemDetail.js------------------
// This contains both Wishlist Title and Wishlist Text
const WishlistItemDetail = () => {
const { wishlistItemDetailStyle, wishlistItemTitleStyle, wishlistItemTextStyle } = styles;
return (
<View style={wishlistItemDetailStyle}>
<Text style={wishlistItemTitleStyle}>Wishlist Item Title</Text>
<Text style={wishlistItemTextStyle}>Wishlist Item Text</Text>
</View>
);
};
// Header Style
const styles = StyleSheet.create({
wishlistItemDetailStyle: {
backgroundColor: 'transparent',
position: 'absolute',
padding: 5
},
wishlistItemTitleStyle: {
fontSize: 15,
fontFamily: 'Bariol_Regular',
color: 'rgb(51, 51, 51)'
},
wishlistItemTextStyle: {
fontSize: 12,
fontFamily: 'Bariol_Regular',
color: 'rgb(70, 70, 70)'
}
});
without wanting to go into too much detail, this seems to look like an issue of column vs row in you flexDirection.
In order to get the style of the wireframe you provided you need to use a combination of both row and column. Check out this documentation: https://facebook.github.io/react-native/docs/flexbox.html
So one row consists of two main views styled in a flexrow and the one I marked blue is styled in a column (which is the default).
Hope this helps
I have some components wrapped in a ScrollView and for some condition the bottom most component shouldn't render. When that happens, I use LayoutAnimation to hide it. The problem is that when the component disappear, the ScrollView jumps to the new content height directly, without any animation at all.
I want to use LayoutAnimation since I have screens where the contents height is unknown.
Example image
If you look at the image, when the button is pressed, the screen will instantly jump to the blue box without any animation.
state = { showGreenBox: false };
renderBottomBox() {
if (this.state.showGreenBox) {
return (
<View style={{ height: 300, width: 100, backgroundColor: 'green' }} />
);
}
}
render() {
return (
<ScrollView>
<View style={{ height: 300, width: 100, backgroundColor: 'red' }} />
<View style={{ height: 300, width: 100, backgroundColor: 'blue' }} />
{this.renderBottomBox()}
<TouchableOpacity
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({ showGreenBox: !this.state.showGreenBox });
}}
>
<Text>Press to collapse green box</Text>
</TouchableOpacity>
</ScrollView>
);
}
For some reason when I put Text inside Image it stops wrapping. I've tried flexWrap: 'wrap' but it doesn't help.
Here is how it looks like
If I put the Text outside of Image than it works OK.
Here is the code:
class wraptest extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={require('./image.jpg')}
style={styles.image}>
<View style={styles.textContainer}>
<Text style={styles.text}>Text goes here.</Text>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
textContainer: {
backgroundColor: 'transparent',
alignItems: 'center',
},
text: {
fontSize: 40,
fontWeight: 'bold'
}
});
I've also pushed full project here https://github.com/OleksandrBezhan/react-native-text-wrap-test
The reason the text wraps when it is outside of the image is because it is a direct child of the "container" style which defines the flex box. Try putting flex: 1 on either the textContainer or text styles.