[Solved]-How to create helper file full of functions in react native?-Reactjs

create a file with name e.g utils.js and use export with all functions.

export function firstfunction(){
}

export function secondfunction(){
}

now there are two ways you can import and use these functions

1. import them separately as

import {firstfunction, secondfunction} from './utils'

and use them as

firstfunction()
secondfunction()

2. import them by giving generic name as

import * as utils from './utils'

and use them as

utils.firstfunction()
utils.secondfunction()

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) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

const function_name = (component,attr) => {
    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'

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

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.

i am sure this can help. create filea anywhere in the directory and export all the functions.

export const func1=()=>{
    // do stuff
}
export const func2=()=>{
    // do stuff 
}
export const func3=()=>{
    // do stuff 
}
export const func4=()=>{
    // do stuff 
}
export const func5=()=>{
    // 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 (
         <article>
             <h1>react components</h1>
             <ripplebutton onclick={this.rippleclickfunction}/>
         </article>
      );
   }
}

export default htmlcomponents;

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');