I am a beginner with React Native.
I'm using Expo on Windows 10 and testing on an iPhone.
I need to create a map with custom tiles.
After some research I find out that Leaflet is not React Native compatible so I have to use react-native-maps.
I install it and create my first basic map, so far so good (Apple Maps).
Then I tried to apply the custom tiles. For performance reasons I want to use local tiles. Here came the question of how to get the local link of my tiles (located in "assets/tiles").
While searching I realize that I need to use react-native-fs to use the following path file://${RNFS.DocumentDirectoryPath}.
I install it.
However, when I try to add react-native-fs using
var RNFS = require('react-native-fs');
I get the error :
Invariant Violation: Native module cannot be null.
and I'm lost and don't know if I'm going the right way.
Thanks
Related
we working with expo and using mapview, however, there are many restrictions in react native maps, as we are planning to implement turn by turn navigation. Integrating Mapbox would have been the best option, however we do not think it’s best to eject the project as expo doesn’t still support Mapbox. Although, I came across a package, react native maps navigation, I would like to know if anyone has been able to successfully implement it in their project and it functioned properly, and also know if there are any drawbacks that comes along with it. I am asking this because the author says “Please note that this module is usable but still under heavy development. Some properties and/or component names might change without notice.”
Kindly give your suggestions and advice. Thanks
Mapbox works very well in a react-native projects and recommend to use this service for your project but effectively, it don't works with expo so for me, you should eject your project to use it.
I paste here some packages I used for a GPS project (The last one is to get the current position of an user)
react-native-mapbox-gl/maps
mapbox-sdk
react-native-geolocation
Hope that could help you
I am new to React-Native and I am currently struggling out for creating a simple Image-slider in react-native. I went through some of the links like: https://reactnativeexample.com/tag/carousel/
But not able to figure out if react-native provides a library which I can import directly in my code to implement an Image-slider.
Is there a native library which I can use or is there some other procedure to create an image-slider?
I want a slider as presented in this website: https://www.jssor.com/
For example, when you want to use react-native-snap-carousel, you can follow the instructions in the usage part of that link
https://github.com/archriss/react-native-snap-carousel#usage
And also, If you want to use so simple carousel, you can use
<FlatList horizontal={true}/>
I am not able to use google.maps.geometry.poly.isLocationOnEdge() in my react native project. Is there any other way to check whether a point lies on a route which I can use to react native?
I recently came across this problem while using react-native-maps.
You can use isPointInLine(point, lineStart, lineEnd) method by using geolib JS package. This package has many other useful methods.
I'm trying to understand how I can do a signature capture in React Native. My App is created with create-react-native-app and Expo and I'd prefer to not have to eject the app to get this functionality to work.
Would it be possible to wrap something like this in a webview? https://github.com/szimek/signature_pad
I've also looked at this project, https://github.com/RepairShopr/react-native-signature-capture but it requires me to eject the app and use react-native link.
Looking for any advice or suggestions on how to implement this feature while keeping my project as straightforward as possible (ideally, using create-react-native-app, but if this isn't possible could someone please explain to me why?)
The way React Native works is that each component available in React Native maps to a native component in the underlying platform.
ie. a <Image /> is an ImageView in Android and a UIImageView.h in iOS.
The Javascript code itself runs in a Javascript thread on each platform and as you use Components in React Native, there's a translation layer that passes information from JS into the React Native bridge that then results in corresponding native components being created.
By default, React Native has included the following components: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components which means that only those components come out-of-the-box in React Native. If you want other components, then you have 2 options, either create a "composite" component in which your JS component is written into other JS components or, if your feature needs a native component not yet exposed by React Native, write your own "native" component to expose certain native functionality to your React Native code.
The way Expo works is that they have wrapped React Native and a handful of 3rd party components and built it within their application. The reason why you can't use a 3rd party native component they don't support is because when that component is used, the app itself doesn't have translation code to go from JS to a native Android/iOS view.
So, to do what you're asking, you'd need to find either a "native" drawing component that Expo has included in their platform/app. OR you need to find a "composite" drawing component that is built with other default React Native components (or other components Expo supports).
ie. On Android, I might build this with a Canvas view, but from what I can tell React Native doesn't support that object natively, so I would probably write this myself, etc.
It's hard for Expo to support every 3rd party "native" component out there because React Native is open source and it iterates so fast that most community-built components aren't always up to date or they might conflict with one another.
I am using react-native-signature-capture.
Working properly on both Android and iOS.
I know it's been a while, but there is an interesting article here: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
Wait, but how?
Using “expo-pixi”, you can add a component that lets you choose your brush’s color, thickness, and opacity. Then when your user lifts her finger, you get a callback. From there you can take a screenshot of the transparent view or get the raw point data if that’s what you’re looking for.
Problem
I'm integrating React Native into an existing Android app (ie. making a hybrid app). I've created an Activity to host a React Native view. This works fine.
Now, I need to pass structured data from native into React Native. Represented as JSON, it looks something like this:
{
"landscape": ["http://example.com/1.jpg", "http://example.com/2.jpg"],
"portrait": ["http://example.com/3.jpg", "http://example.com/4.jpg"]
}
Given the context I describe how can I make this data available as props inside of the React Native app?
I see that this is an initialProperties argument available, but it seems to accept a Bundle, which as far as I can tell (Android newbie here) only accepts scalar values.
One option I am considering
Create JSON object in Java
Convert to a string
Add to Bundle and pass into initialProperties
Ingest as JSON and deserialize in React Native app
... but this seems hackish and requires me to add special code for Android that was not required for iOS.
Alternatives?
Is there a straightforward approach that I am missing?
Have you tried passing an array of strings into the Bundle?
bundle.putStringArray("landscape",yourArrayOfStrings]);