In react native how to reuse functions?

Question

I need access functions from another page in react native .

Example :

validateEmail = (email) => {
// ---- Code ----
}

I need access that function in both login.js and registration.js

You can see the answer by @Nader Dabit here: [enter link description here](https://stackoverflow.com/questions/33539774/how-to-create-global-helper-function-in-react-native) — vaklinzi, Mar 09 '17 at 08:29
That's Work @zakster But 1. Create a file that exports a function: module.exports = function(variable) { console.log(variable); } Here we can only declare single function , How to declare multiple functions ? — Saravana Kumar, Mar 09 '17 at 08:42
Here is a short and nice answer. https://stackoverflow.com/a/38402100/2833640 — ashok, Dec 10 '17 at 02:05

MattYao · Accepted Answer · 2020-01-08T11:31:26.693

32

I can give you a quick example which I use in my current project.

You can follow the steps:

1.Create a /utils folder which you can put all the shared functions files for example datetimeHelper.js

const dateTimeHelper = {
  getFormattedDatetime: (datetime) => {
    return moment.utc(datetime).local().format('MMM Do, YYYY, h:mm a');
  }
}

export default datetimeHelper;

2.Import the file into where you need it:

import datetimeHelper from './utils/datetimeHelper.js';

3 You can call the functions:

datetimeHelper.getFormattedDatetime(MY_DATETIME);

edited Jan 08 '20 at 11:31

answered Mar 09 '17 at 09:24

MattYao

2,495
15
21

i use this code but showing undefined is not an object (evaluating _ApiHelper.ApiHelper.getdata) – Aslam Patel Jan 05 '18 at 08:01
Hi @AslamPatel, Can you share the code so I can help you find out? – MattYao Jan 31 '18 at 01:03
1

Thanks, similar approach `utils` directory having a variety of `helpers` such as validation, working with dates, and so on. Good approach! – Michael Feb 05 '18 at 17:48
Shouldn't this read `import dateTimeHelper` and not `import DateTimeHelper` or vice versa? – a2f0 Jan 08 '20 at 04:49

score 0 · Answer 2 · answered Mar 09 '17 at 08:50

0

Create a file at application root named as Common.js and inside common.js file add this:

'use strict';

class Common {

    //here you can use your validation email code

}

module.exports = Common;

Now access this class wherever you want.

answered Mar 09 '17 at 08:50

Ankush Rishi

2,861
8
27
59

How to access the functions inside the Common.js @Ankush Rishi – Saravana Kumar Mar 09 '17 at 09:00

score 0 · Answer 3 · answered Mar 09 '17 at 09:05

For the first question as I wrote in the comments you can use this:

Export one function

If you want to export many functions you can use this:

Export many functions

You can use the same technique for other things also like styles, fonts, colors and so on.

These questions are duplicates and for this reason I add the links here.

score 0 · Answer 4 · answered Mar 16 '21 at 10:26

I have created reuseable function as below:

Helper.js import { Platform, Dimensions } from "react-native";

function isIphoneWithNotch() {
    const dimen = Dimensions.get("window");
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (
            dimen.height === 780 ||
            dimen.width === 780 ||
            dimen.height === 812 ||
            dimen.width === 812 ||
            dimen.height === 844 ||
            dimen.width === 844 ||
            dimen.height === 896 ||
            dimen.width === 896 ||
            dimen.height === 926 ||
            dimen.width === 926)
    );
}

export { isIphoneWithNotch };

Use this function:

import { isIphoneWithNotch } from "./Helper";

console.log(isIphoneWithNotch());

In react native how to reuse functions?

4 Answers4