components in react native

What are components?

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

A simple component is just a javascript function. Here, I am using the ES6 arrow function to write a component called 'StyledButton'.

Component name must be in 'PascalCase' e.g StyledButton.

If you have come from React background, there is not much surprised to see this block of code. The only difference is here we are not using different semantic HTML tags like <div>, <h1> , <p> etc.

How to create a component?

Instead, we are using <View> for block-level similar to <div> and <Text> for writing any text similar to the <p> tag. And both are imported from react-native package.

For Writing the CSS, we are importing StyleSheet from react-native and follow the syntax of CSS in js inside the curly braces of create method. and then we will use the reference 'styles' in our jsx.

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

const StyledButton = () => {
    return (
             <View>
                    <Text>Styled Button</Text>
              </View>
            )
}

export default StyledButton;

const styles = StyleSheet.create({})

We can reuse this component wherever we required it in the parent component. We need to make it dynamic by using some props in the component.

Props are ways to communicate data or pass functions between two components. In the below diagram, btnName and clicked are two different props that will pass data from parent to child component.

container, containerText are used as className in our component.

We have used a special tag here called <TouchableOpacity> and wrap the <view> of the styled button to provide the touch on the custom button.

We have also a callback method 'clicked' which we call in the onPress method that will ultimately call the method defined in the parent component.

###

Now we can call our component in the parent component i.e App.tsx and pass the required props.

How to reuse our custom component?

Here we call the child component 3 times to display three diffrent buttons with different label and functionality. Hence we reuse the child component.

We are passing the values and references of props like btnName and clicked respectively in the parent component. We defined all the three functions in the parent component to increment , decrement or reset the value of counter.

We display the value of counter using 'count' variable inside the curly braces.

Here, one special thing you will notice that we are using a hook called useState().

useState is a Hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.

This is equivalent to this.state/this.setState for functional components in react or react-native.

So, we initialize the count value with 0 and an updater function called setCount which is used to update the local state inside the function.

The output of the above code is shown below diagram.

React Native Output.jpeg

Conclusion:-

Hurray!!! You have learned how to reuse our components in another component.

Enjoy Happy Coding!

Thanks for reading 😊

I would ❤ to connect with you at LinkedIn | GitHub

Share your queries in the comments section.

signatureblogger