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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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();
}
}