React Native Example App does not run in Expo Snack - react-native

I'm learning React Native and trying to add a component to an Expo Snack for testing. I can't even get the example app to work though.
Is it something different about how Snacks work vs. a desktop development environment? I've encountered that type of difference using JSFiddle, for example.
I straight copy-pasted the code from the Github repo into snack.expo.io and it gave me an error:
Device: (946:881) Unable to resolve module 'module://expo-font.js'
Evaluating module://expo-font.js
Evaluating module://react-native-numeric-input.js
Evaluating module://App.js
Loading module://App.js
I've gotten this error before, but I've never been able to figure out why. Is it an issue with the package, which was updated just 7 days ago, or something else? Please advise.

It may be due to missing of node modules in your project compared to the Github project. As the Stack.expo browser won't give us full freedom to install custom modules, I suggest you to download VS Code and open the Github project in it, then do "npm install" from cmd and "react-native run-android/ios".

Related

React-Native, React-Native-Web and React-Navigation/Stack

Has anyone been able to get React-Native 0.7, React-Native-Web and React-Navigation/Stack 6.2.3 to work on web? I have a small app working on iOS and Android which I am trying to enable on web too. iOS and Android portion work fine and using metro.
However, webpack build continues to error out with "Module parse failed: Unexpected token" on the NavigationContainer.
I tried searching both react-native-web and react-navigation Issues on their respective GitHub Repositories. However, could not find something to solve my issue. Also tried modifying webpack.config with several different configurations/loaders.
Used links below as a reference too:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
https://gist.github.com/skabbes/0bfa0a969aac8ec13f716dda1ad2ab43
Yes, it happens that I maintain a library that does just that: creates a bare React Native app that also runs on the web: 🌒 Luna - https://github.com/criszz77/luna
Here is the live example: https://criszz77.github.io/luna/
You can find more on the wiki page about how it's implemented and you can also implement it by yourself: https://github.com/criszz77/luna/wiki
By using react-scripts, you don't have to handle webpack, babel and other hard configs by yourself.
It currently doesn't run on 0.7 (didn't have time to make the update), but it's in plan to support all the latest versions of course ASAP.
EDIT: Updated to 0.70.3 🎉

Unable to run react-native-windows after installing react-navigation

I installed the react-native windows application, following the steps mentioned here. After that I ran the application and it started up perfectly fine. Then I tried adding the react navigation package following the given steps. But when I try to build the application again I am getting the following error:
I have spent a lot of time trying to figure it out and I have gone through various steps that I could find online to rectify this issue, but they have not been useful. I have also double checked that all the dependencies are installed.
Any help will be greatly appreciated.

React Native background location (#mauron85/react-native-background-geolocation) - problem installing, how to link modules with Expo managed workflow?

I'm developing a sports app with React Native / Expo which needs to track user background when the app is in the background.
This is related to my previous question (React Native expo-location: How to make the background location service update more often?). I came to the conclusion that the background location tracking in the 'expo-location' package does not seem to sufficiently work, so I started building a new solution based on the package '#mauron85/react-native-background-geolocation' (https://github.com/mauron85/react-native-background-geolocation) which I found was recommended in several tutorials.
So I installed the module and built my map component based on the example code provided in the documentation (https://github.com/mauron85/react-native-background-geolocation#quick-example).
However, when running the app on Expo Go, I get the following error message despite doing all the required imports:
Component Exception: RNBackgroundGeolocation is undefined
This appears to be caused by a problem in linking modules, which I failed to do during the installation. The component requires to do linking of modules with the following command:
node ./node_modules/#mauron85/react-native-background-geolocation/scripts/postlink.js
Because I use Expo managed workflow, I lack the folder structure (./android/settings.gradle etc) required by this script and receive an error of 'android/settings.gradle not found'. Based on some searching, this seems to require running 'expo eject' on the whole project so that I can do configurations in the platform-specific folders.
However, 'expo eject' runs into errors in the "Installing JavaScript dependencies" phase and just returns an error of "Something went wrong ... ...", and the error logs provide no further clarification.
Questions:
How to get forward when something goes wrong in the 'expo eject' phase like this? The error logs get really messy and unclear.
I would really prefer to stay in the managed workflow to avoid any mess. Is there a way to get the modules linking work within the Expo managed workflow?
Any help appreciated, thanks.

React Navigation and React Native Gesture Handler -- Invariant Violation: No callback

I have been experimenting mono repositories with javascript, using react and react-native applications. However, I have been having some problems using external dependencies on a simple react-native application.
While trying to integrate react-navigation following this guide here, I always end up with a lot of errors like:
ERROR Invariant Violation: No callback found with cbID 18929 and callID 9464 for module . Args: '[1131]'
It even gets in loop. This starts happening when I import react-native-gesture-handler at index.js. I have been trying to understand the problem for days and tried a lot of different stuffs, since nohoist of dependencies, clearing dependencies, reset react-native caches, watchman links and so on. However, I always end up in this error.
I have been experimenting with it on ios.
I am not sure it is a problem with the libraries I have mentioned here, because if I have a standalone react-native project, I can use the react-native-gesture-handler.
So, initially, I thought it was a problem with the mono repository structure I have, however, I have tried to use other libraries like: styled-components, react-native-router, react-native-restart, and react-native-contacts, and those libraries work well.
Has anyone passed for this problem? I have a github repository here where I try to explain how to reproduce the error.
I have also been documenting, to my self, my experimentations with mono repositories here, step by step, in case it gives more context.
I do not know if it is the best place to make this question, however I do not know where to look more, any suggestion is welcomed.
Thanks!

How to create react-native app for route like uber, with the use of HERE-MAP?

installed 'npm install react-native-heremaps --save'
This is for react-native init android, I tried some application using ios concept.
Error
Loading dependency graph, done. Error: Unable to resolve module ./index
Referrence:
Github ios sample
this question is a bit vague for SO, something that would require an entire course to answer. Currently it looks like you should learn how to do react-native android before attempting to add on top HERE. There are many great tutorials to get that started and working.
For the here portion you will have to use the Here-Maps-SDK. Since there isn't a react version of this SDK, you will need to link it using a react bridge.
It's not that easy of a process, and will take a decent amount of work to get right.
Here are some examples to help get started: https://hackernoon.com/react-native-bridge-for-ios-and-android-43feb9712fcb
https://facebook.github.io/react-native/docs/native-modules-ios