Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[AmraneAchraf1]

ERROR Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

• expo 51
• expo router

[AmraneAchraf1]

const CopilotText = walkthroughable(Text);

const HomeScreen = () => { const { start } = useCopilot(); const ref = useRef(null);

return ( <View style={styles.container}> <CopilotStep text="This is a hello world example!" order={1} name="hello" > <CopilotText >Hello world!</CopilotText> </CopilotStep> <Button title="Start" onPress={() => start()} /> </View> ); };

export default function TabOneScreen() { return ( <CopilotProvider> <HomeScreen /> </CopilotProvider> ); }

[surrenderios]

Use React Native inner components, for example, Text, Image, etc.

If you use your custom component, you should recursively pass copilot to children.

See the example: GitHub Issue

[surrenderios]

const CopilotText = walkthroughable(Text);

const HomeScreen = () => { const { start } = useCopilot(); const ref = useRef(null);

return ( Hello world! <Button title="Start" onPress={() => start()} /> ); };

export default function TabOneScreen() { return ( ); }

example: https://github.com/mohebifar/react-native-copilot/issues/304