Develop Reference

react-Native: background image on iOS has cannot cover all the screen

The background image is not filling the whole screen on iOS devices, despite trying different options in styles. while on Android devices it looks fine and fills all the background space.
I got the same issue on iPhone6 device, also on the iPhone 11 emulator. There appears to be white edges on the left and the right which the background image does not cover, but this does not happen on android devices.
Here is a picture of both emulators of iOS and android side by side, iOS is on the right.
I tried using the styles property resizeMode , with values such as 'cover', 'stretch', 'contain' etc , but none of them seemed to make a difference.. here is the code :
import React from 'react';
import { Text, View, Platform, ImageBackground } from 'react-native';
import { Button } from 'native-base'
var myBackground = require('./assets/icons/landing.jpg')
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={myBackground}
style={styles.imageStyle}
>
<View style={styles.viewStyle}>
<Text
style={styles.titleStyle}
>Welcome to pokeSearch</Text>
<Button
block={true}
style={styles.buttonStyle}
onPress={() => { }}
>
<Text style={styles.buttonText}>Start Searching</Text>
</Button>
</View>
</ImageBackground>
</View>
);
}
const styles = {
container: {
flex: 1,
// marginTop: Platform.OS === "android" ? 20 : 0,
justifyContent: 'center',
alignItems: 'center'
},
buttonOuterLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
buttonLayout: {
// marginTop: 10,
// paddingRight: 10,
// paddingLeft: 10
},
viewStyle: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
titleStyle: {
fontSize: 30,
color: 'blue',
alignItems: 'center'
},
imageStyle: {
// flex: 1,
width: null,
height: null,
resizeMode: 'contain'
// justifyContent: 'flex-end',
// alignItems: 'center'
},
buttonStyle: {
margin: 10
},
buttonText: {
color: 'white'
}
}
I want the background image to cover the background on iOS like it does on android.

the solution is to change the backgroundImage style as follows :
imageStyle: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'cover'
}
all credit goes to matPag and https://stackoverflow.com/a/50233429/2910520

Image will not resize to fit window, all other fixes make the image disappear - React Native

I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.
Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.
I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.
Here is the source code I am using which produces the result where the image is too big for the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image going off the side of the screen
And here is the Source Code I am using where the image disappears off the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
height: undefined,
width: undefined,
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image disappeared entirely

After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:
width: null,
resizeMode: 'contain',
height: 220
The Stack Overflow question this solution was taken from

Image is out of border and doesn't show on Android

Hi I am trying move logo out of borders for IOS it works fine but Android have a problem the logo is covered by view on background. I am tried to set up background color to transparent but doesn't work.
Any idea how to solvate it?
and here is my code:
const styles = StyleSheet.create({
wallWrapper: {
backgroundColor: '#00000000',
borderWidth: 1,
borderColor: 'green',
paddingTop: 40,
},
wallImageBorderEffect: {
borderWidth: 1,
borderColor: 'red',
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 30,
backgroundColor: 'gray',
},
});
...
render() {
return (
<View style={styles.wallWrapper}>
<View style={styles.wallImageBorderEffect}>
<Image
style={{
height: 45,
width: 105,
position: 'absolute',
bottom: 6,
overflow: 'hidden',
}}
resizeMode="cover"
source={require('./images/mock-logo.png')}
/>
</View>
<View style={{
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 400,
}}>
</View>
</View>
);
}
}

This is a known issue on Android. The overflow attribute is not supported on Android yet (only on iOS).
But you can support the feature request here.
You could maybe try to move your <Image /> component outside of the <View /> and fix the position by adjusting top props.

How to set text in center in react native

