Updated April 11, 2023
Introduction to React Native Justify Content
Designing content is an art in web development. The aesthetics are needed to be done to make the web look more attractive and the content more informative. Justify content is one such feature that helps in aligning the objects, texts in a certain manner to make the website or app look more informative and neater. Through justify Content we can align the children under the main axis of the container. In this article, we will explain the concept of justify-content and its syntax. Different examples are explained for the implementation of justify-content while making an app or a website.
React Native Justify Content Syntax:
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, backgroundColor: "#f5f269"
, color: "#0b40a1"
}}/>Similarly, it can be used to justify contents in a background image, image, view, etc.
Examples of React Native Justify Content
Justifying Content in React Native explained with examples:
Example #1
Below we have used justify-content to align children in the center within the main axis of the whole container.
[i] App.js –
import React from "react";
import { View
, Text
, Image } from "react-native";
class Application extends React.Component {
render() {
return (
<div style={{
backgroundImage: 'url("https://images.pexels.com/photos/46505/swiss-shepherd-dog-dog-pet-portrait-46505.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")'
, height:'480px'
, width: '500px'
}}>
<div style={{
backgroundImage: 'url("https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png")'
, height:'260px'
, width: '500px'
}}>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, backgroundColor: "#f5f269"
, color: "#0b40a1"
}}>
EDUCBA
</Text>
<View
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, backgroundColor: "#c4ff45"
, height:'450px'
, width: '250px'
, padding: 3
, backgroundImage: 'url("https://images.pexels.com/photos/1346086/pexels-photo-1346086.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")' ,
top: "0" ,
left: "50%" ,
bottom: "0" ,
}}
>
<View>
<Image
source={{
uri:
'http://pngimg.com/uploads/dog/small/dog_PNG195.png',
}}
style={{
height: 130,
marginTop: 10,
width: 150,
}}
/>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, backgroundColor: "#c4ff45"
, color: "#c90c3f"
}}>
EDUCBA welcomes you
</Text>
<Text
color="#bdf545"
style={{
backgroundImage: 'url("http://pngimg.com/uploads/dog/small/dog_PNG50386.png")' ,
width: 150 ,
height: 130 ,
position: "absolute" ,
top: "100%" ,
left: "0%" ,
bottom: "0" ,
alignItems: "center" ,
justifyContent: "center" ,
background: "#c4ff45" ,
fontSize: "100" ,
color: "#a10840"
}}
>
Heyoo!
</Text>
</View>
</View>
</div>
</div>
);
}
}
export default Application;[ii] index.js –
import { AppRegistry } from "react-native";
import Application from "./App";
AppRegistry.registerComponent(
"Application"
, () => Application);
AppRegistry.runApplication(
"Application"
, {
rootTag: document.getElementById(
"react-root")
});Output:
Example #2
Below we have used justify-content to align children with space among them along the center within the main axis of the whole container.
[i] App.js –
import React from 'react';
import { View
, Text
, StyleSheet
, TouchableOpacity
, ImageBackground
, Image
} from 'react-native';
const Example2 = () => {
return (
<ImageBackground
source={
{
uri:
'https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}
}
style={
{
flex: 1
}
}
>
<View style={{
flex: 1,
flexDirection: 'center',
justifyContent: 'space-between',
}}>
<View
style={
{width: 150
, height: 150
, backgroundColor: '#c2f08d'
, alignItems: 'center'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#b80d2c'
, position: 'absolute-center'
}} >
<ImageBackground
source={{
uri:
'http://pngimg.com/uploads/dog/small/dog_png2399.png',
}}
style={{
height: 120,
marginTop: 10,
width: 120,
}}
>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, color: "#c90c3f"
}}>
EDUCBA
</Text>
</ImageBackground>
</View>
<View
style={
{width: 150
, height: 150
, backgroundColor: '#f0ee8b'
, alignItems: 'center'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#0d2fb8'
, alignItems: 'stretch'
}} >
<ImageBackground
source={{
uri:
'http://pngimg.com/uploads/dog/small/dog_PNG2446.png',
}}
style={{
height: 120,
marginTop: 10,
width: 120,
}}
>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, color: "#c90c3f"
}}>
Welcomes
</Text>
</ImageBackground>
</View>
<View
style={
{width: 150
, height: 150
, backgroundColor: '#8aedd4'
, alignItems: 'center'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#d938f5'
}} >
<ImageBackground
source={{
uri:
'http://pngimg.com/uploads/dog/small/dog_PNG161.png',
}}
style={{
height: 120,
marginTop: 10,
width: 120,
}}
>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, color: "#c90c3f"
}}>
You
</Text>
</ImageBackground>
</View>
</View>
</ImageBackground>
);
};
export default Example2;Output:
Example #3
Below we have used justify-content to align children with space among them along the y axis of the main axis of the whole container.
[i] App.js –
import React from 'react';
import { View
, Text
, StyleSheet
, TouchableOpacity
, ImageBackground
, Image
} from 'react-native';
const Example3 = () => {
return (
<ImageBackground
source={
{
uri:
'https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}
}
style={
{
flex: 1
}
}
>
<View style={{
flex: 1,
flexDirection: 'column' ,
justifyContent: 'space-between' ,
alignItems: 'stretch'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#0d2fb8'
}}>
<View style={{width: 50
, height: 50
, backgroundColor: '#ed98c2'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#7203a6'
, justifyContent: 'space-between'}} >
<ImageBackground
source={{
uri:
'http://pngimg.com/uploads/labrador_retriever/small/labrador_retriever_PNG87.png',
}}
style={{
height: 120,
marginTop: 10,
width: 120,
}}
>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, color: "#c90c3f"
}}>
EDUCBA
</Text>
</ImageBackground>
</View>
<View style={{height: 50
, backgroundColor: '#97f0df'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#a30559'
, justifyContent: 'space-between'}} >
<ImageBackground
source={{
uri:
'http://pngimg.com/uploads/labrador_retriever/small/labrador_retriever_PNG83.png',
}}
style={{
height: 140,
marginTop: 10,
width: 120,
}}
>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, color: "#c90c3f"
}}>
Welcomes
</Text>
</ImageBackground>
</View>
<View style={{height: 100
, backgroundColor: '#eef09c'
, borderWidth: 10
, textAlign: 'center'
, borderRadius: 100
, borderColor: '#03a670'
, justifyContent: 'space-between'}} >
<ImageBackground
source={{
uri:
'http://pngimg.com/uploads/dog/small/dog_PNG161.png',
}}
style={{
height: 120,
marginTop: 10,
width: 120,
}}
>
<Text
style={{
flex: 1
, alignItems: "center"
, justifyContent: "center"
, color: "#c90c3f"
}}>
You
</Text>
</ImageBackground>
</View>
</View>
</ImageBackground>
);
};
export default Example3;Output:
Conclusion
On the basis of the above article, we can understand the concept of justify-content and its importance in app development or web development. This article explains the concept through various examples which will help the readers in understanding the implementation of justify-content.
Recommended Articles
This is a guide to React Native Justify Content. Here we discuss the Introduction, syntax, examples with code implementation respectively. You may also have a look at the following articles to learn more –
