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

yarn add react-native-streetview
# or using npm
npm 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 pods:

   cd ios && pod install

   GoogleMaps is declared as a dependency of react-native-streetview and will be installed automatically — you do not need to add pod 'GoogleMaps' to your Podfile yourself.

2. Add your API key to AppDelegate:

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

iOS — Using Swift Package Manager for GoogleMaps (optional)

Requires Xcode 16+ and an iOS 16+ deployment target — these are constraints imposed by the official googlemaps/ios-maps-sdk Swift package.

If you prefer to manage the GoogleMaps SDK via Swift Package Manager (for example because Google is phasing out CocoaPods distribution of its SDKs), you can opt out of the CocoaPods copy of GoogleMaps that this library normally pulls in. This is a one-time setup — afterwards you keep running pod install exactly as usual.

1. Add GoogleMaps as a Swift Package in your app

   In Xcode, open your app's .xcworkspace and choose File → Add Package Dependencies…. Enter:

   https://github.com/googlemaps/ios-maps-sdk

   Add the GoogleMaps product to your app target.

2. Remove any previous CocoaPods / manual GoogleMaps install

   Make sure your app target's Frameworks, Libraries, and Embedded Content contains no leftover GoogleMaps, GoogleMapsBase, GoogleMapsCore, or GoogleMapsM4B frameworks from earlier installs. As of GoogleMaps 9.2.0 the SDK ships as a single consolidated GoogleMaps.xcframework.

3. Tell react-native-streetview to skip the GoogleMaps pod

   Add the following line at the top of ios/Podfile (outside any target block):

   $RNStreetViewUseSPMGoogleMaps = true

   That's it. This is a permanent, committed change in your Podfile; you do not need to set any environment variables or change how you invoke pod install. On every subsequent pod install, the library's podspec reads this flag, skips adding GoogleMaps as a CocoaPod, and wires the react-native-streetview Pods target so it can compile and link against the GoogleMaps.xcframework provided by SPM.

4. Run pod install as usual, then build.

If your SPM packages live in a non-default location and the Pods target fails to find <GoogleMaps/GoogleMaps.h>, extend the library's FRAMEWORK_SEARCH_PATHS from your Podfile's post_install hook — for example:

post_install do |installer|
  # ...existing react-native post_install code...

  installer.pods_project.targets.each do |target|
    next unless target.name == 'react-native-streetview'
    target.build_configurations.each do |config|
      config.build_settings['FRAMEWORK_SEARCH_PATHS'] ||= ['$(inherited)']
      config.build_settings['FRAMEWORK_SEARCH_PATHS'] << '"$(BUILD_DIR)/../../SourcePackages/artifacts/ios-maps-sdk/GoogleMaps"'
    end
  end
end

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):

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

Usage

Basic Implementation

import StreetView from 'react-native-streetview';
import { View, StyleSheet } from 'react-native';

const YourComponent = () => (
  <View style={styles.container}>
    <StreetView
      style={styles.streetView}
      allGesturesEnabled={true}
      coordinate={{
        latitude: 37.7749,
        longitude: -122.4194,
        radius: 50  // Search radius in meters
      }}
    />
  </View>
);

More Examples

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

<StreetView
  style={styles.streetView}
  coordinate={{
    latitude: 37.7749,
    longitude: -122.4194,
    radius: 50
  }}
  onError={(errorEvent) => {
    // Access detailed error information
    const errorData = errorEvent.nativeEvent;
    console.log('Street View error:', errorData.message);
    // Access additional context for debugging
    if (errorData.outdoorOnly) {
      console.log('Try disabling outdoorOnly or increasing radius');
    }
    // For advanced debugging:
    console.log('Error details:', {
      location: `${errorData.latitude}, ${errorData.longitude}`,
      radius: errorData.radius,
      outdoorOnly: errorData.outdoorOnly
    });
  }}
  onPanoramaChange={(event) => {
    // When user navigates to a new panorama location
    const { position } = event.nativeEvent;
    const { panoId } = event.nativeEvent;
    console.log('Panorama changed to new location:', {
      latitude: position.latitude,
      longitude: position.longitude
    });
    // On iOS, may include additional Street View metadata
    if (panoId) {
      console.log('Panorama ID:', panoId);
    }
  }}
  onPovChange={(event) => {
    // When camera orientation changes
    const povData = event.nativeEvent;
    console.log('Camera view changed:');
    console.log('Bearing (direction):', povData.bearing);
    console.log('Tilt (angle):', povData.tilt);
    console.log('Zoom level:', povData.zoom);
    
    // * Only triggered when changes exceed threshold values
    // to avoid excessive updates during smooth camera movements
  }}
/>

<StreetView
  style={styles.streetView}
  coordinate={{
    latitude: 37.7749,
    longitude: -122.4194,
    radius: 100
  }}
  outdoorOnly={true}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | Location | | | | | coordinate | Object | null | Specify the latitude and longitude of the streetview location | | coordinate.latitude | Number | 0 | Latitude | | coordinate.longitude | Number | 0 | Longitude | | coordinate.radius | Number | 50 | Search radius in meters around the specified location. If no panorama is found at the exact coordinates, Google Street View will search for the closest panorama within this radius. | | Display Options | | | | | outdoorOnly | Boolean | false | When true, limits Street View searches to outdoor panoramas only | | streetNamesHidden | Boolean | false | Whether to hide street names overlay | | Camera | | | | | pov | Object | null | Camera point of view | | pov.tilt | Number | 0 | Camera tilt angle in degrees (0-90) | | pov.bearing | Number | 0 | Camera compass direction (0-360). 0 = north, 90 = east | | pov.zoom | Number | 0 | Camera zoom level (0-5) | | Gesture Controls | | | | | allGesturesEnabled | Boolean | true | Whether to enable all user gestures (panning, zooming, and navigation) | | orientationGestures | Boolean | true | Whether to enable panning gestures to change camera orientation | | zoomGestures | Boolean | true | Whether to enable pinch gestures to zoom the camera | | navigationGestures | Boolean | true | Whether to enable tap gestures to navigate between panoramas | | navigationLinksHidden | Boolean | false | Whether to hide the navigation links (iOS only) | | Events | | | | | onError | Function | null | Callback when panorama cannot be found or errors occur | | onPanoramaChange | Function | null | Callback when the panorama view changes to a new location | | onPovChange | Function | null | Callback when the Point of View (camera orientation) changes |

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 - [email protected]
• Open an issue

License

MIT