I'm writing some component tests for a React Native app. I'm using expo's BarCodeScanner for one of my components. In my jest test, I have a line that says import { BarCodeScanner } from 'expo';. This line alone (without anything that uses it further down in my test code) causes the following error:
The Expo SDK requires Expo to run. It appears the native Expo modules
are unavailable and this code is not running on Expo. Visit
https://docs.expo.io to learn more about developing an Expo project.
Anybody have any idea on how I can import the BarCodeScanner to my test file?
I did a bit of digging and it appears that this is a common problem with Expo and Jest. There are a couple of issues open currently related to Jest Tests:
https://github.com/expo/expo/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+jest
One solution here sparked my interest:
https://github.com/expo/expo/issues/1705
It appears if you create your own Jest setup file and "require()" the expo component in there and downgrade expo and expo-jest to v26 it works. Example from the link above:
package.json:
...
"jest": {
"preset": "jest-expo",
"setupTestFrameworkScriptFile": "./setupJest"
},
...
setupJest.js:
require('stacktrace-parser');
Hope this helps you some bit. Let me know how you get on or if you have any queries and i will dig a bit more if possible :)
Related
Some help would be appreciated with the following issue:
I'm trying to get the non-minified output. For some reason, I keep getting Error: Minified React error even when I run the app in development mode.
I can open the development tools and with the code below I can see Development is printed in the console.
if (__DEV__) {
console.log('Development');
} else {
console.log('Production');
}
I started the project with npx react-native init AwesomeProject and made an error.
How can i set up the non-minified dev environment.
When I used a template project with expo and did an eject to react native it was using the the non-minified dev environment. Can someone explain how i can set this up on the creation of a new project with npx?
Having an incorrect import was causing this issue.
I let IntelliJ import useState without verifying it.
Changing the import from:
import {useState} from 'react/cjs/react.production.min';
To
import {useState} from 'react';
fixes the issues.
Trying to work with a react native app, I am using Webstorm 2019.3.4 with a simple blank react-native app project created with expo init myProject
Whenever i use react-native components such as <Text>, WebStorm offers the auto-import funcitonnality
However, the component is imported from the wrong lib. It pulls it from react-native-web instead of react-native
Heres the default package.json :
"dependencies": {
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-web": "~0.11.7"
...
How is the auto-import working here ? How can i switch to react-native import ?
Thank you
As a workaround, please add react-native-web/**/* to the Do not import exactly from... list in Preferences | Editor | Code Style | JavaScript - Imports.
For code completion with auto import for the native React Native components, please vote for this issue and follow it for the updates: WEB-35144
I am new to Expo but so far it seems super neat not having to open up Android Studio / Xcode to run my app locally. Not having to touch that stuff makes it so much more convenient to develop.
However, I want to incorporate in app purchases (subscriptions) in my app and from the research I've done so far it doesn't seem like Expo's solution (https://docs.expo.io/versions/latest/sdk/in-app-purchases/) is very developed.
I found this npm package for in app purchases and it looks promising: https://github.com/dooboolab/react-native-iap. However it is not supported by Expo, and I don't feel like it's worth giving up all the benefits of Expo just for this one feature.
I noticed a comment in the issues here that was quite intriguing: https://github.com/dooboolab/react-native-iap/issues/174#issuecomment-393704277
This person suggests that I can continue using the master branch with Expo, and then following these steps to eject and deploy when time is ready. I've never done this, but I'm wondering if this could work:
On master:
1) Run npm install --save react-native-iap but DON'T run react-native link react-native-iap.
2) Wrap my In App Purchase module with this code. This way your code won't crash when calling IAP methods
import { NativeModules } from 'react-native';
const { RNIapModule } = NativeModules;
function hasIAP() {
return !!NativeModules.RNIapModule;
}
3) Continue developing using Expo, and just skipping the IAP stuff if !hasIAP()
On separate branch used for final QA / deployment:
1) Create a new branch called detached
2) Run expo eject
3) Run react-native link react-native-iap and all the other Manual Installation steps listed here: https://github.com/dooboolab/react-native-iap#manual-installation
4) QA everything
5) Deploy
Does anyone have experience doing this hybrid "expo for development, no expo for production" approach?
If you eject and use the Expo, you can use it like a default React-native project. The Android folder and the iOS folder are created and you will enter the appropriate package name before you create them. The modules you have installed and the modules in Expo are added to the package list when you eject the Expo. Check MainApplication.java for Android or Info.list files for iOS. There are some things that do not apply to App.json settings that were responsible for setting up after you ejected the Expo. It can be set up by referring to the official document.
Once the Expo has been ejected, the React-native link command is performed brilliantly.
ejecting the Expo does not change or disappear from the module usage
For about the last 24 hours I decided to take my react native project off expo. So I ejected it and started to doing the proper troubleshooting to run my app using react-native run-ios. I have managed to make my application's build succeed via Xcode however when the application runs I constantly get an ERROR. I noticed within my react native file I don't have an index.js. Not really sure why not and how to make one. I did try running react-native init, however, that just made my build fail and I had to go through a whole process to make it work again. Any help would be very much appreciated.
NOTE: I am not able to embed images at my level. So, I do apologize for the link
package.json + look at my files
Add an index.js in your root with the following:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('YourAppName', () => App);
I want to allow for my React Native application to use Decorators, but how do I achieve this?
In React, it's pretty simple:
I ran yarn run eject
I modified webpack.config.*.js and added plugins: ['transform-decorators-legacy']
How do I achieve something similar with react-native? I instantiated my project via the react-native CLI - react-native init AwesomeApp.
However, the eject command doesn't exist.
When you're developing an application using only React Native CLI, you don't have access to configuration files such as webpack.config.js, or an eject command.
But you can add decorators support through the same Babel plugin, just by modifying .babelrc file. Follow the steps below:
Install the plugin to your project (as a dev dependency): yarn add --dev babel-plugin-transform-decorators-legacy;
Declare the plugin in your .babelrc file: "plugins": ["transform-decorators-legacy"];
Now, next time you start the packager (or bundle the sources), React Native will be able to interpret the decorators you've used in your JavaScript files.
The example given in this article shows exactly what I have described above.
Also, you might take a look at Haul, a tool for creating React Native apps using webpack.
Good luck!