I'm trying to create an example React Native application for my package (https://github.com/BenJeau/react-native-draw) which now is divided in multiple npm packages. Everything is working with Expo, but since I am introducing non-Expo compatible packages, I need to switch the example to a pure React Native project (which can be found in the feat-skia branch).
I inspired myself from #react-navigation repository layout and it worked for the Expo example, but now that I'm moving to a pure React Native example, it is not working either giving one of the following errors variations when loading components from the packages within my library:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
Invariant Violation: View config getter callback for component 'RNSVGPath' must be a function (received 'undefined').
Would anyone know how to properly configure metro or have links on setting up metro in a workspace in a pure React Native project?
Thanks!
Related
I would like to be able to setup stories for my react native screens, which hooks into the API via react query hooks. I'm using the beta version of storybook react native (6.0.1-beta3).
https://storybook.js.org/addons/msw-storybook-addon, which is what I'd normally use in a react project, won't work because service workers don't exist in react native (if I'm understanding things correctly).
I have also tried installing https://storybook.js.org/addons/storybook-addon-mock/, but wasn't able to get it work (storybook failed with a runtime error when trying to register the plugin... likely a version mismatch).
I might just have to go with a container/dumb component approach for the screens, but that has it's own drawbacks because queries or mutations can be nested in components.
I'm using axios for what it's worth. I've also considered putting the axios instance in a provider so I could modify the instance per test.
Thanks
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'm new in React Native, please bear with me. I have a library, which works fine in NodeJS and in browser. I would like to make it usable in React Native too.
I created an example project, imported the library but it threw an exception - Unable to resolve module `http`. If I try to import the browser version, document is not available.
Since then I'm scratching my head - how am I supposed to make my library to work in React Native if neither the core NodeJS modules, nor document are available?
React Native does not have access to Node.js modules such as http, so any code that relies on that functionality is not going to work. You will have to remove or replace it. As for document, window and other DOM-specific APIs, RN does not use a DOM at all, instead it uses its own rendering mechanism that is coupled to the native APIs. You will also have to remove all those calls and replace them with React Native-compatible ones.
Im having a bit of an issue after upgrading to React Native 0.30. Using mocha, and babel I transpile the react native source before test run. I'm now seeing issues where modules cannot be found.
Here's an example:
Error: Cannot find module 'AssetRegistry'
The corresponding file can be found here https://github.com/facebook/react-native/blob/master/Libraries/Image/AssetSourceResolver.js#L21. It looks as if babel cannot locate the AssetRegistry file that is local in this directory.
Ok so it turns out that react-native-maps was calling an internal react-native library. react-native-mock has most of the internals mocked for react native however the internal library for the Image utility was not mocked.
I just used mockery to mock the library and all seems to work now.
Is it possible to use npm modules with React Native projects directly, like one uses them within a React project by npm install <module-name>?
Of course I mean modules that can be used with a React app, that is front-end ones that will be run in the browsers JS runtime but not in the nodejs or iojs runtime as a React Native app does not run in the nodejs or iojs runtime.
Well, it's quite opposite. React Native actually runs within io.js runtime so most pure javascript modules for node will work. On the other hand most front-end modules written for React.js will not work for React-Native.
React Native does not use HTML DOM nor CSS as we know it from the web. It replaces the CSS/HTML DOM with the native view representation. So any front-end packages that are supposed to use HTML and be displayed in browser will not work.
On the other hand, any modules that are pure javascript and run within node.js/io.js are perfectly OK to be run in react-native.
For example, I am quite sure that Facebook uses their 'relay' data access library in their react-native apps (it's a javascript library that efficiently communicates over Facebook's Open Graph API and allows to access Facebook user's data).
The way to do it is the same as in other node.js/io.js apps. Simply run
npm install module --save
and you are done (package.json will be automatically update with the dependency for the module). Then you can use the package as usual.