nesterapp / react-native-streetview Goto Github PK
View Code? Open in Web Editor NEWReact Native Google's Panorama/StreetView component for iOS and Android.
License: MIT License
React Native Google's Panorama/StreetView component for iOS and Android.
License: MIT License
hi guys. i use this repository on my mobile applicaton. In my application i want to filter panorama by copyright. In some words i want to take only the panorame uploaded by google and not by common users. On google api there is:
StreetViewPanoramaData interface
google.maps.StreetViewPanoramaData interface
Properties
copyright | Type: string Specifies the copyright text for this panorama.
imageDate | Type: string Specifies the year and month in which the imagery in this panorama was acquired. The date string is in the form YYYY-MM.
links | Type: Array Specifies the navigational links to adjacent panoramas.
location | Type: StreetViewLocation Specifies the location meta-data for this panorama.
tiles | Type: StreetViewTileData Specifies the custom tiles for this panorama.
how can implement that ?
@import GoogleMaps;
1 error generated.
I'm struggling with this issue, tried so many solutions and nothing worked. I have installed google maps, tried to include GoogleMaps header by different ways but it still doesn't build
Notes:
- Tried to change Framework search paths multiple times
- Tried to import <GoogleMaps.h> && <GoogleMaps/GoogleMaps.h>
- Tried to clean the project and rebuild
- Tried to delete Pod.lock && Pod folder + clean + reinstall pods
Pod file:
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
target 'x' do
# Pods for x
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
pod 'React-DevSupport', :path => '../node_modules/react-native/React'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'PanoramaView', :path => '../node_modules/@lightbase/react-native-panorama-view'
pod 'react-native-google-maps', :path => '../node_modules/react-native-maps'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
source 'https://github.com/CocoaPods/Specs.git'
pod 'GoogleMaps'
pod 'GooglePlaces'
pod 'react-native-streetview', :path => '../node_modules/react-native-streetview'
target 'x-Tests' do
inherit! :search_paths
# Pods for testing
end
use_native_modules!
end
target 'x-tvOS' do
# Pods for x-tvOS
target 'x-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
end
Any solution?
First of all, thank you for providing this library!
Is the project licensed under the MIT license as the the package.json says?
Hey, I am trying to integrate the streetview component in my react native app, it is working fine on iOS but seems to crash whenever I try to open it on android. I've tried to implement it from scratch to confirm whether or not I missed something but I'm still facing the same issue.
Here are my project configurations:
package.json:
"react-native": "0.70.1",
"react-native-reanimated": "^3.1.0",
android/build.gradle:
buildscript {
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
androidXCore = "1.6.0"
//kotlin_version = '1.6.10'
if (System.properties['os.arch'] == "aarch64") {
// For M1 Users we need to use the NDK 24 which added support for aarch64
ndkVersion = "24.0.8215888"
} else {
// Otherwise we default to the side-by-side NDK version from AGP.
ndkVersion = "21.4.7075529"
}
I'm looking forward to your response.
I followed all steps to set up Google Maps and Places.
ExceptionsManager.js:71 Warning: Native component for "NSTStreetView" does not exist
There's a manual step for iOS to put the search path to the Google API in the NSTStreetView project. This change will only affect my local development environment and team members will have to do the same when they pull this library from NPM. And it won't even work for CI (I'm using buddy build) because it's always a fresh pull from NPM. Is there a solution for this? Is there a setting in my global workspace where I can specify the path?
How can I add a marker at the StreetView position?
RE: facebook/react-native#14590
React.PropTypes
is no longer available for React > 15.5 (RN 0.52 depends on React 16.2).
You'll want to include prop-types
as a peerDependency
and change the code in StreetView.js
We use the 'onError' callback to render a map if, for whatever reason, street view is not loading. This week we discovered this was not working on Android. After diving a bit in the repo I found that on Android the callback is called 'onStreetViewError'.
This is a bit confusing and not well documented. I would suggest making the names the same. If not, a bit of documentation to explain this might be welcome.
How can I detect if Google StreetView available for a location (lat, lng)?
Thanks so much!
Suddenly getting the error message No variants found for ':react-native-streetview'. Check build files to ensure at least one variant exists when trying to sync gradle in android. Unsure why it is happening now as it was working fine in recent builds.
Any help is appreciated
Let׳s say i start in some position (lat,long) and start moving on the street,
How can i get the updated location (lat,long)?
Hello!
Does this library supports Expo?
I got following error message after I hit react-native run-android.
C:\Users\YW\Desktop\myapp\node_modules\react-native-streetview\android\src\main\java\co\il\nester\android\react\streetview\NSTStreetViewPackage.java:27: error: method does not override or implement a method from a supertype
@OverRide
^
1 error
Incremental compilation of 1 classes completed in 0.488 secs.
:react-native-streetview:compileReleaseJavaWithJavac FAILED
FAILURE: Build failed with an exception.
Compilation failed; see the compiler error output for details.
What should I do? My react native version is 50.3
Thank you.
I have linked and add RN-streetview into my android project and add KEY into manifest file,
Both on the my android-smartphone and in Genymotion 2.10 (with GAPPS installed - https://www.genymotion.com/blog/2-10-open-gapps-widget/, I have Play market installed and I can use StreetView from Google Maps) there only black view instead of street view (
part of manifest:
<application
android:name=".MainApplication"
....
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="AI...s"/>
</application>
build.gradle
compile project(':react-native-streetview')
settings.gradle
include ':react-native-streetview'
project(':react-native-streetview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-streetview/android')
MainApplication.java
import co.il.nester.android.react.streetview.NSTStreetViewPackage;
Component
const StreetViewModal = () => (
<ModalWrapper>
<Text>Street View</Text>
<View
style={{
width: 400,
height: 300,
backgroundColor: 'white'
}}
>
<StreetView
style={styles.streetView}
allGesturesEnabled
coordinate={{
latitude: -33.852,
longitude: 151.211
}}
/>
</View>
</ModalWrapper>
);
const styles = StyleSheet.create({
streetView: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
So I see only text and black rectangle. If I comment/remove <StreetView>
, I see my View with white background.
log-android not inform me about any error/warning when I open app with component.
Is there something I have missing?
Thank you
I have been using react-native-streetview in my project and it was working all good. Until recently we noticed that it is only working when we run the app on any ipad connected to the mac from Xcode in which we develop it. If I release the ipa and test it on the same ipad, streetview returns a black screen like inhttps://github.com/nesterapp/react-native-streetview/issues/3 . But we have the sdk key added to the app and we even have react-native-maps working correctly.
react-native @0.55.4
[email protected]
While compileSdkVersion is 33 and i tried all options available but still i am facing this issue.
In order to compile Java 9+ source, please set compileSdkVersion to 30 or above
Is it possible to only show outdoor street view?
I know that we can do like &source=outdoor
as an url params in JS API
but not sure how to achieve it here
I would need to setlocation of the map and get exact position of the streetview, being a streetvie link or coordinates after user navigates, is this available or accesible somehow? thanks!
Thanks for your work,
I imagine there's no way to get the pov that the user has navigated to?
This seems to have something to do with header file discovery, but when I attempt to compile after adding (and linking) react-native-streetview I get a compilation error on the NSTStreetView project. Specifically it can't find React/RCTViewManager.h. When I check the header search paths it looks like node_modules/react-native/React is listed (non-recursive), but as of RN 0.61 at least the files are now in subdirectories (React/Views/RCTViewManager.h in this case). If I change the header search path and make it recursive (as well as update to just "RCTViewManager.h" instead of <React/RCTViewManager.h> in the import) other bugs start to pop up.
I'm not sure if something has changed in 0.61 or if this problem has been longstanding but I'm not good enough at xcode build settings to figure it out so far.
I am trying to disable indoor viewing. Is there any properties about it or is there a way to do it ?
Hi, thanks for publishing this library! I'm just wondering if there are future plans for the custom marker support?
https://developers.google.com/maps/documentation/ios-sdk/streetview#maps_ios_streetview_markers-swift
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<meta-data
android:name="com.google.android.geo.APIKEY"
android:value="APIKEY"/>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
I put my apı key where it indicates at code above but it gives API key not found ?
any suggestion
Thank you in Advance
Hey
I'd like to add
following code to NSTstreetViewManager.h for supporting bearing and others props in IOS
RCT_CUSTOM_VIEW_PROPERTY(pov, CLLocationDegrees, NSTStreetView) {
if (json == nil) return;
NSInteger tilt = [[json valueForKey:@"tilt"] floatValue];
NSInteger bearing = [[json valueForKey:@"bearing"] floatValue];
NSInteger zoom = [[json valueForKey:@"zoom"] floatValue];
view.camera = [GMSPanoramaCamera cameraWithHeading:bearing pitch:tilt zoom:zoom];
}
I followed all steps on setting the google maps sdk. I get no errors, but I only see a spinner for ~1 second followed by a black screen with the google logo on the bottom left side regardless of what latitude and longitude I set. The area prevents me from scrolling so something is happening there, but the images are somehow not loaded.
I'm trying to use the radius property on a latLng point that does not have a valid Street View on that specific point but has a valid one on a 100m search radius, according to the API.
<StreetView
allGesturesEnabled={true}
coordinate={{'latitude': -23.376721, 'longitude': -51.908538}}
radius={100}
/>
It renders a Black Screen as if there is not Street View for that region, even with a 100m search radius.
When I check this issue using the following API endpoint:
I get a return value stating that there is a valid Street View for that latLng using a 100m search radius.
Am I missing something or is this a problem with the Library?
Thanks!
Have an issue while use on Android
I should say, it doesn't occur every time I use street view in app.
I can definitely say - issue occurs after the route changed (so maybe it related with a component instantiation)
When street view stuck - I have next state (there is always a black line on top - it's absent when everything ok)
every time I change route (logout/login) and use streetView - the black space grows
but if app start from a route where streetView component situated - everything ok - it works
I use "react-native-router-flux": "3.39.2" for navigation
Can anyone please help me out with this problem, i am running the application on an android device and I have got no iOS or android simulators installed. How do I overcome this error?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.