NativeModules.RNRadar is undefined error #350
Description
I'm creating a fairly complex Expo + React Native mobile app. I'm using the latest version of react-native-radar, performed all the steps mentioned in the documentation, got this error which said NativeModules.RNRadar is undefined.
I want to use the autocomplete as well as couple other features as well, and wrote this code: import { View, TouchableOpacity, Text } from 'react-native';
import React, { useEffect } from 'react';
import { useNavigation, useRouter } from 'expo-router';
import { Colors } from '../../constants/Colors';
import Ionicons from '@expo/vector-icons/Ionicons';
import Radar, { Autocomplete } from 'react-native-radar';
Radar.initialize(process.env.EXPO_PUBLIC_RADAR_API_KEY);
const SearchPlace = () => {
const navigation = useNavigation();
const router = useRouter();
useEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);
return (
<View
style={{
padding: 25,
paddingTop: 60,
backgroundColor: Colors.white,
height: '100%',
}}
>
<TouchableOpacity onPress={() => router.back()}>
<View style={{ marginTop: 10 }}>
<Text>hi</Text>
<Autocomplete options={{
debounceMs: 3000,
onSelection: (address) => {
console.log(address);
},
}}
/>
</View>
</View>
);
};
export default SearchPlace;
My app.json: {
"expo": {
"name": "ai_travel_planner_react_native",
"slug": "ai_travel_planner_react_native",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
"expo-router",
[
"react-native-radar",
{
"iosFraud": true,
"iosNSLocationWhenInUseUsageDescription": "Your location permission prompt",
"iosNSLocationAlwaysAndWhenInUseUsageDescription": "Your location permission prompt",
"iosBackgroundMode": true,
"androidFraud": true,
"androidBackgroundPermission": true,
"androidFineLocationPermission": true,
"addRadarSDKMotion":true
}
],
["@maplibre/maplibre-react-native"]
],
"experiments": {
"typedRoutes": true
}
}
}
This is my package.json as u can see I also tried installing the maplibre package but error was not resolved.
{
"name": "ai_travel_planner_react_native",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@maplibre/maplibre-react-native": "^10.0.0-alpha.10",
"@react-native-async-storage/async-storage": "^1.24.0",
"@react-navigation/native": "^6.0.2",
"expo": "^51.0.31",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"firebase": "^10.13.0",
"link": "^2.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "^0.74.5",
"react-native-gesture-handler": "~2.16.1",
"react-native-radar": "^3.17.0",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~51.0.3",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
"private": true
}
React native radar version 3.17.0 as you can see from the package.json.
Any help is appreciated!!