Expo React Native View, Text and Style

Start writing code with Expo React Native

In the previous article, we talked about

How to build a React Native app with Expo

In this article, we are going to talk about some of the basic components that in react native, particularly the view, text and also the stylesheet.

Related Course:

Complete React Native articles:

1. How to build a React Native app with Expo
2. How to Run the Expo React Native app on the emulator
3. Expo folder and file structure
4. Expo React Native View, Text and Style
5. Expo React Native — using React Hook useState()
6. How to Use TextInput Component to Change State in React Native?
7. How to Use Expo React Native List and ScrollView
8. How and why we use Flatlist in Expo React Native
9. What is TouchableOpacity in Expo React Native?

We can use styles in React to control how our components look on the screen.

At the very top we import react, we need that because we are using react and we need a few different things from react native, the stylesheet and two components text and view.

View component

The view component is a bit like a div component in HTML we use it to wrap other elements.

Text component

Here we are using this view to wrap this text component, now we use text components to output a bit of text.

import { StatusBar } from 'expo-status-bar';

import React from 'react';

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

export default function App() {

return (

<View style={styles.container}>

Welcome to ckmobile

<StatusBar style="auto" />

</View>

);

}

We cannot do that without a text component so if we type “Welcome to ckmobile” without wrapping with Text component. It is not going to be valid.

Click Save and it tries to refresh then we should probably get the above error.

You can see text strings must be rendered within a component.

So output text it needs to be within this Text component.

These are two basic components that we will use a lot.

Style

<View style={styles.container}>

We can add this style prop to different components.

It just like in HTML we can add inline style like below:

<h1 style="color:blue;">A Blue Heading</h1> react native doesn’t use CSS

React Native does not have CSS, it just emulates the idea of CSS. This is because both iOS and Android devices do not support CSS.

What react native does is emulate the idea of CSS that we are familiar and then it takes all of those different properties and converts it into a way that Android and iOS understands.

To style our different components on the screen, we do this by using this style prop and then we set it equal to some kind of object and that object is going to contain different CSS properties.

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

We define styles down as a constant and that is equal to style sheet which we import up at the top.

We use a method on that called creates so we invoke that method and we pass in an object into that method.

This object represents the kind of style sheet that we are going to use. Inside the object we have different key value pairs so this looks very much like a CSS rule.

container is just like the CSS selector and the object is the set of CSS properties.

We can define as many different key value pairs inside this style sheet.

Now we are going to add our own style, which is equal to style.mystyle.This will be an object and inside we will say color is blue, font weight will be bold and the font size is 40.

mystyle: {

color: 'blue',

fontWeight: 'bold',

fontSize: 38

}

This is difference between this and CSS, we hyphen these double-barrel names like “font-size”. In React Native we use camel case “fontSize”.

Inheritance

If if we add some kind of style to View component, the style do not automatically inherit it inside a text component right so styles are not

If we go to the container and say font weight is going to be bold then it’s not going to display as bold text even though these text components are inside this view component. If we want to do that we have to add it on directly .

The idea of inheritance really work when text component inside another text component.

export default function App() {

return (

<View style={styles.container}>

<Text style={styles.mystyle}><Text>Hello !!</Text>Welcome to ckmobile</Text>

<StatusBar style="auto" />

</View>

);

}

This is how to use the core component of React Native.

If you liked this story, you might also like a Medium membership. It’s only $5 a month (a price of a cup of coffee!) but it will give you unlimited access to stories while supporting your favorite writers. If you sign up using this link, I’ll earn a small commission. Thanks!

Follow us: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram

Join affiliates to earn money

https://ckmobile.gumroad.com/affiliates

Get more FREE tutorials on Youtube:

Follow Us: