googlemaps / googlemaps/react-native-navigation-sdk

[Bug]: Android MapView and NavigationView render as a blank screen

Open
#639 5 comments 1 reaction 1 assignee Claimed by @illuminati1911 View on GitHub
triage me type: bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.