Implementing privy.io in Bare React Native Application

[waleedauthornate]

I have been trying for over a week to implement privy into my bare react native application - contacted with the privy support and was asked to follow the docs (for bare RN too) which I did but still its the same error

ERRORS:
ERROR TypeError: Cannot read property 'NativeModule' of undefined, js engine: hermes
at App (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:131217:26)
at RCTView
at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:63058:43)
at RCTView
at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:63058:43)
at AppContainer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:62931:25)
at prism(RootComponent) (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:116363:28)
ERROR TypeError: Cannot read property 'NativeModule' of undefined, js engine: hermes
at App (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:131217:26)
at RCTView
at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:63058:43)
at RCTView
at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:63058:43)
at AppContainer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:62931:25)
at prism(RootComponent) (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.prism&modulesOnly=false&runModule=true:116363:28)
ERROR TypeError: Cannot read property 'PrivyProvider' of undefined

This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in prism(RootComponent), js engine: hermes
ERROR TypeError: Cannot read property 'PrivyProvider' of undefined

This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in prism(RootComponent), js engine: hermes

IMPLEMENTATION:
import React, {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Landing from '@screens/landing/Landing';
import PrismArcade from '@screens/arcade/PrismArcade';
import Challenges from '@screens/challenges/Challenges';
import Lore from '@screens/lore/LoreLanding';
import CreateChallenge from '@screens/challenges/subscreens/CreateChallenge';
import ChallengeDescription from '@screens/challenges/subscreens/ChallengeDescription';
import ChallengeLeaderProfile from '@screens/challenges/subscreens/ChallengeLeaderProfile';
import Game from '@screens/arcade/subscreens/GameScreen';
import ContextProviders from '@/utils/ContextProviders';
import BootSplash from 'react-native-bootsplash';
import {PrivyProvider} from '@privy-io/expo';
export default function App(): React.JSX.Element {
const Stack = createNativeStackNavigator();
useEffect(() => {
const init = async () => {
try {
} catch (error) {
console.error('Initialization error:', error);
}
};
init().finally(async () => {
try {
await BootSplash.hide({fade: true});
} catch (error) {
console.error('Error hiding BootSplash:', error);
}
});
}, []);

return (
<PrivyProvider
appId="rth0sdfg9sd8f7gsd0f9g8ds7fg0d98dsf" // changed
clientId="client-WKJhb897Yn87HNhMOh98ynIuhnOINUIUY098n09"> // changed


<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: 'white',
headerBackTitleVisible: false,
}}>
<Stack.Screen
name="Home"
component={Landing}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
<Stack.Screen
name="Prism Arcade"
component={PrismArcade}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
<Stack.Screen
name="Game"
component={Game}
options={{
headerShown: false,
orientation: 'landscape',
}}
/>
<Stack.Screen
name="Challenges"
component={Challenges}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
<Stack.Screen
name="Create Challenge"
component={CreateChallenge}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
<Stack.Screen
name="Challenge Description"
component={ChallengeDescription}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
<Stack.Screen
name="Leader Profile"
component={ChallengeLeaderProfile}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
<Stack.Screen
name="Lore"
component={Lore}
options={{
headerShown: false,
orientation: 'portrait',
}}
/>
</Stack.Navigator>



);
}

[waleedauthornate]