Hi I want to set Text in center, I tried justifyContent and alignItems to center but it didn't work for me, text is displaying at the top.
LoginScreenStyles.js
export default StyleSheet.create({
...ApplicationStyles.screen,
container: {
paddingBottom: Metrics.baseMargin
},
centered: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});
ApplicationStyles.js
const ApplicationStyles = {
screen: {
mainContainer: {
flex: 1,
backgroundColor: Colors.transparent
},
backgroundImage: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
},
container: {
flex: 1,
paddingTop: Metrics.baseMargin,
backgroundColor: Colors.transparent
},
section: {
margin: Metrics.section,
padding: Metrics.baseMargin
},
sectionText: {
...Fonts.style.normal,
paddingVertical: Metrics.doubleBaseMargin,
color: Colors.snow,
marginVertical: Metrics.smallMargin,
textAlign: "center"
},
subtitle: {
color: Colors.snow,
padding: Metrics.smallMargin,
marginBottom: Metrics.smallMargin,
marginHorizontal: Metrics.smallMargin
},
titleText: {
...Fonts.style.h2,
fontSize: 14,
color: Colors.text
}
},
darkLabelContainer: {
padding: Metrics.smallMargin,
paddingBottom: Metrics.doubleBaseMargin,
borderBottomColor: Colors.border,
borderBottomWidth: 1,
marginBottom: Metrics.baseMargin
},
darkLabel: {
fontFamily: Fonts.type.bold,
color: Colors.snow
},
groupContainer: {
margin: Metrics.smallMargin,
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center"
},
sectionTitle: {
...Fonts.style.h4,
color: Colors.coal,
backgroundColor: Colors.ricePaper,
padding: Metrics.smallMargin,
marginTop: Metrics.smallMargin,
marginHorizontal: Metrics.baseMargin,
borderWidth: 1,
borderColor: Colors.ember,
alignItems: "center",
textAlign: "center"
}
};
export default ApplicationStyles;
LoginScreen.js
import React, { Component } from "react";
import { View, Text } from "react-native";
// Styles
import styles from "./Styles/LoginScreenStyles";
export default class LoginScreen extends Component {
render() {
return (
<View style={styles.mainContainer}>
<Text style={styles.centered}>
This probably isn't what your app is going to look like. Unless your
designer handed you this screen and, in that case, congrats! You're
ready to ship. For everyone else, this is where you'll see a live
preview of your fully functioning app using Ignite.
</Text>
</View>
);
}
}

You need to write
justifyContent: "center", alignItems: "center"
in container like this :
container: {
paddingBottom: Metrics.baseMargin,
justifyContent: "center",
alignItems: "center"
}
If you just want to make text center you can use alignSelf: 'center' in centered

The style for container code should include this:
justifyContent: "center",
alignItems: "center"
and NOT to the Text itself. But if you want to make the Text center themselves then you should add this:
alignSelf: 'center'
To the Text styles itself. You can get an example from the official source here for more information.

I Believe this Might Clear your concept
1. justifyContent : helps you to control content of View Vertically
2. alignItems: helps you to control content of View Horizontally
3. alignSelf : help you make Text content Center.
Run Sample code for Demonstration.
render() {
return (
<View style={styles.container}>
<View style={{ justifyContent: "center", height: 200 }}>
<Text>justifyContent works in an View vertically</Text>
<Text>center,flex-start,flex-end</Text>
</View>
<View style={{ alignItems: "center" }}>
<Text>alignItems works in an View Horizontily</Text>
<Text>center,flex-start,flex-end</Text>
</View>
<Text style={styles.textStyle}>To Make Text Center</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
textStyle: {
alignSelf: "center",
alignItems: "center"
}
});

<TouchableOpacity
style = {styles.submitButton}
onPress = {
() => this.login(this.state.email, this.state.password)
}>
<Text style = {styles.submitButtonText}> Submit </Text>
</TouchableOpacity>
for text center
submitButtonText:{
color: 'white',
alignSelf: 'center'
}

Updated:-
AnyText: {
textAlign: 'center',
fontSize: 21,
fontWeight: 'bold',
}

how to bring ProgressBar in center of the screen and remove warning message in react native

how to bring the progress bar to the center of the screen like we do in android center in parent in relative layout and how to remove the warning message.How to change the visibility(invisible or gone or visible) in progressbar.
MyScreen
var ProgressBar = require('ProgressBarAndroid');
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
<Text style={{
backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center',
color: 'white', marginBottom: 30
}}>LOGIN</Text>
<ProgressBar style={{justifyContent:'center',alignItems:'center',styleAttr:'LargeInverse', color:'white'}} />
<View style={{ justifyContent: 'center' }}>
<TextInput
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Username' placeholderTextColor='white'
autoFocus={true}
returnKeyType='next'
keyboardType='email-address'
onChangeText={(valUsername) => _values.username = valUsername}
/>
<TextInput
secureTextEntry={true}
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Password' placeholderTextColor='white'
onChangeText={(valPassword) => _values.password = valPassword}
/>
</View>
<Button onPress={() => { _handlePress() } } label='Login' />
<View>
<Text style={{ color: 'white', justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
Forgot Password
</Text>
<Text style={{ color: 'white', marginTop: 10, justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
SignUp
</Text>
</View>
</View>

As noted by #ravi-teja, use absolute positioning. Also, your warning arises because styleAttr is not a style attribute (the name is misleading) but a prop. You can also show and hide it programmatically using a boolean (myCondition) (that you can maybe store in your state). You should do something like this:
var ProgressBar = require('ProgressBarAndroid');
// ...
render(){
const {width, heigth} = Dimensions.get('window'); // The dimensions may change due to the device being rotated, so you need to get them in each render.
return (
//...
{this.state.myCondition && <ProgressBar styleAttr={'LargeInverse'} style={{position: 'absolute', left: width/2, height: height/2, justifyContent:'center',alignItems:'center', color:'white'}} />}
//...
}
In addition to that and as others said, you should give a try to ActivityIndicator, since it works for both iOS and Android.