Style attributes
Some attributes for Styling the element are mentioned below:
-
Color Values:
In React Native you can specify color in multiple ways.
Predefined color values: e.g. red, gold, coral.
Hexadecimal: #f0f(#rgb), #ff00ff(#rrggbb), f0ff(#rgba), #ff00ff00(rrggbbaa).
RGB: 'rbga' and rgb(255, 0, 255) (255, 0, 255, 1). Red, blue, green and alpha are represented by the letters r, g, b, and a, respectively.
-
Flex Direction:
The flow of components in a flex container is determined by the flexDirection attribute. We're changing the default setting for flexDirection from column to row here.
-
Flex:
The flex attribute specifies how much space the child component will take up in the container in the flex-direction direction. We're using flex value 1 for both child components in this example. This will split the container in half and give each part one portion.
Example Application
Now let’s look at an example of styling in React Native. We have created a view and styled it with different colors and have made 4 different rows and labeled them too.
App.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component<Props> {
render() {
return (
<View
style={{
flex: 4,
justifyContent: 'center',
backgroundColor: '#fff',
alignItems: 'fit',
}}>
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<Text
style={{
fontSize: 20,
color: '#fff',
textAlign: 'center',
textAlignVertical: 'top',
}}>
Row number 1
</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'orange' }}>
<Text
style={{
fontSize: 20,
color: '#fff',
textAlign: 'center',
textAlignVertical: 'top',
}}>
Row number 2
</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'black' }}>
<Text
style={{
fontSize: 20,
color: '#fff',
textAlign: 'center',
textAlignVertical: 'top',
}}>
Row number 3
</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'skyblue' }}>
<Text
style={{
fontSize: 20,
color: '#fff',
textAlign: 'center',
textAlignVertical: 'top',
}}>
Row number 4
</Text>
</View>
</View>
);
}
}
Output:
Also see, React Native Reanimated
Check this out, React Native Paper
Frequently Asked Questions
Which styling is best for React?
The simplest and most basic approach to style any React application is to use inline styles. You don't need to build a separate CSS if you style elements inline. In comparison to styles in a stylesheet, styles applied directly to elements have a higher priority.
What does React Native use for styling?
JavaScript is basically used to style your application with React Native. A prop named style is accepted by all of the main components. The style names and values are usually similar to how CSS works on the web, with the exception that the names are written in camel case, e.g. backgroundColor instead of background-color.
Is it really worth investing in React Native in 2022?
Because of its intuitive architecture, live reloading, and short development timelines, as well as outstanding performance and code reusability across platforms, React Native is the best choice for cross-platform app development in 2022. (iOS, Android, and web).
Conclusion
In this article, we learned about Styling in React Native and its working implementation by showcasing a working example.
We hope this article has helped you in enhancing your knowledge as a Dart beginner. If you wish to learn more, check out our articles on environment setup and Competitive Programming. Do upvote this article for helping other ninjas grow.
Happy Coding!
85+ registered