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 danyal.dk</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!