how to call provider function in child with react native?-CodePudding

I have two components. One is provider and second is child. Now i want to use the function of provider in child but with my current approach it says that function is undefined. Can you see what i'm doing wrong. Here is 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 .

CodePudding user response：

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

CodePudding user response：

It took me while. but i have done this high order component. this idea came in mind with redux connect method. so took that approach and created higher order component. that works flawless. Here is 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);