Creating a Component in React Native

Reading time: 3 minutes

React Native works with components. What does this mean? It means that each element represents an object with its view, properties, and methods. An object is a black box where you input an entry and get an output, regardless of its internal contents.

I’m going to explain how to create a sample component in React Native.

The first thing we need to do is go to our App.js file.

import React from "react";
import {View, Button} from "react-native";

// Button component
const App = () => {
    return (
       <Text>Hello World</Text>
       <Button title="Start" />
    )
};

export default App;

In this case, I’ve created a text that says “Hello World” and a button that says “Start”.

Now, let’s create a component that represents the button object, which we will customize and import into our App.

To do this, we will create a folder called “components” and inside it, Boton.js.

Now, open Boton.js and add the following code:

import React from "react";
import { StyleSheet, Button } from "react-native";

// Button component
const Boton = () => {

    return (
        <Button style={styles.button} title="Start" />
    )
};

export default Boton;

const styles = StyleSheet.create({
    button: {
        backgroundColor: '#2145E6',
    },
});

In this case, we have created the button and applied a style that adds a blue background color.

Now, we want our button to have a customized text and also invoke a function when pressed. To do this, let’s make some modifications:

import React from "react";
import { StyleSheet, Button } from "react-native";

// Button component
const Boton = (props) => {

    // Constructor parameters are passed through props
    const { text, onPress } = props;

    return (
        <Button style={styles.button} onPress={onPress} title={text} />
    )
};

export default Boton;

const styles = StyleSheet.create({
    button: {
        backgroundColor: '#2145E6',
    },
});

First, we pass the variable props as the constructor, where we add the attributes we want to pass through the button’s properties.

Then, we added a constant object with two parameters, text and onPress.

These parameters are received from the component’s properties when we add it to a view, for example:

With this, we can customize the button’s properties when adding it to different screens, similar to creating a new Object(text, onPress) in Java.

Finally, I added the variables {onPress} and {text} to refer to the properties being passed.

With all this, we have created our component. Now, we just need to add it to the view in App.js as follows:

1. Import the component:
   import Boton from '../components/Boton';
2. Add the component tothe view:
   
3. Pass the desired attributes:
   

This is the modified code of App.js:

import React from "react";
import {View, Button} from "react-native";

// Import the component
import Boton from '../components/Boton';

// Button component
const App = () => {
    return (
       <Text>Hello World</Text>
       <Boton text="Start" onPress="handlePress" />
    )
};
// Function to be invoked on button press
function handlePress(){
   alert("pressed");
}

export default App ;

DevCodeLight