React Native Maps LocalTile with fallback to native map provider tiles - reactjs

I'm using react native maps with the <LocalTile /> component to render custom maps in a react-native app.
This is all good and it's working but the tiles I'm using just cover a limited area and what I'm wondering is; is there a way to make react-native-maps fallback to use the native provider tiles when tiles defined with pathTemplate are not available? This seems only to be an issue on iOS because Android renders the google maps tiles behind the local tiles - this is the behaviour I'd like for iOS with apple maps as well.
Essentially I want to be able to render the custom map tiles that I have, and then have it fallback to the standard map for everything else.
const pathTemplate = `${RNFS.DocumentDirectoryPath}/map-tiles/{z}/{x}/{y}.png`;
......
<MapView>
<LocalTile pathTemplate={pathTemplate} tileSize={256} />
</MapView>
Currently on iOS it just renders empty space with labels where the local tile set is not covered.
edge of local map tiles region

Related

Adding navigation control to my google map

Im running react (in the web browser not native) with the react-google-maps component. I want to enable the navigation button (see the red marker) so the map can be opened in my native app. Any suggestions? See the 2 pictures
It doesnt seems like the google maps api has any controls out of the box. A workaround for me is to implement the directionsbutton and https://developers.google.com/maps/documentation/urls/guide from google. When the link opens it will open in the native app if its installed on anroid or ios

React native open image picker in customized layout

I am building android app in react native. Here I can building image upload feature.
I want to open local image gallery in customized layout, which has two tabs in bottom, one from pick image from camera and another from local library, like instagram app has.
I have tried react-native-image-picker and react-native-image-crop-picker. But did not found this feature in these both react native packages.
Please guide me how can I create this feature.

Place Image above another image dynamically in ReactNative App

I have an iOS app in which, we take user pics, and then allowed them to put some random custom images above the pics.
While placing these custom pics above real image, they can rotate, scale these custom image. ( See this StickerViewIOS )
Now I am looking for exact same solution while making ReactNative.
Tried lot of Googling but no results found.
Just want to ask community if any of the ReactNative component available for the same.
Thanks,
There's no rotation support, but I did something similar for an app I made for Chain React.
Here's the image component that supports gestures: https://github.com/cball/ChainReactPhotobomb/blob/master/App/Components/TransformableImage.js
To overlay them on top, just use the ImageBackground Component

ReactJS project on Android WebView, Image not showing

I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);

Map component for ExtJS

Is there are a ExtJS component, which allows to
display an OpenStreetMap map in an ExtJS application,
display markers on certain positions on the map and
react to user's clicks on certain positions on the map
?
No.
There's only an extension for GMap: Ext.ux.GMapPanel and GMap Example
Both GMap and OSM have their own API. You can just wrap them into containers such as panels, windows, etc. If you wanna handle OSM and GMap events, use their API.
Not a core component of Ext JS but what about GeoExt, which extends Ext JS? It integrates OpenLayers, which provides all the map service and user interface controls to do all the hard map work.

Resources