Androidmonks
Learn to code to build for Android OS

# React Native Styling in 2 Minutes

January 9, 2020

React Native Styling in 2 Minutes

January 9, 2020 by Baradwaj VaradharajanContents

React Native Styling in 2 Minutes

React Native is an extremely powerful framework to build fast UI for Mobile Apps. Styling in React Native is very simple and can be done in 2 methods.

Styling in React Native is really simple, either choose an inline styling option, passing the key and value directly to the ‘style’ property or choose StyleSheet and create cleaner styles for your Application. If the app size is bigger, it is advisable to choose the StyleSheet option to maintain and re-use the code easily. Styling can be done very easily with this simple guide.

The article below takes into the assumption that, You understand the basic syntax associated with creating, defining and understanding React’s Components, Props, and States!

Basics of Styling

One of the most important basics to remember when styling the React Native application is to choose between inline styling and using the StyleSheet component to do your work.

  • Inline styling lets you define the style for the element on that Element’s ‘style’ props itself.
  • StyleSheet creates an access to create multiple states for the StyleSheet and use it on the element.

If you are confused as to which one to choose, remember to assess the size of the application, if the size is small then inline is probably going to be easy. The size of the application end up usually bigger than expected, in that case, choose the StyleSheet option mentioned in the next section.

Forming the Style Key, Value

React Native is a framework that has been obtained from the React JS. You can find a lot of similarities to the Web programming constructs here(Javascript is obviously was invented for the web!). Similarly to create a simple Style property, remember to take the key, valuepair from the web styling.

For example, your Style could be to set a font size of the Text to 20PX. The CSS way of doing it is to assign, font-size: 20. In React Native, the property is represented by fontSize:20

All the style that is possible in CSS can be used in ReactNative as well. Note: There can be properties that do not follow the same syntax as mentioned above. We will see more about that in the coming up sections.

Styling Mistakes to Avoid

One of the most common styling mistakes that React Native beginners do is that, they try to go through the CSS approach of having one file for all styles and flood it with different styles. This is great for web development because it has been considered the standard.

React Native, however, does not care how the styling is placed at. Every Component is built reactively, and styles are applied on the Run time. The best practice here is to make sure the styles are modular, and only the common styles are globally present. This makes it easy to debug and maintain. In case a component is removed from the code base, the style associated with it also removed and no problem of having dead code lying in the code base.

Common Styling MistakesCommon Styling Mistakes Common Styling Mistakes### React Native Inline Styling

To give inline styling to React Native elements, follow the syntax below. Assuming you are trying to color a simple Text Element, you can do,

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App: () => React$Node = () => {
return (
<Text style={{color:'red'}}>This is my first React Native Styling Tutorial!</Text>
);
};

export default App;

This produces a ‘Red’ Color text on the UI. Note: You can add any number of style to the element, TEXT in this example, by separating it with ‘,’ inside the ‘{}’

However, there are few places where Inline styling has to be avoided as discusses in the next section.

React Native StyleSheet Basics

Styling BasicsStyling Basics StyleSheet Basics###

Using a StyleSheet has got a lot of advantages, From the React Native Docs itself,

Performance of Stylesheet over inline styling

  • Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.

  • It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

As given, the performance is a concern when inline styling is concerned. You can choose inline styling in places where there are fewer elements to style and using a StyleSheet is a bigger process. Other than that, always use StyleSheets. It makes your code cleaner and maintainable. Another tip is to create a stylesheet per component and use one stylesheet for the entire app only to share the style across components. This makes it easy to change and maintain the different styles associated with components.

Using StyleSheet is really simple in ReactNative. All you have to do is, import the StyleSheet class from the react-native component and you can start creating the objects easily. For example,

import React from 'react'; 
import {StyleSheet, Text, View} from 'react-native'; 
const style = StyleSheet.create({});

This is enough to create a style object which can then be used inside the element.

Example Styling Application

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App: () => React$Node = () => {
return (
<Text style={style.textStyle}>This is my first React Native Styling Tutorial!</Text>
);
};

const style = StyleSheet.create({
textStyle:{
color: 'red',
fontWeight: 'bold',
fontSize: 34,
textAlign: 'center'
}
});

export default App;

 

React Native Text StylingReact Native Text Styling React Native Text StylingThere are a lot of different ways to style your ReactNative elements. See the following elements and components that create beautiful elements on the UI.

TweetPinShare0 Shares Categories React Native Leave a comment Post navigationFlutter and Rive – Creating Animated ButtonsReact Native Lists in 2 minutes### Leave a Comment Cancel reply

Comment

Name Email Website

Search for: ## Archives

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience. Necessary Necessary Always EnabledNecessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary Non-necessaryAny cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

/* / / */ var swp_nonce = "d0f8c9f8a6";var swpFloatBeforeContent = false; var swp_ajax_url = "https://androidmonks.com/wp-admin/admin-ajax.php"; var swp_post_id = "2265";var swpClickTracking = false;

© Copyright 2022 Androidmonks