Need copilot step for multiple element on custom component

[vijayhfs]

From the documentation , we can add copilot step for custom components like :

import { copilot, CopilotStep } from 'react-native-copilot';
const CustomComponent = ({ copilot }) => <View {...copilot}><Text>Hello world!</Text></View>;

class HomeScreen {
  render() {
    return (
      <View>
        <CopilotStep text="This is a hello world example!" order={1} name="hello">
          <CustomComponent />
        </CopilotStep>
      </View>
    );
  }
}

but what if My custom component is : const CustomComponent = ({ copilot }) => <View {...copilot}><Text>Hello world!</Text><View {...copilot2}>some view</View></View>;

so how should I implement copilot2 here ?

[ManojTheProDev]

Copilot works on event, so doing something like {...copilot} may not be possible. Try doing it other way round by declaring another component and wrap your component in CopilotStep with order number of step and everything will work fine.

Just a psuedo code to give more clarity: <CopilotStep text="This is a second world example!" order={1} name="fgdvf"> <CustomComponent2 /> </CopilotStep>

where CustomComponent2 may contain something like this: export const CustomComponent2 = ({ copilot }) => { return ( <View {...copilot}> <Text> Hey Buddy! </Text> </View> ) }

[rajitha302]

@vijayhfs did you find any solution to this? stuck with the same scenario.

[tanzeel152]

any solution?