Updated April 14, 2023
Introduction to Styling in React Native
Styling is a very important part to make anything attractive to the viewer. Same is in the case of Applications or Websites. We tend to like the websites or applications which look beautiful and are styled correctly. Styling includes many parts like Texts, Fonts, Images, Colors etc. React Native also supports Styling for the applications just like React supports for the websites. The applications build over React Native can be easily styled with different ways according to our requirements. In this article, we will go through some of the examples where we will see some of the ways to style our application.
Syntax:
import { StyleSheet} from "react-native";Examples to Implement Styling in React Native
Below are the examples :
Example #1 – Basic Styling
Code:
import React from "react"; import { StyleSheet
, Text
, View } from "react-native";
export default App = () => (
<View style={styles.container}>
<Text style={styles.title}>My World</Text>
</View>
);
const styles = StyleSheet.create({ container: {
flex: 2,
padding: 25,
backgroundColor: "#d9f587"
},
title: { marginTop: 17,
paddingVertical: 9,
borderWidth: 5, borderColor: "#4c2363", borderRadius: 6, backgroundColor: "#f2497b", color: "#631b87", textAlign: "center", fontSize: 31,
fontWeight: "bold"
}
});Output:
Example #2 – Styling with an Image
Components for styling:
- assets folder
- components folder
- js
Components inside assets folder:
- snack-icon.png
Components inside components folder:
- AssetExample.js
1. snack-icon.png
2. AssetExample.js
Code:
import * as React from 'react'; import { Text
, View
, StyleSheet
, Image } from 'react-native';
export default function AssetExample() { return (
<View style={styles.container}>
<Text style={styles.paragraph}> Files can be found in File Manager.
</Text>
<Image style={styles.logo} source={require('../assets/snack- icon.png')} />
</View>
);
}
const styles = StyleSheet.create({ container: {
alignItems: 'center', justifyContent: 'center', padding: 25, backgroundColor: '#f7ef4f',
},
paragraph: { margin: 25,
marginTop: 1,
fontSize: 15, fontWeight: 'bold', textAlign: 'center', color: '#d41c5f',
},
logo: { height: 128,
width: 128,
}
});App.js
Code:
import * as React from 'react'; import { Text
, View
, StyleSheet } from 'react-native'; import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
export default function App() { return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Advance Example of Styling in React Native with Image application.
</Text>
<Card>
<AssetExample />
</Card>
</View>
);
}
const styles = StyleSheet.create({ container: {
flex: 2,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight, backgroundColor: '#6d91f2',
padding: 9,
},
paragraph: { margin: 25,
fontSize: 19, fontWeight: 'bold', textAlign: 'center', color: '#f5f262',
},
});Output:
Example #3 – Colorful Styling
Components inside src folder:
- App.js
- index.js
1. App.js
Code:
import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
class App extends Component {
render() {
return (
<View style={styles.background}>
<View style={styles.app} />
</View>
);
}
}
const styles = StyleSheet.create({ background: {
flex: 2,
borderColor: "#ed47a8", borderWidth: 20, backgroundColor: "#af58d1"
},
app: {
margin: "auto", maxWidth: 361,
maxHeight: 641,
width: 361,
height: 641, backgroundColor: "#55d4be", borderWidth: 50, borderColor: "#daff5e"
}
});
export default App;2. index.js
Code:
import { AppRegistry } from "react-native"; import App from "./App";
AppRegistry.registerComponent("App", () => App);
AppRegistry.runApplication("App", { rootTag: document.getElementById("root")
});Output:
Example #4 – Styling with a Button
Components inside src folder:
- App.js
- index.js
1. App.js
Code:
import React, { Component } from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";
const logoUri = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6
7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-
10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-
63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84
46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-
29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-
22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0
32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6
22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-
1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-
82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-
9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8
26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-
24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-
13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9
16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7
39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7
9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-
27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5
32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8
8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8
32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74
58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-
39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6
0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5
60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-
7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9
13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-
2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-
51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3
10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-
22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1
58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z" /><circle
cx="420.9" cy="296.5" r="45.7" /><path d="M520.5 78.1z" /></g></svg>`;
const Link = props => (
<Text
{...props}
accessibilityRole="link"
style={StyleSheet.compose( styles.link,
props.style
)}
/>
);
class App extends Component { render() {
return (
<View style={styles.app}>
<View style={styles.header}>
<Image
accessibilityLabel="React logo" source={{ uri: logoUri }} resizeMode="contain" style={styles.logo}
/>
<Text style={styles.title}>EDUCBA</Text>
</View>
<Text style={styles.text}>
For trainings on Latest Technologies, Visit our website, {" "}
<Link href="https://www.educba.com/"> EDUCBA.com
</Link>{" "}
and for free tutorials, click{" "}
<Link href="https://www.educba.com/tutorials/?source=menu"> here
</Link>
</Text>
<Text style={styles.text}>
To read new blogs on the latest technologies, click{" "}
<Link href="https://www.educba.com/blog/?source=footer" style={styles.code}>
here
</Link>
.
</Text>
<Button onPress={() => {}} title="Click to Login" />
</View>
);
}
}
const styles = StyleSheet.create({ app: {
marginHorizontal: "auto", maxWidth: 501
},
logo: { height: 81
},
header: { padding: 21
},
title: {
fontWeight: "bold", fontSize: "1.6rem", marginVertical: "1.1em", textAlign: "center",
color: '#7039e6'
},
text: {
lineHeight: "1.6em", fontSize: "1.126rem", marginVertical: "1.1em", textAlign: "center", color: '#ed285a'
},
link: {
color: "#5dc418"
},
code: {
fontFamily: "Times New Roman"
}
});
export default App;2. index.js
Code:
import { AppRegistry } from "react-native"; import App from "./App";
AppRegistry.registerComponent("App", () => App);
AppRegistry.runApplication("App", { rootTag: document.getElementById("root")
});Output:
Conclusion
On the basis of the above article, we understood how to style our application on React Native. The four different examples show us different ways to style the app which can beautify the application and can also keep it interactive to the user. I hope this article would have been informative to you and the examples were simpler to understand.
Recommended Articles
This is a guide to Styling in React Native. Here we discuss the Introduction to Styling in React Native and its Examples along with Code Implementation. You can also go through our other suggested articles to learn more –
