Question 33411 in React native Question posted in
The official React Native documentation can be found here.

how to call provider function in child with react native?

I have two components. One is the provider and the second is a child. Now I want to use the function of provider in the child but with my current approach, it says that function is undefined. Can you see what I’m doing wrong?
Here is the code below.

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

const MyProvider = (props) => {
  const { children } = props;
  const handlePress = () => {
    console.log("Provider component function called!");
  };
  return (
    <View>
      {children}
    </View>
  );
};

const NoLocationAccess = (props) => {
  const { handlePress } = props;
  console.log("handlePress : ",handlePress)
  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>I am the child component</Text>
    </TouchableOpacity>
  );
};


export default NoLocationAccess;

I have tried provider.wrapper. that made things more problematic.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It took me a while. but I have done this high-order component. this idea came to mind with the redux connect method. so took that approach and created a higher-order component. that works flawlessly. Here is the solution.

    High-Order Component.

    import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

  
  const MyProvider = (props) => {
    class GPSComponent extends React.Component {
  
        componentDidMount() {
        }
    
        requestPermissions= async()=> {
            console.log("i is called",this.props.userCurrentLocation)
            
        }
    
        render() {
          return <WrappedComponent 
                requestPermissions={this.requestPermissions}
                {...this} 
                />;
        }
      }
    
      return GPSComponent;
    };

    child component.

    import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import MyProvider from "./MyProvider"

const NoLocationAccess = (prop) => {
  const { requestPermissions } = prop;
  console.log("requestPermissions ",requestPermissions)

  return (
    <TouchableOpacity onPress={requestPermissions}>
      <Text>I am the child component</Text>
    </TouchableOpacity>
  );
};

export default MyProvider(NoLocationAccess);

  2. 0

    To call a function, that is defined in the provider, from the child you need too pass it down as a prop.

    Here the modified Code:

    import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

const MyProvider = (props) => {
  const { children } = props;
  const handlePress = () => {
    console.log("Provider component function called!");
  };
  return (
    <View>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, { handlePress });
      })}
    </View>
  );
};

const NoLocationAccess = (props) => {
  const { handlePress } = props;
  console.log("handlePress : ",handlePress)
  return (
    <TouchableOpacity onPress={() => handlePress()}>
      <Text>I am the child component</Text>
    </TouchableOpacity>
  );
};

export default NoLocationAccess;

    Try it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search