Styling
Before we proceed with working on components and delving deeper into React Native, let's address styling. Currently, we have added three elements to our project, but the visual presentation may need to be more optimal.
![content](https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/9cad8004-02f1-46b0-a31a-e39addcbc716/basic-concepts/not+optimal+app+preview+without+styles.png)
![](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/Java_OOP/Definition_1.png)
StyleSheet
API. Here's an overview of each along with real-world examples:
Inline Styles
Inline styles in React Native are similar to how you write styles in regular React for the web. Styles are passed as objects directly within the component's props.
Theory
- Inline styles allow for a quick and straightforward way to apply styles directly to a component;
- Inline styles use JavaScript objects to define styles directly within the component's props;
- Each style property is written in camelCase, similar to how it's done in CSS, but without hyphens;
- Values can be either strings or numbers, depending on the property.
Example
Code Description
View Styles:
flex: 1
: The View
component takes
up all available space within its container, ensuring it expands to fill
the entire screen.
justifyContent: "center"
: Vertically centers
the content within the View
.
alignItems: "center"
: Horizontally centers
the content within the View
.
backgroundColor: "lightblue"
: Sets the
background color of the View
to light blue.
Text Styles:
fontSize: 24
: Sets the font size of the
Text
component to 24 units.
color: "firebrick"
: Sets the text color of
the Text
component to firebrick.
StyleSheet
React Native encourages the use of the StyleSheet
API for defining styles, especially for performance optimization.
Theory
- The
StyleSheet.create
method is used to create an optimized style object; - Styles created with
StyleSheet.create
are processed during build time, resulting in better performance compared to inline styles; - Style properties are defined in the same camelCase format as inline styles;
- The resulting object is then referenced in the component.
Example
Code Description
-
Line 2: Import
StyleSheet
fromreact-native
. -
Lines 6-7: Apply the class names
container
andtext
to the appropriate elements. -
Lines 14-25: Create a stylesheet object using the
StyleSheet.create
method. This object contains style definitions for thecontainer
andtext
styles. - All styles remain the same as in the previous example.
Result after implementing any of the approaches.
In Practice
Everything was clear?
Course Content
Foundations of React Native
Foundations of React Native
Styling
Before we proceed with working on components and delving deeper into React Native, let's address styling. Currently, we have added three elements to our project, but the visual presentation may need to be more optimal.
![content](https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/9cad8004-02f1-46b0-a31a-e39addcbc716/basic-concepts/not+optimal+app+preview+without+styles.png)
![](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/Java_OOP/Definition_1.png)
StyleSheet
API. Here's an overview of each along with real-world examples:
Inline Styles
Inline styles in React Native are similar to how you write styles in regular React for the web. Styles are passed as objects directly within the component's props.
Theory
- Inline styles allow for a quick and straightforward way to apply styles directly to a component;
- Inline styles use JavaScript objects to define styles directly within the component's props;
- Each style property is written in camelCase, similar to how it's done in CSS, but without hyphens;
- Values can be either strings or numbers, depending on the property.
Example
Code Description
View Styles:
flex: 1
: The View
component takes
up all available space within its container, ensuring it expands to fill
the entire screen.
justifyContent: "center"
: Vertically centers
the content within the View
.
alignItems: "center"
: Horizontally centers
the content within the View
.
backgroundColor: "lightblue"
: Sets the
background color of the View
to light blue.
Text Styles:
fontSize: 24
: Sets the font size of the
Text
component to 24 units.
color: "firebrick"
: Sets the text color of
the Text
component to firebrick.
StyleSheet
React Native encourages the use of the StyleSheet
API for defining styles, especially for performance optimization.
Theory
- The
StyleSheet.create
method is used to create an optimized style object; - Styles created with
StyleSheet.create
are processed during build time, resulting in better performance compared to inline styles; - Style properties are defined in the same camelCase format as inline styles;
- The resulting object is then referenced in the component.
Example
Code Description
-
Line 2: Import
StyleSheet
fromreact-native
. -
Lines 6-7: Apply the class names
container
andtext
to the appropriate elements. -
Lines 14-25: Create a stylesheet object using the
StyleSheet.create
method. This object contains style definitions for thecontainer
andtext
styles. - All styles remain the same as in the previous example.
Result after implementing any of the approaches.
In Practice
Everything was clear?