How to Style Text in React Native

In this React Native article we are going to learn How to Style Text in React Native, so as

you know we can use React Native for building Android and IOS applications, you can

easily use JavaScript for building Mobile Applications. React Native is maintend by Facebook.

 

We are going to create our React Native Project using Expo CLI.

 

So now first install expo cli.

 

 

After that create your React Native Project with Expo CLI. you can give the name 

of your project as you want.

 

 

 

 

There will be different files in your React Native Project, but we are interested in the App.js

file, so open your App.js file, you will see that we have a simple Text component in our file.

there are two ways that you can style your text or components in React Native. the first way is

inline style. in here we have given inline styles for the two Text that we have.

 

 

And this is the complete code for App.js file.

 

 

 

Now if your run your project this will be the result.

How to Style Text in React Native
How to Style Text in React Native

 

 

Now if you don’t want to use inline styling in React Native, than you can create your

styles separately using StyleSheet.create() function and after that you can connect those styles

with your components.


 

 

So you can see that we have names for every style, now we can add these names to the specific

Text components that we want to change the color.

 

 

This is the complete code for App.js.

 

 

If you run the project the result will be the same.

 

 

 

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.

Leave a Comment