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

React Native supports multiple classes format like we used in other programming languages like Java, C++, PHP etc. So in this tutorial we would going to create a react native application with multiple(2) classes and Call Another Class Function From Default Class on button onPress event.

Contents in this project Call Another Class Function From Default Class :

1. Import StyleSheet, View, Alert, Platform and Button component in your project.

2. Create another class named as Second and extends component to it. This class would be our another class. Now we would create 2 function in this class one function without argument and second function with argument. We would also print the Sample text in these functions using Alert message.

3. Create constructor in your project’s main class. For example my default class name is MyProject, so i am creating the constructor inside MyProject class. Inside this constructor we would create object of Second class named as Obj. Object is used to call the function from another class.

4. Create 2 Functions in your default class named as CallFunction_1 and CallFunction_2. We are calling the another class function using our main class functions using their object.

5. Create Root View with 2 Button component inside render’s return block.

6. Create Style for Root View.

7. Complete source code for App.js File :

Screenshots in Android device :

Call Another Class Function

Screenshot in iOS device :

16 Comments

  1. How to call another function inside a class (1 default class & 2 function)?
    can you show me how?

    • Andy please explain your question more briefly ?

      • I want to show Alert Dialog (“One & Two”) on pressed Button, but i get an error (“Can’t find variable: Function_2”).
        this is my code:

        import React, { Component } from ‘react’;
        import {View, Alert, Button } from ‘react-native’;

        export default class MyProject extends Component {

        constructor(props) {
        super(props)
        }

        Function_1=()=>{
        Function_2();
        Alert.alert(“One and “+numb)
        };

        Function_2=()=>{
        numb = “Two”
        return numb
        }

        render() {
        return (

        );
        }
        }

  2. hii sir i try to create but network status not update
    i create NetworkUtils.js file paste your internetconnection code

    import React, {Component} from ‘react’;

    import { StyleSheet, Text, View, NetInfo } from ‘react-native’;

    export default class NetworkUtils extends Component{

    constructor(){

    super();

    this.state={

    connection_Status : “”

    }

    }

    componentDidMount() {

    NetInfo.isConnected.addEventListener(
    ‘connectionChange’,
    this._handleConnectivityChange

    );

    NetInfo.isConnected.fetch().done((isConnected) => {

    if(isConnected == true)
    {
    this.setState({connection_Status : “Online”})
    }
    else
    {
    this.setState({connection_Status : “Offline”})
    }

    });
    }

    componentWillUnmount() {

    NetInfo.isConnected.removeEventListener(
    ‘connectionChange’,
    this._handleConnectivityChange

    );

    }

    _handleConnectivityChange = (isConnected) => {

    if(isConnected == true)
    {
    this.setState({connection_Status : “Online”})
    }
    else
    {
    this.setState({connection_Status : “Offline”})
    }
    };

    netConnection = () => {
    if(this.state.connection_Status==’Online’){

    return this.state.connection_Status
    }
    return this.state.connection_Status
    }

    render() {

    return (

    You are { this.state.connection_Status }

    );

    }

    }

    i create netConnection function and create object i main class
    Obj = new NetworkUtils();
    console.log( “network”,Obj.netConnection())
    but its return me only ”network” string not return this.state.connection_Status value because componentDidMount not start
    please do some thing i need this in my project

    • Rahul first of you just have to create class using class keyword, You are putting the export default wrong in this case. export default is used to call the default class in react native. Now in your NetworkUtils.js class you have to create a function and return the online and offline status. Then in your main app class you have to create the object of this class and call the function from NetworkUtils.js class. If you NetworkUtils.js class is in another separated JS file then you also have to import this class in your app main class.

  3. hii. , sir its my request can you please make a tutorial. i try lost of the time but nothing work .please please please help me .

    • Rahul tutorial on which topic ? Can you please tell me ?

      • sir, how to create global function to check internet connection , which tutorial sir you create for check internet connection it only for main class , i ask you , when i hit any api in any class i need to check internet connection so that i don’t want to the write same code to check internet connection in every class ,
        how can i check internet connection status before to hit api in every class , I hope you understand my problem . please sir help me

  4. Now i use apisauce to handle internet connection error

  5. Excellent and simple. Well done 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *