Creating an OSM map app with React native and Expo - reactjs

i need a hint... started in React native and tried Expo. Goal is to create an OSM map app for hiking. So far i run into 2 problems:
no background works in Expo location
no OSM map plugin compatible with Expo
First might be resolved in the future, the Expo guys work on that.
Second... using something like the mapbox for JS will not help, as i did not see any solution for offline caching.
Now i am asking myself if i should continue without Expo using pure React native (mapbox SDK will offer caching), or keep Expo and create a map-box on my own (loading tiles based on lat/lon and displaying the current position on a tile is not that hard...)
Any experiences for a similar problem?
As this is kind of a learning project i am not interested in available apps, i am already using some of them ;)
Thanks and regards, Jo

Related

React Native live steam and camera filtering

We have an app developed by react-native we already use
react-native-nodemediaclient for streaming and working fine but now we need to put a filter like the Instagram filter on the camera as far as I search that package does not support these things.
Now my question is any solution for handling this?
Thanks for help!

Make image adapt to background colour in React Native

I am working on an app that includes the user taking a picture, then editing it. However, I have noticed that when the buttons used for editing are displayed, they are often not very visible due to the image background. The buttons contain images that have their colour set by tintColor. I would like the buttons to be visible no matter what the colours of the image are. I have found a CSS filter that achieves this, but there is no React Native implementation of it. I have also found a library that can do this (react-native-color-matrix-image-filters), but I cannot use it because I am using a managed Expo project with Expo Go.
Any help would be much appreciated. :)
Starting from Expo SDK 42, you can install a native library with Expo, you just need to compile a custom Expo Go client app with a native module (react-native-color-matrix-image-filters) pre-compiled and embedded.
You still have amazing Expo DX use native module support.
Check how to compile Expo Go Custom App here - https://www.youtube.com/watch?v=id0Im72UN6w&t=25s

How to embed a website in expo React Native

I want to embed or just redirect to a website I made which uses a webcam. I can redirect to the website with webView however the camera doesn't work.
This is the website I want to embed. https://chinmaymhatre.github.io/currency_detector
I don't think you can permit camera access inside a webview in a react native or expo app because of security concerns, neither could I find anything like that.
I think it would be easier to just implement this right into the react native app(if the app you want to show in the webview is written in javascript)
I have tried something similar. So, sometime ago I was making a video streaming app using React Native for a website that I made using WebRTC which was using camera and other medias(Video, Audio and Screen). I tried to be smart and tried to embed the webpage directly into the React Native App. My Idea was that I could access the Camera and other user media in Mobile Browser So, it should work with React Native as well. But this is not how the react-native works, React Native doesn't uses iframe to work or in other words react-native develops Native Apps for both IOS and Android. You can always implement an iframe in expo, but this is against the Device Security to provide such level of access to user-media. The device doesn't allow such functionality via iframe (here's the link to a live example how to implement iframe in expo). So, to understand it better You should use react-native-cli to make a simple app not expo. Now for using camera in expo there's a package called expo-camera (here's link) Which helps you develop camera oriented apps using Expo. If this doesn't answer your questions then let me know. Happy Coding :)

Is there any implementation of change language available on button click in react native expo localization..?

I am trying to implement multilanguage support of arabic language in react native expo app. I found many packages on internet but I am using localization module in my expo app. For that I found a solved example on expo snack.
https://snack.expo.io/#marcelkalveram/localizaton-example
but its giving an error. can anybody solve the error.
I want to change the language of whole expo app in arabic on button click, but I haven't found such implementation in expo app.
If any one has encountered similar problem in expo app or if anyone knows another good solution which fulfills my requirement of changing app language on button click, please help..
Thanks..
Use i18n-js with expo localization, read the expo documentation for the usage. https://docs.expo.io/versions/latest/sdk/localization/

trying to resize an image with react

I am trying to build a web app that allows users to upload images then select parameters for resizing and cropping. I've decided I'm going to handle the cropping with react-cropper but I can't figure out how to handle the resizing itself. Are there any packages you all would suggest? Or otherwise, can I have some advice on how to implement this in react in a way that would produce good looking images well-scaled w/ consistent aspect ratio?
I'm new to reactjs and development in general so any detailed advice on how to go about building this system would help a ton.
Thanks
react
The question will be: Will you handle the image resizing / optimising on the server or within your browser?
I recently did one project that required to manipulate DOMs in the browser and export as a new image. I was using a library dom-to-image
which can convert your React components into jpeg, png or svg. So the solution is that you handle the resizing with any React or javascript libraries like react-resizable in the browser and export the image with dom-to-image.
I hope it helps.

Resources