I'm trying to integrate the react library called react-canvas-draw with expo.
the error in question is:
Component Exception - View config getter callback for component 'canvas' must be a function (received 'undefined'). Make sure to start component names with a capital letter.
I think its a babel config fix. converting es2015 to es7 or something then to react native code. I have no idea.
So I stopped using react-expo because it's a pain in the ass to configure all the settings with (Babel, es6, jest, eslint, etc & metro configs). I Generally know what all those packages do in layman's terms but I do not know anything with setting them up together and what goes where.
Instead I'm using npx create-react-native-app It comes pre-configured for what I'm doing and it has some neat feature like hot-reloading so it's just as fast in development. It's not as helpful as expo with ease of use with ios and android setup and exports but I can manage the configurations on my own.
Related
After some investigation, I realized I'd have to detach/eject my Expo app in order to use libraries such as nodejs-mobile-react-native, a library that allows you to run (and ship) a NodeJS singleton thread with your client app.
So the problem here is that I can't use this library unless I detach - something that I've been doing my best thus far to avoid. It sees all references to this library as null and I've tried to even manually link it.
Is there perhaps another approach that someone knows of that allows you to run Node alongside React-Native, which is compatible with Expo?
I have also used Expo in the past and because of similar limitations I switched over to Native Development using Swift but, in your situations what you can do is:
expo eject
in the application directory to detach your app from expo, once you have done this then you will have a plain react native app, then you can add any nodejs packages compatible with React Native.
Done!
I've just created a new "vue native" project. I didn't change anything in the default blank app.
I managed to run it on my android device, but impossible to run it on my browser.
I run "npm start" => "metro bundler" opens.
Then I click on "Run in web browser" and I get the error below :
Again, I didn't change anything. I just want to start the default app generated automatically when starting a new project.
Anyone already faced this problem?
Thank you
"This is a known issue, and it seems running vue-native app in web is not possible at the moment, because AppEntry.js tries to import ../../App. The default packager configuration specifies .json as a valid file extension. For some reason, in web, Expo seems to be looking for App.json and ignores App.vue."
https://github.com/GeekyAnts/vue-native-core/issues/268
See the official statement from vue-native creators 2020 7th of July:
"On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet.On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet."
https://github.com/GeekyAnts/vue-native-core/issues/268#issuecomment-640222479
Good news that devices and on simulator running works with expo, and mostly vue-native was designed to run on mobile devices not on web :)
For the web you can have a similar codebase using vuejs.
my question might be a little bit silly or ambiguous since I am fairly new to react native.
I'm trying to use the following repository for my react-native project https://github.com/smekalka/react-native-universal-pedometer. I have noticed that the repo is implemented in .java with platform folder unlike the regular .js or .ts files I used to see. Is this repository considered native module as react native doc describe?
Or in general how I can tell the whatever lib I am using is a native module.
The project is previously tested are under the support of expo-cli. I experienced the error null is not n object while using this repo. If so, I am probably going to eject the expo-cli and rewrite my code so I can use and even create own native-module for full control, some core implementations that written in other languages or expo-cli does not support.
Yes, the android and ios directories in the repository contain the 'native' code used to implement the platform-specific hooks that the Javascript will be able to pick up. Expo is not able to use these native modules or native code so your assumption is correct; you will need to eject your app in order to use this module.
If your app is below version 0.60 of React Native, after installing the module you will need to run react-native link react-native-universal-pedometer to link the native code to the Javascript runtime. If you're above 0.60, it will link automatically when installed.
I've recently started react native and following guide on tutorial there are
2 option one is create the project via "create-react-native-app myproject" and other one is "react-native init myproject".
the first one(create-react-native-app) generates app.js only whereas other one generates index.android.js and index.ios.js..
I know somehow they are doing same job but whats the real diffirence here ? which one should I pick to start and when the other one is more usefull over?
The create-react-native-app ("CRNA") CLI builds a project template based on Expo, a third-party toolkit which allows you to write cross-platform React Native applications using only JavaScript, and provides a smoother workflow for getting the app running on a real device. In addition, Expo provides access to tons of native APIs, for which you'd normally need libraries or custom native code.
Expo is great, and in an ideal world, it is what most app developers would probably prefer to use, but Expo's architecture sets an unfortunate limitation: You cannot write custom Native Modules, or integrate third-party libraries which depend on custom native code that isn't build into Expo. This means you have only access to the native functionality provided by React Native and Expo, and cannot easily extend it.
By contrast, the react-native CLI's init command creates a plain React Native app template, with native iOS and Android projects you can modify. The downside of this approach is that you'll need to set up the native iOS and Android build chains on your computer, and it's significantly more cumbersome to get started developing and deploying your app.
Luckily, Expo provides a way to detach a CRNA app from their native app shell. This will convert a CRNA project into something similar to the plain project created by react-native init, but with access to all the Expo SDK functionality.
In practice, the best approach for most beginners and new projects is to start with create-react-native-app, and evaluate whether you'll need to detach later. Expo provides a handy guide to help making that decision.
Is there a recent Webpack HMR react-native boilerplate out there?
I am having trouble finding a best practice for integrating an existing setup with Webpack and HMR to be used with react-native and the react-native packager. The resources I found online on this topic are dated.
I know that it uses Facebook's watchman.
I also know of the webpack-watchman-plugin, but I don't think that will allow me to trigger a webpack build and serve the compiled assets to react-native. I know that watchman has -- trigger functionality, but don't think digging in the packager local CLI is the answer either.
I'm at a loss for finding decent documentation for Facebook's packager, and not sure where to get started on this. My goal is to take an existing boilerplate used for web React, and use the boilerplate setup for react-native. I understand about the rendering differences, this is mostly the build tool part.
I've resolved this issue by not trying to integrate webpack with react-native, but by not using webpack at all and using react-native's packager. Still working on it, but I like it so far! Using it for my Open-Source react-native boilerplate project, strangeluv-native