Navigate back to the homepage

How to create and use function in react native

Infinitbility
React Native
August 9th, 2021 · 1 min read
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

1export function functionOne() {
2 return1;
3}
4
5export function functionTwo() {
6 return2;
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

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…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to enable multidex in react native

How to enable multidex in react native

React Native enable multidex Example

August 9th, 2021 · 1 min read
How to disable back button in react native

How to disable back button in react native

React Native disable back button Example

August 8th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]