How to create helper file full of functions in react native

Question

Though there is a similar question I am failing to create a file with multiple functions  Not sure if the method is already outdated or not as RN is evolving very fast  How to create global helper function in react native    I am new to React Native    What I want to do is to create a js file full of many reusable functions and then import it in components and call it from there   What I have been doing so far might look stupid but I know you will ask for it so here they are   I tried creating a class name Chandu and export it like this     use strict   import React    Component   from  react   import     AppRegistry    Text    TextInput    View   from  react-native     export default class Chandu extends Component      constructor props       super props       this papoy           a    aaa             this helloBandu   function          console log  Hello Bandu                  helloChandu        console log  Hello Chandu            And then I import it in any required Component   import Chandu from    chandu     And then call it like this   console log Chandu   console log Chandu helloChandu   console log Chandu helloBandu   console log Chandu papoy     The only thing that worked was the first console log  which means that I m importing the correct path  but not any others   What is the correct way to do this please

User · Answer

To achieve what you want and have a better organisation through your files, you can create a index.js to export your helper files.

Let's say you have a folder called /helpers. Inside this folder you can create your functions divided by content, actions, or anything you like.

Example:

/* Utils.js */
/* This file contains functions you can use anywhere in your application */

function formatName(label) {
   // your logic
}

function formatDate(date) {
   // your logic
}

// Now you have to export each function you want
export {
   formatName,
   formatDate,
};

Let's create another file which has functions to help you with tables:

/* Table.js */
/* Table file contains functions to help you when working with tables */

function getColumnsFromData(data) {
   // your logic
}

function formatCell(data) {
   // your logic
}

// Export each function
export {
   getColumnsFromData,
   formatCell,
};

Now the trick is to have a index.js inside the helpers folder:

/* Index.js */
/* Inside this file you will import your other helper files */

// Import each file using the * notation
// This will import automatically every function exported by these files
import * as Utils from './Utils.js';
import * as Table from './Table.js';

// Export again
export {
   Utils,
   Table,
};

Now you can import then separately to use each function:

import { Table, Utils } from 'helpers';

const columns = Table.getColumnsFromData(data);
Table.formatCell(cell);

const myName = Utils.formatName(someNameVariable);

Hope it can help to organise your files in a better way.

User · Answer

An alternative is to create a helper file where you have a const object with functions as properties of the object  This way you only export and import one object   helpers js  const helpers         helper1  function                helper2  function param1               helper3  function param1  param2             export default helpers    Then  import like this   import helpers from    helpers     and use like this   helpers helper1    helpers helper2  value1    helpers helper3  value1    value2

User · Answer

I am sure this can help  Create fileA anywhere in the directory and export all the functions   export const func1     gt          do stuff   export const func2     gt          do stuff    export const func3     gt          do stuff    export const func4     gt          do stuff    export const func5     gt          do stuff      Here  in your React component class  you can simply write one import statement   import React from  react   import  func1 func2 func3  from  path to fileA    class HtmlComponents extends React Component       constructor props           super props           this rippleClickFunction this rippleClickFunction bind this             rippleClickFunction              do stuff              foo  bar         func1 data           func2 data           render           return             lt article gt                lt h1 gt React Components lt  h1 gt                lt RippleButton onClick  this rippleClickFunction   gt            lt  article gt                   export default HtmlComponents

User · Answer

If you want to use class  you can do this   Helper js    function x        function y        export default class Helper       static x    x           static y    y             App js  import Helper from  helper js            Helper x

User · Answer

i prefer to create folder his name is Utils and inside create page index that contain what that think you helper  by    const findByAttr    component attr    gt        const wrapper component find   data-test    attr           return wrapper     const FUNCTION NAME    component attr    gt        const wrapper component find   data-test    attr           return wrapper     export  findByAttr  FUNCTION NAME    When you need to use this it should be imported as use      because you did not use the default keyword look   import  FUNCTION NAME findByAttr  from  whare file is store utils index

User · Answer

Quick note  You are importing a class  you can t call properties on a class unless they are static properties  Read more about classes here  https   developer mozilla org en-US docs Web JavaScript Reference Classes  There s an easy way to do this  though  If you are making helper functions  you should instead make a file that exports functions like this   export function HelloChandu         export function HelloTester          Then import them like so   import   HelloChandu   from    helpers   or     import functions from    helpers  then functions HelloChandu

[reactjs] How to create helper file full of functions in react native?

Examples related to reactjs

Examples related to react-native