React-Native welcome screen mess with the background image - react-native
From some reason I'm trying to set a big background and fit it to the mobile screen, I mean the width will be 100% and the height will be dynamic.
Also I have a bigger logo and I want to fit it into the screen so I gave it width & height but it's looks cut.. What i'm doing wrong? Just want a nice "Pre loader" screen with mean a background and logo in the middle..
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native';
export default class Preload extends Component {
render() {
return (
<View style={styles.mainBox}>
<Image source={require('../app_images/preload/bg.jpg')} style={styles.bgImage} />
<View><Image source={require('../app_images/preload/logo.png')} style={styles.logoImage} /></View>
</View>
);
}
}
const styles = StyleSheet.create({
mainBox:{
flex: 1,
alignItems:'center',
justifyContent:'center',
width: null,
height: null
},bgImage: {
position:'absolute',
top: 0,
left: 0,
alignSelf: 'stretch'
},logoImage: {
width: 100,
height: 150
}
});
AppRegistry.registerComponent('Preload', () => Preload);
Thanks!
For the logo, you should use contain resizeMode.
logoImage: {
width: 100,
height: 150,
resizeMode: 'contain'
}
For background mode, I think you can use cover and keep the view above it transparent
Related
ImageBackground React Native doesn't show itself unless I give it the height even though the image is in the same folder
I am learning React Native and I am having trouble displaying the ImageBackground component.
The ImageBackground has source that points to an image in the same folder, despite this is still not visible unless I give the ImageBackground a height in number, because if I try to give it a height in % it still won't show itself.
Here is the code for the component execpt the style:
import React from 'react';
import { View, ImageBackground, StyleSheet, Text } from 'react-native';
export default function WelcomeScreen(props) {
return (
<View>
<Text>Welcome</Text>
<ImageBackground source={require('./background.jpg')} style={styles.background} />
</View>
);
}
Trying different ways to style it, the ImageBackground has different behaviors regarding showing itself:
This will not show ImageBackground:
const styles = StyleSheet.create({
background: {
flex: 1,
},
});
This won't either:
const styles = StyleSheet.create({
background: {
flex: 1,
height: '100%',
},
});
This will show it:
const styles = StyleSheet.create({
background: {
flex: 1,
height: 300,
},
});
I do not understand why this happens. From my understanding the size should be added only when the image is from the net, and regardless this, the % value should still work.
What am I missing here?
EDIT:
I made a workaround for this using Dimension and feeding the screen height to the ImageBackground:
import { View, ImageBackground, StyleSheet, Dimensions } from 'react-native';
const { height } = Dimensions.get('screen');
const styles = StyleSheet.create({
background: {
flex: 1,
height,
},
});
Though it works, the question why do I need to set a height for an image in the same folder still stand.
if you want to give a value in percentage in such cases you should use some tricks like:
background: {
height: deviceHeight,
},
container: {
height: deviceHeight * 50 / 100,
}
or you can use a popular library in the name of react-native-responsive-screen. This library is going to give you the power to give relative values and convert them to absolute values behind the scene.
The snippet below is going to show how to use it:
import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen';
const styles = StyleSheet.create({
background: {
height: heightPercentageToDP('100%'),
}
})
This should work as you expected ;)
If you want your background image to cover your entire view, try something like this:
<View>
<ImageBackground style={styles.image} resizeMode={'cover'} source={require('../Images/test.jpg')}>
{/*your components*/}
</ImageBackground>
</View>
with this styling:
const styles = StyleSheet.create({
image: {
height: '100%',
width: undefined,
}
})
TouchableWithoutFeedback never fires touch events
I have the following React-Native code which alerts the user that it was pressed, however it does not respond to anything.
I have tried using different Touchable components but none seem to work, the only one is Button but that's not really what I want, I'm building a slider so a button is not really appropriate for this.
Anyway, here's my code:
import React, {Component} from 'react';
import {View, TouchableWithoutFeedback, Alert, Text} from 'react-native';
import styles from './styles.js';
import LinearGradient from 'react-native-linear-gradient';
export default class BrightnessSlider extends Component {
value: 100;
constructor(...args) {
super(...args);
}
render() {
return (
<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={["#222", "#ddd"]} style={styles.brightnessSliderRunnable}>
<View style={styles.brightnessSliderTrack}>
<TouchableWithoutFeedback onPress={() => Alert.alert("Hello World")}>
<View style={styles.brightnessSliderThumb} />
</TouchableWithoutFeedback>
</View>
</LinearGradient>
)
}
}
and ./styles.js
import {StyleSheet} from "react-native";
export default styles = StyleSheet.create({
brightnessSliderRunnable: {
top: 50,
height: 9,
width: width - 20,
left: 10,
backgroundColor: "#555",
opacity: 1,
elevation: 1,
borderWidth: 0
// position: "absolute"
},
brightnessSliderThumb: {
width: 23,
height: 23,
borderColor: "#888",
// opacity: 1,
borderWidth: 2,
backgroundColor: "#ffffff",
position: "absolute",
top: -7,
borderRadius: 5,
elevation: 2
},
brightnessSliderTrack: {
width: "100%",
elevation: 1,
borderWidth: 0
}
});
Thanks for any help
Questioner's original code.
Solution
Added by questioner's solution.
Change position: absolute to position: relative.
Change your style type made by StyleSheet as below.
Your original.
{...styles.colourContainer, opacity: 100 - this.darkness}
Recommend way.
[styles.colourContainer, {opacity: 100 - this.darkness}]
I tested code and it works well when we touch the white square.
Tested on iOS.
Original App.js.
App.js changed by me.
import React, {Component} from 'react';
import {View, Dimensions, Text} from 'react-native';
import BrightnessSlider from '../components/BrightnessSlider';
import styles from '../components/TempStyle.js';
const d = Dimensions.get('window'),
width = d.width,
height = d.height;
export default class BrightnessSliderTest extends Component {
constructor(...args) {
super(...args);
this.darkness = 0;
this.prevColours = ["#ff0000", "#00ff00", "#0000ff"];
}
render() {
// It is not possible just access the style created by StyleSheet.create(). Do not use StyleSheet.create() or change to flatten the StyleSheet object.
const sty = [styles.colourContainer,{ opacity: 100 - this.darkness}];
return (
<View style={styles.container}>
<View style={sty}>
<View style={styles.toolBar}>
<View style={styles.colourPalette}>
{this.prevColours.map((i, a) => <View key={String(a)} style={[styles.colourTile, {backgroundColor: i}]}/>)}
</View>
{/* <Button title={"Save To Palette"} onTap={this.saveToPalette}>Save</Button> */}
</View>
<BrightnessSlider />
</View>
</View>
);
}
}
Why?
I am not sure how you can use your component in other components. But if you do not have container having enough size can show your component, touch area may not work. That is why I use backgroundColor for container sometimes in testing.
Added after testing full code used in question.
It is not possible just access the style through like spread operator created by StyleSheet.create(). Do not use StyleSheet.create() or change to flatten the StyleSheet object.
And Style can be worked differently from platforms(iOS, Android).
React-Native: How to add full screen Lottie animation
I am using linear gradient from lottie, the code is working fine with ios but in android its not fitting to full screen, there is some kind of padding between gradient and the view.
On ios its working fine...i tried many ways,
buy including padding to 0 and even margin to -20, but nothing worked...any solution?
import React, { Component } from 'react';
import {
Text,
StyleSheet,
View,
Platform,
Dimensions
} from 'react-native';
import SignInScreen from './src/screens/auth/SignInScreen';
import Animation from 'lottie-react-native';
import anim from './assets/gradient_animated_background.json';
const height = Dimensions.get('window').height + 20;
const width = Dimensions.get('window').width + 20;
export default class App extends Component {
componentDidMount() {
this.animation.play();
}
render() {
return (
<View style={styles.container}>
<Animation
ref={animation => {
this.animation = animation;
}}
style={{
backgroundColor: 'red',
height: '100%',
width: '100%'
}}
loop={true}
source={Platform.OS === 'ios' ? anim : 'gradient_animated_background.json'}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'blue',
flex: 1,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#ffffff'
}
});
The animation, and when ever i keep changing the width and height..it forcefully tries to maintain the aspect radio...(not sure though)
{"v":"4.6.10","fr":15,"ip":0,"op":155,"w":1080,"h":1920,"nm":"background","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1160,880]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[0.9960784,0.7843137,0.145098,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"gf","o":{"a":0,"k":100},"r":1,"g":{"p":3,"k":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[0,0.511,0.89,0.283,0.5,0.334,0.873,0.583,1,0.156,0.857,0.882],"e":[0,0.726,0.283,0.89,0.5,0.441,0.356,0.886,1,0.156,0.429,0.882]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[0,0.726,0.283,0.89,0.5,0.441,0.356,0.886,1,0.156,0.429,0.882],"e":[0,0.89,0.283,0.283,0.5,0.886,0.553,0.219,1,0.882,0.823,0.156]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[0,0.89,0.283,0.283,0.5,0.886,0.553,0.219,1,0.882,0.823,0.156],"e":[0,0,0.312,0.737,0.5,0.078,0.597,0.754,1,0.156,0.882,0.771]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":91,"s":[0,0,0.312,0.737,0.5,0.078,0.597,0.754,1,0.156,0.882,0.771],"e":[0,0.51,0.89,0.282,0.5,0.333,0.873,0.582,1,0.157,0.855,0.882]},{"t":120}]}},"s":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[-430.769,-404.573],"e":[23.726,-364.48],"to":[75.7491683959961,6.68213844299316],"ti":[-123.915840148926,-8.51547145843506]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[23.726,-364.48],"e":[312.726,-353.48],"to":[123.915840148926,8.51547145843506],"ti":[-1.00208830833435,-1.83333337306976]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[312.726,-353.48],"e":[29.739,-353.48],"to":[1.00208830833435,1.83333337306976],"ti":[120.055290222168,0.60746711492538]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":91,"s":[29.739,-353.48],"e":[-407.606,-357.125],"to":[-120.055290222168,-0.60746711492538],"ti":[72.8907089233398,0.60746711492538]},{"t":120}]},"e":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[374.412,342.611],"e":[22.822,357.191],"to":[-58.5984153747559,2.42986845970154],"ti":[132.520950317383,-7.89707231521606]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[22.822,357.191],"e":[-420.714,389.994],"to":[-132.520950317383,7.89707231521606],"ti":[-4.68509674072266,-7.89707231521606]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[-420.714,389.994],"e":[50.932,404.573],"to":[4.68509674072266,7.89707231521606],"ti":[-132.918350219727,4.25226974487305]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":91,"s":[50.932,404.573],"e":[376.797,364.48],"to":[132.918350219727,-4.25226974487305],"ti":[-54.3107261657715,6.68213844299316]},{"t":120}]},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[93.29,219.491],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":155,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":1,"nm":"Deep Red Solid 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[540,960,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"sw":1080,"sh":1920,"sc":"#be2a2a","ip":0,"op":155,"st":0,"bm":0,"sr":1}]}
What you are missing is the resizeMode, which is not specified on the documentation page, but if you look at the source you'll find it.
Here's something that works if you don't care to lose a few pixels:
import React, { Component } from 'react';
import {
StyleSheet,
View,
Dimensions
} from 'react-native';
import LottieView from 'lottie-react-native';
import { anim } from './assets/animation.json';
const { height, width } = Dimensions.get('window')
export default class App extends Component {
componentDidMount() {
this.animation.play();
}
render() {
return (
<View style={styles.container}>
<LottieView
ref={animation => {
this.animation = animation;
}}
style={{
width: width + 10,
height: height,
marginLeft: - 5
}}
resizeMode='cover'
loop={true}
source={anim}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'blue',
flex: 1,
},
});
Notice that I've exported the asset a bit differently since I tried this on https://snack.expo.io and for some reason they don't like JSON files 😁, so now the assets look something
/assets/animation.json.js
export const anim = {"v":"4.6.10","fr":15,"ip":0,"op":155,"w":1080,"h":1920,"nm":"background","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1160,880]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[0.9960784,0.7843137,0.145098,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"gf","o":{"a":0,"k":100},"r":1,"g":{"p":3,"k":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[0,0.511,0.89,0.283,0.5,0.334,0.873,0.583,1,0.156,0.857,0.882],"e":[0,0.726,0.283,0.89,0.5,0.441,0.356,0.886,1,0.156,0.429,0.882]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[0,0.726,0.283,0.89,0.5,0.441,0.356,0.886,1,0.156,0.429,0.882],"e":[0,0.89,0.283,0.283,0.5,0.886,0.553,0.219,1,0.882,0.823,0.156]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[0,0.89,0.283,0.283,0.5,0.886,0.553,0.219,1,0.882,0.823,0.156],"e":[0,0,0.312,0.737,0.5,0.078,0.597,0.754,1,0.156,0.882,0.771]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":91,"s":[0,0,0.312,0.737,0.5,0.078,0.597,0.754,1,0.156,0.882,0.771],"e":[0,0.51,0.89,0.282,0.5,0.333,0.873,0.582,1,0.157,0.855,0.882]},{"t":120}]}},"s":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[-430.769,-404.573],"e":[23.726,-364.48],"to":[75.7491683959961,6.68213844299316],"ti":[-123.915840148926,-8.51547145843506]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[23.726,-364.48],"e":[312.726,-353.48],"to":[123.915840148926,8.51547145843506],"ti":[-1.00208830833435,-1.83333337306976]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[312.726,-353.48],"e":[29.739,-353.48],"to":[1.00208830833435,1.83333337306976],"ti":[120.055290222168,0.60746711492538]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":91,"s":[29.739,-353.48],"e":[-407.606,-357.125],"to":[-120.055290222168,-0.60746711492538],"ti":[72.8907089233398,0.60746711492538]},{"t":120}]},"e":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[374.412,342.611],"e":[22.822,357.191],"to":[-58.5984153747559,2.42986845970154],"ti":[132.520950317383,-7.89707231521606]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[22.822,357.191],"e":[-420.714,389.994],"to":[-132.520950317383,7.89707231521606],"ti":[-4.68509674072266,-7.89707231521606]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":61,"s":[-420.714,389.994],"e":[50.932,404.573],"to":[4.68509674072266,7.89707231521606],"ti":[-132.918350219727,4.25226974487305]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":91,"s":[50.932,404.573],"e":[376.797,364.48],"to":[132.918350219727,-4.25226974487305],"ti":[-54.3107261657715,6.68213844299316]},{"t":120}]},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill"},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[93.29,219.491],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":155,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":1,"nm":"Deep Red Solid 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[540,960,0]},"a":{"a":0,"k":[540,960,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"sw":1080,"sh":1920,"sc":"#be2a2a","ip":0,"op":155,"st":0,"bm":0,"sr":1}]}
So the first answer raised an important point (adding resizeMode="cover").
But that's not enough, If you test across several screens sizes, you might still find unwanted margins and spaces. I had this issue too,
Here's the simple solution:
Get the dimensions of the lottie file (e.g 300 X 600)
Set width only, then use aspectRatio to determine the height. (must)
Set flexGrow = 1 (must)
e.g
<LottieView
style={{
width: 300,
aspectRatio: 300 / 600,
flexGrow: 1,
alignSelf: 'center',
}}
resizeMode="cover"
ref={animation=> { this.animation = animation; }}
source={require ('./assets/animation.json')}
autoPlay={false}
loop={false}
/>
I guess the problem arises because you cant use width and height at the same time in the styling of the Lottie view.
So an easy workaround is to use the width and aspectRatio
Good luck!
Center Image React Native Loading Screen
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
Setting component height to 100% in react-native
I can give the height element of style numeric values such as 40 but these are required to be integers. How can I make my component to have a height of 100%?
check out the flexbox doc. in the stylesheet, use: flex:1,
Grab the window height into a variable, then assign it as the height of the flex container you want to target :
let ScreenHeight = Dimensions.get("window").height;
In your styles :
var Styles = StyleSheet.create({ ... height: ScreenHeight });
Note that you have to import Dimensions before using it:
import { ... Dimensions } from 'react-native'
flex:1 should work for almost any case. However, remember that for ScrollView, it's contentContainerStyle that controls the height of view:
WRONG
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView style={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
CORRECT
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView contentContainerStyle={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
You can simply add height: '100%' into your item's stylesheet. it works for me
most of the time should be using flexGrow: 1 or flex: 1
or you can use
import { Dimensions } from 'react-native';
const { Height } = Dimensions.get('window');
styleSheet({
classA: {
height: Height - 40,
},
});
if none of them work for you try it:
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}
Try this:
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'skyblue'}} />
</View>
You can have more help in react-native online documentation (https://facebook.github.io/react-native/docs/height-and-width).
I was using a ScrollView, so none of these solutions solved my problem. Until I tried contentContainerStyle={{flexGrow: 1}} prop on my scrollview. Seems like without it -scrollviews will just always be as tall as their content.
My solution was found here: React native, children of ScrollView wont fill full height
<View style={styles.container}>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
}
})
I looked at lots of these solutions, and none worked across React Native mobile and web.
Tracking the screen height using Dimensions API is one way that does work, but this can be innacurate on some mobile devices. The best solution I found was to use this on your element:
<View style={{ height:Platform.OS === 'web' ? '100vh' : '100%' }}
/* ... your application */
</View>
Please also note the caveat with ScrollView as mentioned here.
I would say
<View
style={{
...StyleSheet.absoluteFillObject,
}}></View>
In this way, you can fill the entire screen without caring about, flex, width, or height