react-native-streetview

Google's StreetView component for React Native
(iOS and Android supported)

Features

• 🌐 Cross-platform Google Street View integration (iOS & Android)
• 🎥 Customizable camera position and point of view (tilt, bearing, zoom)
• 👆 Gesture controls for user interaction
• 🔍 Configurable search radius to find nearby panoramas
• 🏞️ Outdoor-only panorama option
• 📊 Event callbacks for errors, location changes, and camera movements (POV)
• ✅ Compatible with React Native 0.79+ and Fabric architecture

Preview

Installation

1yarn add react-native-streetview
2# or using npm
3npm install --save react-native-streetview

API Key Setup

1. Generate an API Key at https://console.developers.google.com/apis/credentials
2. Make sure Google Maps API is enabled in the Google Cloud Console

iOS

1. Install GoogleMaps SDK for iOS using CocoaPods:

   • Add to your Podfile: pod 'GoogleMaps'
   • Run pod install
   • For detailed instructions, see: https://developers.google.com/maps/documentation/ios-sdk/config

2. Add your API key to AppDelegate:

1import GoogleMaps
2
3func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
4    GMSServices.provideAPIKey("YOUR-API-KEY")
5    // ...existing code...
6    return true
7}

Android

1. Install Google Play services:

   • Open Android Studio's SDK Manager
   • Select and install "Google Play Services" from the SDK Tools tab
   • For detailed instructions, see: https://developers.google.com/maps/documentation/android-sdk/start

2. Add the API key to your app's Manifest file (android\app\src\main\AndroidManifest.xml):

   1<application>
   2  <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   3  <meta-data
   4    android:name="com.google.android.geo.API_KEY"
   5    android:value="YOUR-API-KEY"/>
   6</application>

Usage

Basic Implementation

1import StreetView from 'react-native-streetview';
2import { View, StyleSheet } from 'react-native';
3
4const YourComponent = () => (
5  <View style={styles.container}>
6    <StreetView
7      style={styles.streetView}
8      allGesturesEnabled={true}
9      coordinate={{
10        latitude: 37.7749,
11        longitude: -122.4194,
12        radius: 50  // Search radius in meters
13      }}
14    />
15  </View>
16);

More Examples

1<StreetView
2  style={styles.streetView}
3  coordinate={{
4    latitude: 37.7749,
5    longitude: -122.4194,
6    radius: 50
7  }}
8  pov={{
9    tilt: 30,     // Camera tilt angle in degrees (range: 0-90)
10    bearing: 90,  // Camera compass direction (range: 0-360, where 0=North, 90=East)
11    zoom: 1       // Camera zoom level (range: 0-5)
12  }}
13/>

1<StreetView
2  style={styles.streetView}
3  coordinate={{
4    latitude: 37.7749,
5    longitude: -122.4194,
6    radius: 50
7  }}
8  onError={(errorEvent) => {
9    // Access detailed error information
10    const errorData = errorEvent.nativeEvent;
11    console.log('Street View error:', errorData.message);
12    // Access additional context for debugging
13    if (errorData.outdoorOnly) {
14      console.log('Try disabling outdoorOnly or increasing radius');
15    }
16    // For advanced debugging:
17    console.log('Error details:', {
18      location: `${errorData.latitude}, ${errorData.longitude}`,
19      radius: errorData.radius,
20      outdoorOnly: errorData.outdoorOnly
21    });
22  }}
23  onPanoramaChange={(event) => {
24    // When user navigates to a new panorama location
25    const { position } = event.nativeEvent;
26    const { panoId } = event.nativeEvent;
27    console.log('Panorama changed to new location:', {
28      latitude: position.latitude,
29      longitude: position.longitude
30    });
31    // On iOS, may include additional Street View metadata
32    if (panoId) {
33      console.log('Panorama ID:', panoId);
34    }
35  }}
36  onPovChange={(event) => {
37    // When camera orientation changes
38    const povData = event.nativeEvent;
39    console.log('Camera view changed:');
40    console.log('Bearing (direction):', povData.bearing);
41    console.log('Tilt (angle):', povData.tilt);
42    console.log('Zoom level:', povData.zoom);
43    
44    // * Only triggered when changes exceed threshold values
45    // to avoid excessive updates during smooth camera movements
46  }}
47/>

1<StreetView
2  style={styles.streetView}
3  coordinate={{
4    latitude: 37.7749,
5    longitude: -122.4194,
6    radius: 100
7  }}
8  outdoorOnly={true}
9/>

Props

Troubleshooting

No panoramas found

• Ensure coordinates are in an area covered by Google Street View
• Try increasing the search radius
• Check if your API key has StreetView API enabled

Black screen issues

• Verify your API key is correctly added to both platforms
• For React Navigation users, add margins to the StreetView component as mentioned in the usage notes
• Ensure the component has a proper size

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

About

This component was originally developed for Nester, a home rental application requiring Google Street View integration.

Contact & Support

For questions, issues, or feature requests, please contact:

• Amit Palomo - apalgm@gmail.com
• Open an issue

License

MIT