Background
I have an image placed on a screen meant to show when the screen loads other content.
I want to center the image so it is always center on all devices.
Problem
Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.
Question
What is the solution to make sure the image is always centered and the right size for all devices?
Example,
My current code,
In Photoshop
Image is 300 Resolution
Height is 776 px
Width is 600 px
I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.
import React from 'react';
import {
StyleSheet,
View,
Image,
} from 'react-native';
const logo = require('../images/logo.jpg');
const LoadingScreen = () => (
<View>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
logo: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 400,
},
});
export default LoadingScreen;
You need to set the style of <View> for justifyContent and alignItems for centering the <Image>.
Should be like this :
const LoadingScreen = () => (
<View style={styles.container}>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: 300,
height: 400,
},
});
Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.
The View container should have styling as
flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'
The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.
For the image size, I think using percentage will do the trick instead of defining definite width/height.
Set in view:
justifycontent:center
And in child:
alignself:center
And perform in task.
Set in parent view:
justifycontent:center
And in child set:
alignself:center
Related
I want to have an Expo BarCodeScanner inside of a view on a screen.
I've been using vw and vh for width and height because I want it to change based on the amount of screen space I have. I've tried putting a border around it but it never shows up. I've tried putting it on the view around the barcodescanner as well as the scanner itself.
Here is the code snippet of my barcodescanner as well as the corresponding styles and screenshot.
scannerContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: vw(100),
maxHeight: vh(50),
backgroundColor: 'red',
borderColor: colors.primary,
borderWidth: 5
}
<View style={styles.scannerContainer}>
<BarCodeScanner
onBarCodeScanned={(hasScan) ? undefined : handleScan}
barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
style={[StyleSheet.absoluteFillObject]}
/>
</View>
Instead of using the barcode you can use expo camera because BarCodeScanner have active issue.
Here is the code
import { Camera } from 'expo-camera';
<Camera
onBarCodeScanned={this.onBarCodeScanned}
ratio='16:9'
style={StyleSheet.absoluteFillObject}
/>
Link: https://github.com/expo/expo/issues/5212
I'm trying to make a basic tab application with React Navigation and so I have three pages with plain text. They centre vertically but not horizontally on the tabs. This is using alignContent and justifyContent in conjunction with each other (which has worked for me in the past).
At first I suspected the flex was only flexing vertically and so I applied a contrasting colour. However it seems to span the tab. I have also tried textAlign, but neither cases seem to work.
This is an example of one of the screens:
export class ExampleScreen extends Component {
render() {
return(
<View style={styles.container}>
<Text>Example!</Text>
</View>
)
}
}
And here is the StyleSheet:
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
alignContent: 'center',
justifyContent: 'center'
}
})
There are no error messages. However I would expect the text to centre horizontally but all I get is this:
Your text is not horizontally center because Text is taking full width of the screen,
you need to center content inside Text
<Text style={{ textAlign: 'center' }}>Example!</Text>
I'm using react-native-elements Icon component and I'm trying to make it smaller, but only the height, not the size. I want to keep the same size, but with a smaller height.
The Problem is that when I change the height of the icon, the icon itself doesn't get up, only cuts the bottom part of the icon.
I want to center the icon.
Here is the icon with no height, it has some weird paddings that even with padding zero, it doesn't go away.
Here is the icon with a smaller height, but the bottom part of the icon is cut off.
Here is the code I have done so far. Trying to make the Icon smaller.
* only important parts
import { StyleSheet } from 'react-native'
import { Icon } from 'react-native-elements'
<Icon
name='angle-up'
type='font-awesome'
color='blue'
containerStyle={iconStyles.container}
iconStyle={iconStyles.icon}
onPress={() => this.handlePlusValue(time, i)}
size={75}
/>
const iconStyles = StyleSheet.create({
container: {
alignSelf: 'center',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
icon: {
backgroundColor: 'green',
height: 50,
textAlign: 'center',
width: 100,
},
});
How can I make the height of the icon smaller, without changing the size of it, but also make the icon in the center?
I am having a lot of trouble working with a scroll view and flex dimensions. Basically the initial screen of the app should show a top side "banner" while the bottom is the "content".
The content is going to contain many "cards" that each contain information, and users will be able to scroll down to see the next card, and the next, and etc.
However, the flex property does not seem to be working at all, and I am not even able to create the proper sizes for the "banner" section and the "content" section.
This is my code:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TextInput
{ from 'react-native';
import RestaurantCard from './common/RestaurantCard';
export default class MemberArea extends Component<Props> {
constructor(props){
super(props);
this.state = {
searchText: ''
}
}
render() {
return (
<ScrollView contentContainerStyle = {styles.contentContainer}>
<View style={styles.banner}>
<TextInput style={styles.search}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Search for Restaurants"
textAlign= 'center'
textAlignVertical='center'
returnKeyType="search"
/>
</View>
<Text style={styles.dropdown}>
{"What's nearby V"}
</Text>
<View style={styles.cards}>
<RestaurantCard />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
contentContainer:{
flexGrow: 1,
flexDirection: 'column'
},
cards:{
flex:3,
backgroundColor:'#000000'
},
banner: {
flex:15,
backgroundColor: '#F36B45',
paddingBottom: 80
},
search:{
marginTop: 20,
paddingBottom: 5,
paddingTop: 5,
height: 30,
marginHorizontal: 40,
borderRadius: 20,
backgroundColor: 'rgb(255,255,255)'
},
dropdown:{
color: 'black',
fontWeight:'900',
fontSize:24,
margin:30
}
});
UPDATE: As seen in the comments below, I surrounded my scrollview with another view. I gave the Parent view Flex:1. The problem I run into now is as follows:
If I give the scrollview contentcontainerstyle flexGrow: 1, then the scrolling works as normal, but I cannot give the children sections of the scrollview space dimensions with flex values. However, if I give the scrollview flex:1 (rather than flexGrow), then I can give space dimensions to the children sections, but the scrolling function is disabled. Any help would be greatly appreciated!
Issue you have is you set content inside memberArea to grow according to the content but outside the memberArea, it's fixed. Add flex: 1 style to View in App.
<View style={{flex: 1}}> // App
Then you don't need to set contentContainerStyle for the ScrollView
Why do you set flex: 15? Check the doc first.
Here's the codesandbox
Read the React-Native Docs on Flexbox properly.
[https://facebook.github.io/react-native/docs/flexbox.html][1]
You cannot set Higher values to child Views of the Parent Views.
If you want to divide the Parent's Flex: 1, into 2 children - you can do Flex:0.5 and Flex:0.5 to the two children.
If you want every child to have their own space, assign Flex: 1 to each of them.
Check the Docs and other articles on it for more details.
I have a big image that needs to be cropped on certain devices, but it's very important that the top left of my image stays in tact because it has some important content.
<View style={{flex:1}}>
<Image source={MY_IMAGE}
resizeMode="cover"
style={{
flex: 1.8,
width: null,
height: null
}}
/>
<View style={{ flex: 1 }}>
//other content
</View>
</View>
^This is very close to what I want, but by default it looks like resizeMode:"Cover" just zooms in on the center of the image, cutting off my important content.
Is there any way to complete the image resizing based on something like x:0, y: screenHeight so that it keeps the top left of my image and resizes from the bottom right?
Import necessary packages
import { StyleSheet, Image, Dimensions } from 'react-native';
Your img element
<Image style={styles.images} resizeMode="stretch" source={{ uri: 'src here' }} />
Add this styles at the bottom
const styles = StyleSheet.create({
images: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').width / 2
}
});
Try this the image width will be dynamically set even when you rotate your device.