CODEWITHSUNDEEP
react-native
deeptimancode
deeptimancode

Reputation: 1139

How to call a function from another class in React-Native?

I am working on React-Native, i want to call a function from different class but when i am trying to do it's showing some error.

Class A

import B from './B.js';

class A extends Component {
    _onItemPressed(item){
        B.abc();
    }

    render() {
      return (
         <TouchableHighlight
            underlayColor={Colors.colors.lightgrey}
            style={{padding: 15}}
            onPress={this._onItemPressed.bind(this)}>
         <Text>Click Me !</Text>
         </TouchableHighlight>
      );
    }
}

Class B

class B extends Component {

    abc(){
      alert('Hello World');
    }

    render() {
      return (
         <View>
            <Text>Welcome to React Native</Text>
         </View>
      );
    }
}

But error message is coming after pressing the button in Class A, 'undefined is not a function (evaluating 'B.default._abc()')'

Please kindly go through my post and suggest me some solution.

Thanks

Upvotes: 22

Views: 105646

Answers (8)

AnR
AnR

Reputation: 2217

I tried various solutions on this page but that didn't work. I am copying a solution from another web page here. Very simple and impressive. Might help someone looking for a simple solution:

How to Call Another Class Function From Default Class in React Native

Here is the complete example code:

import { StyleSheet, View, Alert, Platform, Button } from 'react-native';

export default class MyProject extends Component {

  constructor(props) {

       super(props)

      Obj = new Second();

     }

     CallFunction_1=()=>{

      Obj.SecondClassFunction() ;

     }

     CallFunction_2=()=>{

            Obj.SecondClassFunctionWithArgument("Hello Text");

    }

  render() {

    return (

      <View style={styles.MainContainer}>

        <View style={{margin: 10}}>

          <Button title="Call Another Class Function Without Argument" onPress={this.CallFunction_1} />

        </View>

        <View style={{margin: 10}}>

          <Button title="Call Another Class Function With Argument" onPress={this.CallFunction_2} />

        </View>

      </View>

    );
  }
}

class Second extends Component {

  SecondClassFunction=()=>{

    Alert.alert("Second Class Function Without Argument Called");

  }

  SecondClassFunctionWithArgument=(Value)=>{

    Alert.alert(Value);

  }

}

const styles = StyleSheet.create(
{
  MainContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: '#F5FCFF',
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0
  }

});

Upvotes: 4

Sarthak Mishra
Sarthak Mishra

Reputation: 168

Import the first class in the another class where you want to use the function defined in first class. In this case, We are using a function defined in class1 to class2.

export default class class1 extends React.Component{
constructor(props)
{
...
}

static function(){
...
}
}


**Now import it to another class i:e; class2**

import class1 from 'class1';

export default class class2 extends React.Component{

componentWillMount()
{
class1.function();
}



}

Upvotes: -1

Hussam Kurd
Hussam Kurd

Reputation: 9206

You have two options, either to use an object or use class name, let's start with object

class B {
  abc() {
    alert("Hello World");
  }
}
const b = new B();
export default b;

So when you call this file you can access the function abc like the following 

import b from './B.js';
class A extends Component {
    _onItemPressed(item){
        b.abc();
    }
...

The other way is to use class instead as follow 

class B{}
B.abc = function(){
    alert("Hello World");
}
module.exports = {
  functions: B
};

So when you call this file you can access the function abc like the following 

import b from './B.js';
class A extends Component {
    _onItemPressed(item){
        b.functions.abc();
    }
...

Note: B class should not be a component, you can use it as a helper class.

also, you can enhance the way you deal with the object using singleton pattern as I already mention in React native- Best way to create singleton pattern

UPDATE: If you insist to use component instead of a class function, you can call it through reference, as follows: 

export default class B extends Component {
  constructor(props) {
    super(props);
    this.abc = this.abc.bind(this);
   }
    abc(){
      alert('Hello World');
    }

    render() {
      return null
    }
}

now in A component you can call B by reference 

import B from "./B.js";
class A extends Component {
  _onItemPressed(item) {
    this._b.abc();
  }
  render() {
    return (
      <TouchableHighlight
        underlayColor={Colors.colors.lightgrey}
        style={{ padding: 15 }}
        onPress={this._onItemPressed.bind(this)}
      >
        <Text>Click Me !</Text>
        <B ref={ref => (this._b = ref)} />
      </TouchableHighlight>
    );
  }
}

Upvotes: 35

FPast
FPast

Reputation: 79

You have to create the parent with a constructor, access to super method for extend well the Component Class, then export the parent class and extend it on the Class A where you have access to this functions by this context of the class

export default class B extends Component {
    constructor(props){
      super(props);
    }
    abc(){
        alert('Hello World');
    }

    render() {
        return (
            <View>
                <Text>Welcome to React Native</Text>
            </View>
        );
    }
}






import B from './B.js';

export default class A extends B {

    _onItemPressed(item){
        this.abc();
    }

    render() {
        return (
            <TouchableHighlight
                underlayColor={Colors.colors.lightgrey}
                style={{padding: 15}}
                onPress={this._onItemPressed.bind(this)}>
                <Text>Click Me !</Text>
            </TouchableHighlight>
        );
    }
}

Upvotes: 4

tonny
tonny

Reputation: 419

I noticed you didn't export your class B. Try

class B extends Component {
   static abc(){
     alert('Hello World');
   }}
export default B

then import it in class A

import B from './B';

Let me know if this worked for you.

Upvotes: 7

pravdomil
pravdomil

Reputation: 2969

Make abc function static and export B class.

export default class B extends Component {

    static abc(){
      alert('Hello World');
    }
}

Upvotes: 0

Bruno Oliveira
Bruno Oliveira

Reputation: 131

You dont initiate your class, to solve this you need to change the B.abc() to new B().abc();

Upvotes: 8

Chiamaka Nwolisa
Chiamaka Nwolisa

Reputation: 971

I can see that you are not exporting the class B, you are only importing. Please try adding an export statement at bottom of the class B file like so export default B.

Hope this helps

Upvotes: 0

Related Questions