My first React Native component

In this post, we will get familiar with react library itself. Let start looking for the screens folder in the src folder of the app. In the screens, folder create a new file called ComponentsScreen.js

ComponentsScreen.js is a react component and each component is based on four parts.

Part 1:

Import libraries we need to create this component.

Part 2:

Create a component function that will return some JSX.

Part 3:

Create a stylesheet to give style to the component.

Part 4:

Then export the component so that we can use it anywhere in our project.

// ComponentsScreen.js

// part 1
import React from 'react';
import {Text, StyleSheet} from 'react-native';

// part 2
const ComponentsScreen = () => {
  return <Text style={styles.textStyle}>Welcome to</Text>;

// part 3
const styles = StyleSheet.create({
  textStyle: {
    fontSize: 60

// part 4 
export default ComponentsScreen;

Let’s look at some more details of the above code.

<Text> A primitive React element, that is used to show some basic content on the screen.

JSX is a dialect of Javascript that tells React what content we want to show.

appNavigator in App.js is a tool from a library called React Navigation that is used to show the different screens to users.

Styles The StyleSheet.create() a function that validates a set of style rules those are passed into the element.

That’s it, this is how you wrote the component, In the upcoming post we will look at how to use this component in the app somewhere.

See you next time!

Author: Danyal
I'm skilled programmer with expertise in Vue.js/Nux.js for front-end development and PHP Laravel for back-end development. I excel in building APIs and services, and also have experience in web server setup & maintenance. My versatile skill set allows you to develop and maintain web applications effectively, from the user interface to the server-side functionality. I love coding with never ending learning attitude, thanks for visiting