CODEWITHSUNDEEP
react-native
Mayur Kukadiya
Mayur Kukadiya

Reputation: 2747

How to Use method of functional component into class component in react native?

I am working in one react native project in which, I want to make common component for show loading indicator (for inform user to wait until process done.)

For that , I have make one js file that is common for my project Look like below :

Loader.JS : Common functional component in react native

import React, {useState} from 'react';
import {View, StyleSheet, ActivityIndicator} from 'react-native';
import {loaderColor} from './app.constants';

const Loader = () => {
  return (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color={loaderColor} />
    </View>
  );
};

const UseLoader = () => {
  const [visible, setVisible] = useState(true);
  const showLoader = () => setVisible(true);
  const hideLoader = () => setVisible(false);
  const loader = visible ? <Loader /> : null;
  return [loader, showLoader, hideLoader];
};

const styles = StyleSheet.create({
  loadingContainer: {
    backgroundColor: 'red',
    flex: 1,
    position: 'absolute',
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
    padding: 10,
  },
});

export default UseLoader;

And my class component is look like this : 

import React, {Component} from 'react';
import {View} from 'react-native';
// import {UseLoader} from '../UseLoader';
import '../UseLoader';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    [loader, showLoader , hideLoader] = UseLoader;
    this.callApi()
  }

  callApi() {
      ...
  }

  render() {
    return (
        <View style={styles.body}>
          {loader}
        </View>

    );
  }
}

I have tried to import functional component in both way But failed to use it.

Is any solution that can Import functional component in class component in react native ?

Upvotes: 0

Views: 1153

Answers (2)

Mian Jawad Ahmad
Mian Jawad Ahmad

Reputation: 168

you can use this.

You can add a ref to the child component:

<loader ref='loader' {...this.props} />

Then call the method on the child like this:

<Button onPress={this.refs.loader.myfunc} />

Same functionality, but instead of using a String to reference the component, we store it in a global variable instead.

<loader ref={loader => {this.loader = loader}} {...this.props} />
<Button onPress={this.loader.myfunc} />

Upvotes: 1

Dekuvjs
Dekuvjs

Reputation: 1

If you want to do it common, change the state on the class component, where you send if it is visible or not, like this:

    const Loader = (props) => {
if(props.show){
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={loaderColor} />
        </View>
      );
}else{
   return null;
}
    };

and in your class component

import React, {Component} from 'react';
import {View} from 'react-native';
// import {UseLoader} from '../UseLoader';
import '../UseLoader';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
       this.setState({showLoading:true});
    this.callApi()
  }

  callApi() {
      ...
  }

  render() {
    return (
        <View style={styles.body}>
          <loader show={this.state.showLoading} />
        </View>

    );
  }
}

Upvotes: 0

Related Questions