How to create and use function in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to create common functions like helpers in react native and how to use them in react native screen.

Here you will get

1. How to create functions in react native
2. How to export those functions in react native
3. How to import or use functions in react native

Let start today’s article how to create and use the function in react-native

Here, I am assuming you guys already have created a project with screens.

First, we have to create a functions file with multiple functions like this and also we will see how to export functions.

functions.js

Copy 
1export function functionOne() {
2    return “1”;
3}
4
5export function functionTwo() {
6    return “2”;
7}

On the functions.js file, we have created two functions where they are returning values;

We are using the keyword export before the function keyword because we want to use this function in other files. If you want to use the function in the same file then you haven’t need export functionality.

Let see how we can use these common functions in react native components file.

Well if want use those functions then first we have to import function like on below example.

ReactNativeComponents.js

Copy 
1import React from 'react';
2import {functionOne, functionTwo} from 'functions';
3import { View, Text } from 'react-native';
4
5class ReactNativeComponents extends React.Component {
6    constructor(props){
7        super(props);
8    }
9
10    componentDidMount() {
11        this.callFunction();
12    }
13
14    callFunction(){
15        //do stuff. 
16        // foo==bar
17        functionOne(data);
18        functionTwo(data)
19    }
20   render() {
21      return (
22         <View>
23             <Text>React Components</Text>
24         </View>
25      );
26   }
27}
28
29export default ReactNativeComponents;

Thanks for reading…