{"id":4184,"url":"https://github.com/nesterapp/react-native-streetview","last_synced_at":"2025-08-04T00:32:30.546Z","repository":{"id":45194011,"uuid":"89865088","full_name":"nesterapp/react-native-streetview","owner":"nesterapp","description":"React Native Google's Panorama/StreetView component for iOS and Android.","archived":false,"fork":false,"pushed_at":"2025-05-04T02:49:53.000Z","size":13249,"stargazers_count":101,"open_issues_count":3,"forks_count":52,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-08T15:51:39.537Z","etag":null,"topics":["google","maps","mobile","panorama","react-native","react-native-streetview","streetview"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-streetview","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nesterapp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-04-30T17:14:37.000Z","updated_at":"2025-06-13T14:05:08.000Z","dependencies_parsed_at":"2024-01-08T01:02:17.622Z","dependency_job_id":"ae9c2386-97de-4a2f-b9bf-df9d3dad23dc","html_url":"https://github.com/nesterapp/react-native-streetview","commit_stats":{"total_commits":49,"total_committers":15,"mean_commits":"3.2666666666666666","dds":0.7755102040816326,"last_synced_commit":"fedfd5ba772c713d08ea758a376140e2afc2f5cd"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/nesterapp/react-native-streetview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterapp%2Freact-native-streetview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterapp%2Freact-native-streetview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterapp%2Freact-native-streetview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterapp%2Freact-native-streetview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nesterapp","download_url":"https://codeload.github.com/nesterapp/react-native-streetview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nesterapp%2Freact-native-streetview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268634064,"owners_count":24281896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google","maps","mobile","panorama","react-native","react-native-streetview","streetview"],"created_at":"2024-01-05T20:17:03.771Z","updated_at":"2025-08-04T00:32:30.537Z","avatar_url":"https://github.com/nesterapp.png","language":"Java","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# react-native-streetview [![npm version](https://img.shields.io/npm/v/react-native-streetview.svg?style=flat)](https://www.npmjs.com/package/react-native-streetview)\n\nGoogle's StreetView component for React Native  \n(iOS and Android supported)\n\n## Features\n\n- 🌐 Cross-platform Google Street View integration (iOS \u0026 Android)\n- 🎥 Customizable camera position and point of view (tilt, bearing, zoom)\n- 👆 Gesture controls for user interaction\n- 🔍 Configurable search radius to find nearby panoramas\n- 🏞️ Outdoor-only panorama option\n- 📊 Event callbacks for errors, location changes, and camera movements (POV)\n- ✅ Compatible with React Native 0.79+ and Fabric architecture\n\n## Preview\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg width=\"260\" src=\"assets/streetview-demo.gif\" alt=\"StreetView Demo\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Installation\n\n```sh\nyarn add react-native-streetview\n# or using npm\nnpm install --save react-native-streetview\n```\n\n### API Key Setup\n1. Generate an API Key at https://console.developers.google.com/apis/credentials\n2. Make sure Google Maps API is enabled in the Google Cloud Console\n\n### iOS\n\n1. Install GoogleMaps SDK for iOS using CocoaPods:\n   - Add to your Podfile: `pod 'GoogleMaps'`\n   - Run `pod install`\n   - For detailed instructions, see: https://developers.google.com/maps/documentation/ios-sdk/config\n\n2. Add your API key to AppDelegate:\n\n```swift\nimport GoogleMaps\n\nfunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -\u003e Bool {\n    GMSServices.provideAPIKey(\"YOUR-API-KEY\")\n    // ...existing code...\n    return true\n}\n```\n\n### Android\n\n1. Install Google Play services:\n   - Open Android Studio's SDK Manager\n   - Select and install \"Google Play Services\" from the SDK Tools tab\n   - For detailed instructions, see: https://developers.google.com/maps/documentation/android-sdk/start\n\n2. Add the API key to your app's Manifest file (`android\\app\\src\\main\\AndroidManifest.xml`):\n\n   ```xml\n   \u003capplication\u003e\n     \u003c!-- You will only need to add this meta-data tag, but make sure it's a child of application --\u003e\n     \u003cmeta-data\n       android:name=\"com.google.android.geo.API_KEY\"\n       android:value=\"YOUR-API-KEY\"/\u003e\n   \u003c/application\u003e\n   ```\n\n## Usage\n\n### Basic Implementation\n\n```javascript\nimport StreetView from 'react-native-streetview';\nimport { View, StyleSheet } from 'react-native';\n\nconst YourComponent = () =\u003e (\n  \u003cView style={styles.container}\u003e\n    \u003cStreetView\n      style={styles.streetView}\n      allGesturesEnabled={true}\n      coordinate={{\n        latitude: 37.7749,\n        longitude: -122.4194,\n        radius: 50  // Search radius in meters\n      }}\n    /\u003e\n  \u003c/View\u003e\n);\n```\n\n### More Examples\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eWith Camera Position (POV)\u003c/b\u003e\u003c/summary\u003e\n\n```javascript\n\u003cStreetView\n  style={styles.streetView}\n  coordinate={{\n    latitude: 37.7749,\n    longitude: -122.4194,\n    radius: 50\n  }}\n  pov={{\n    tilt: 30,     // Camera tilt angle in degrees (range: 0-90)\n    bearing: 90,  // Camera compass direction (range: 0-360, where 0=North, 90=East)\n    zoom: 1       // Camera zoom level (range: 0-5)\n  }}\n/\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eHandling Events\u003c/b\u003e\u003c/summary\u003e\n\n```javascript\n\u003cStreetView\n  style={styles.streetView}\n  coordinate={{\n    latitude: 37.7749,\n    longitude: -122.4194,\n    radius: 50\n  }}\n  onError={(errorEvent) =\u003e {\n    // Access detailed error information\n    const errorData = errorEvent.nativeEvent;\n    console.log('Street View error:', errorData.message);\n    // Access additional context for debugging\n    if (errorData.outdoorOnly) {\n      console.log('Try disabling outdoorOnly or increasing radius');\n    }\n    // For advanced debugging:\n    console.log('Error details:', {\n      location: `${errorData.latitude}, ${errorData.longitude}`,\n      radius: errorData.radius,\n      outdoorOnly: errorData.outdoorOnly\n    });\n  }}\n  onPanoramaChange={(event) =\u003e {\n    // When user navigates to a new panorama location\n    const { position } = event.nativeEvent;\n    const { panoId } = event.nativeEvent;\n    console.log('Panorama changed to new location:', {\n      latitude: position.latitude,\n      longitude: position.longitude\n    });\n    // On iOS, may include additional Street View metadata\n    if (panoId) {\n      console.log('Panorama ID:', panoId);\n    }\n  }}\n  onPovChange={(event) =\u003e {\n    // When camera orientation changes\n    const povData = event.nativeEvent;\n    console.log('Camera view changed:');\n    console.log('Bearing (direction):', povData.bearing);\n    console.log('Tilt (angle):', povData.tilt);\n    console.log('Zoom level:', povData.zoom);\n    \n    // * Only triggered when changes exceed threshold values\n    // to avoid excessive updates during smooth camera movements\n  }}\n/\u003e\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eOutdoor Only Panoramas\u003c/b\u003e\u003c/summary\u003e\n\n```javascript\n\u003cStreetView\n  style={styles.streetView}\n  coordinate={{\n    latitude: 37.7749,\n    longitude: -122.4194,\n    radius: 100\n  }}\n  outdoorOnly={true}\n/\u003e\n```\n\u003c/details\u003e\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| **Location** |  |  |  |\n| `coordinate` | Object | `null` | Specify the latitude and longitude of the streetview location |\n| `coordinate.latitude` | Number | `0` | Latitude |\n| `coordinate.longitude` | Number | `0` | Longitude |\n| `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. |\n| **Display Options** |  |  |  |\n| `outdoorOnly` | Boolean | `false` | When true, limits Street View searches to outdoor panoramas only |\n| `streetNamesHidden` | Boolean | `false` | Whether to hide street names overlay |\n| **Camera** |  |  |  |\n| `pov` | Object | `null` | Camera point of view |\n| `pov.tilt` | Number | `0` | Camera tilt angle in degrees (0-90) |\n| `pov.bearing` | Number | `0` | Camera compass direction (0-360). 0 = north, 90 = east |\n| `pov.zoom` | Number | `0` | Camera zoom level (0-5) |\n| **Gesture Controls** |  |  |  |\n| `allGesturesEnabled` | Boolean | `true` | Whether to enable all user gestures (panning, zooming, and navigation) |\n| `orientationGestures` | Boolean | `true` | Whether to enable panning gestures to change camera orientation |\n| `zoomGestures` | Boolean | `true` | Whether to enable pinch gestures to zoom the camera |\n| `navigationGestures` | Boolean | `true` | Whether to enable tap gestures to navigate between panoramas |\n| `navigationLinksHidden` | Boolean | `false` | Whether to hide the navigation links (iOS only) |\n| **Events** |  |  |  |\n| `onError` | Function | `null` | Callback when panorama cannot be found or errors occur |\n| `onPanoramaChange` | Function | `null` | Callback when the panorama view changes to a new location |\n| `onPovChange` | Function | `null` | Callback when the Point of View (camera orientation) changes |\n\n## Troubleshooting\n\n### No panoramas found\n- Ensure coordinates are in an area covered by Google Street View\n- Try increasing the search radius\n- Check if your API key has StreetView API enabled\n\n### Black screen issues\n- Verify your API key is correctly added to both platforms\n- For React Navigation users, add margins to the StreetView component as mentioned in the usage notes\n- Ensure the component has a proper size\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## About\n\nThis component was originally developed for [Nester](http://nester.co.il), a home rental application requiring Google Street View integration.\n\n## Contact \u0026 Support\n\nFor questions, issues, or feature requests, please contact:\n\n- Amit Palomo - [apalgm@gmail.com](mailto:apalgm@gmail.com)\n- [Open an issue](https://github.com/nesterapp/react-native-streetview/issues)\n\nLicense\n--------\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnesterapp%2Freact-native-streetview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnesterapp%2Freact-native-streetview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnesterapp%2Freact-native-streetview/lists"}