googlemaps / googlemaps/react-native-navigation-sdk
[Bug]: Android MapView and NavigationView render as a blank screen
- Dominant language
- TypeScript
- Stars
- 227
- Forks
- 38
- Avg merge
- 5d 7h
- Merged PRs (30d)
- 10
Description
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Description of the bug
On Android both MapView and NavigationView render as a completely blank dark screen.
The native SDK appears to initialize correctly. The callbacks are triggered and navigationController.init() returns OK but nothing is drawn on the screen.
The same issue also happens with the official example app from this repository on the same physical Android device.
### iOS Platform
Not verified
### Android Platform
Affected
### React Native version
0.86.0
### React version
19.2.3
### Package version
0.16.3
### Native SDK versions
- [x] I haven't changed the version of the native SDKs
### React Native Doctor Output
✔ Node.js: Version (v22.23.2) is compatible.
✔ Lockfiles: No conflicts.
✔ App Config: Valid config for "doldfind-app" (SDK 57.0.0).
⚠ Dependencies: Compatibility issues:
- React Native "^0.86.0" doesn't match recommended range "^0.81.0 || ~0.81.0" for SDK 57.
──────────────────────────────────────────────────
Audit passed with warnings.
### Steps to reproduce
1. Create an Android React Native project using React Native 0.86.
2. Install @googlemaps/react-native-navigation-sdk 0.16.3.
3. Configure the required Google Maps setup.
4. Add NavigationView with flex: 1.
5. Run the app on a physical Android device.
6. Wait for onMapReady.
7. Initialize the navigation controller.
8. Observe that the map remains completely blank.
### Expected vs Actual Behavior
Expected:
The Google map should be visible inside NavigationView / MapView.
Actual:
The view is completely blank/dark.
The native callbacks still work:
NAV CONTROLLER CREATED
MAP CONTROLLER CREATED
MAP READY
TERMS: true
NAV STATUS: ok
Google requests also reach Google and return without errors.
There are no relevant ReactNativeJS, FATAL EXCEPTION or AndroidRuntime errors in logcat.
I also tested the official example app from this repository on the same physical device. The example app also opens to a blank/dark screen.
### Code Sample
```tsx
import { View } from "react-native";
import {
NavigationView,
NavigationSessionStatus,
useNavigation,
} from "@googlemaps/react-native-navigation-sdk";
export default function MapScreen() {
const { navigationController } = useNavigation();
const onMapReady = async () => {
console.log("MAP READY");
const termsAccepted =
await navigationController.showTermsAndConditionsDialog();
console.log("TERMS:", termsAccepted);
if (!termsAccepted) return;
const status = await navigationController.init();
console.log("NAV STATUS:", status);
};
return (
);
}
```
### Additional Context
I have tried the same app on different physical devices and emulators but the issue still occur.
Contributor guide
Assessment
This issue has not been assessed yet.