Im using react redux toolkit. This is my store configuration.
My app doesn't start becouse this warn: The native module for Flipper seems unavailable. Please verify that react-native-flipper is installed as yarn dependency to your project and, for iOS, that pod install is run in the ios
directory.
import {configureStore} from '#reduxjs/toolkit';
import authorization from 'redux/slices/authorization';
const createDebugger = require('redux-flipper').default;
export const store = configureStore({
reducer: {authorization: authorization},
middleware: [createDebugger],
});
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
Related
ERROR TypeError: Restricted in strict mode, js engine: hermes is getting thrown when trying to import Axios for network request in react native application. The error gets removed when i'm trying to remove the import statement from the below code.
api.js
import axios from "axios";
export default axios.create({
baseURL:"https://.com/v3/test",
headers:{
Authorization:'Bearer fsdfsfsd'
}
});
Try to downgrade the axios version.
yarn remove axios
yarn add axios#0.27.2
If it is not getting listed from node modules when trying to import Axios, import the package as follows:
const axios = require('axios')
Almost all of the questions out there are related to redux middleware but none points to one related to redux-toolkit. As suggested by this document I created a store as below
import {configureStore} from '#reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';
import cookieReducer from '../features/cookie/cookieSlice';
const store = configureStore({
reducer: {
auth: authReducer,
cookie: cookieReducer,
},
devTools: true, // This should automatically enable Redux DevTools
});
export default store;
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Then I ran the application in debug mode and in 'Redux' dev tools extension tab I do see this!
I assume the redux toolkit does the auto configuration for Redux Dev Tools as the doc states. Did I miss any additional configuration in code or in Redux Dev Tools configuration ?
Your help is greatly appreciated.
I am using the package react-native-coreml and running into this error at startup.
My intention is to use this package to use a CoreML package in my react native app. I am running this within EXPO if that makes any difference.
I can't even run the app. These two errors are together.
Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
and
TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
- node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
Obviously the first error isn't useful, just including for thoroughness.
My implementation is as follows:
import React, { useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import FaceScanner from './FaceScanner';
import { classifyImage } from "react-native-coreml";
const Onboarding = () => {
const [imageURL, setImageURL] = useState('');
const [tested, setTested] = useState(false);
console.log(imageURL)
if (imageURL !== '' && !tested) {
async () => {
// const { label, confidence } = await classifyImage(imageURL, './model.mlmodelc')
setTested(true);
console.log("The image is a " + label + ". I think. ")
}
}
...
edit I have ejected from expo as per a comment's suggestion. I am now encountering these errors.
BUNDLE ./index.js
ERROR TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
LOG Running "main" with {"rootTag":1,"initialProps":{}}
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
react-native-coreml is a library with native extensions that do not work in the expo managed workflow currently. you can read about the managed workflow limitations in the expo docs.
if you'd like to use it, run expo eject and build the project in xcode
We are trying to use the same React components both in mobile (react-native) and in web (create-react-app).
It's is working out pretty well so far thanks to react-native-web (configuration below).
However react-native-vector-icons, which we use extensively in the react-native project, does not compile with react-native-web. This means any component which uses a component with vector-icons will also need a specific web version. Having web specific versions of components effects maintenance.
Is there a known way, without having to eject create-react-app configuration, to deal with 3rd parties such as react-native-vector-icons in web?
import {createIconSetFromIcoMoon} from "react-native-vector-icons";
import Font from './Font.json';
export default createIconSetFromIcoMoon(UbeyaFont);
Things we've thought of so far:
we are currently looking into two ideas:
Environment based import:
# Pseudo code:
# if mobile import this, otherwise import that.
We're not sure whether this kind of dynamic importing is possible
Webpack configuration which is injected into node_modules/react-scripts. Not elegant but with a gulp watch which we have anyway we can make sure the configuration is always there.
Any ideas or thoughts are appreciated.
Configuration:
We've built a new private NPM package which holds all the React components and by using gulp watch that copies the package to both the mobile and web projects we save the trouble of constantly npm publishing and yarning during development (the only drawback Webstorm's indexing process).
We ended up using a gulp script to overwrite webpack. The stages are:
1) Build replacement packages
We built a web version for each React Native 3rd party. For react-native-vector-icons it turned out to be quite simple:
import React from 'react';
export const Icon = (props) => <div className="material-icons"
style={{color:props.color}}>
{props.name}
</div>;
export default Icon;
2) Adjust the Webpack configuration
Using gulp we overwrite the create-react-app webpack configuration with:
resolve: {
modules: ...
alias: {
"babel-runtime": path.dirname(
require.resolve("babel-runtime/package.json")
),
"react-native": "#ourcompany/react-native-web",
"react-native-vector-icons": "#ourcompany/react-native-vector-icons",
...
The gulp task script:
gulp.task("copyWebpack", function() {
return gulp
.src(["package.json", "src/_webpack/*.js"])
.pipe(
gulp.dest(
path.resolve(pathWeb + "/node_modules/react-scripts/config")
)
);
});
Note:
Ejecting create-react-app's configuration is cleaner, however it means you'll need to maintain the configuration and we preferred leaving the configuration as is and overwriting it during the build process.
You'd notice we have overwritten react-native-web itself. More on this in the next optional step.
3) Extend react-native-web (optional)
If you are using components which react-native-web does not yet support, you would want to build packages for them and extend react-native-web so your web version will work. Simply create a new package #yourcompany/react-native-web and generate an index.js in which import the components that do exist in react-native-web and reference the ones you've built. Note that when we built our project react-native-web didn't have a FlatList or a SectionList and now (October 2018) it has both (Modal is still missing :-)).
import {
StyleSheet as _StyleSheet,
View as _View,
Text as _Text,
Image as _Image,
I18nManager as _I18nManager,
AsyncStorage as _AsyncStorage,
Platform as _Platform,
Linking as _Linking,
ActivityIndicator as _ActivityIndicator,
ListView as _ListView,
Modal as _Modal,
Picker as _Picker,
RefreshControl as _RefreshControl,
TextInput as _TextInput,
Touchable as _Touchable,
TouchableHighlight as _TouchableHighlight,
TouchableNativeFeedback as _TouchableNativeFeedback,
TouchableOpacity as _TouchableOpacity,
TouchableWithoutFeedback as _TouchableWithoutFeedback,
Dimensions as _Dimensions,
Animated as _Animated,
ScrollView as _ScrollView,
SafeAreaView as _SafeAreaView,
BackHandler as _BackHandler,
Switch as _Switch,
NetInfo as _NetInfo,
AppState as _AppState,
ColorPropType as _ColorPropType,
} from 'react-native-web';
import {SectionList as _SectionList} from './SectionList';
import {FlatList as _FlatList} from './FlatList';
import {Alert as _Alert} from './Alert';
import {WebView as _WebView} from './WebView';
import {Share as _Share} from './Share';
import {PermissionsAndroid as _PermissionsAndroid} from './PermissionsAndroid';
import {ActionSheetIOS as _ActionSheetIOS} from './ActionSheetIOS';
import {ToastAndroid as _ToastAndroid} from './ToastAndroid';
export const StyleSheet = _StyleSheet;
export const View = _View;
export const Text = _Text;
export const Image = _Image;
export const I18nManager = _I18nManager;
export const AsyncStorage = _AsyncStorage;
export const Platform = _Platform;
export const Linking = _Linking;
export const ActivityIndicator = _ActivityIndicator;
export const ListView = _ListView;
export const Modal = _Modal;
export const Picker = _Picker;
export const RefreshControl = _RefreshControl;
export const TextInput = _TextInput;
export const Touchable = _Touchable;
export const TouchableHighlight = _TouchableHighlight;
export const TouchableNativeFeedback = _TouchableNativeFeedback;
export const TouchableOpacity = _TouchableOpacity;
export const TouchableWithoutFeedback = _TouchableWithoutFeedback;
export const Dimensions = _Dimensions;
export const Animated = _Animated;
export const ScrollView = _ScrollView;
export const SafeAreaView = _SafeAreaView;
export const BackHandler = _BackHandler;
export const Switch = _Switch;
export const NetInfo = _NetInfo;
export const AppState = _AppState;
export const Alert = _Alert;
export const Share = _Share;
export const WebView = _WebView;
export const PermissionsAndroid = _PermissionsAndroid;
export const ActionSheetIOS = _ActionSheetIOS;
export const ToastAndroid = _ToastAndroid;
export const SectionList = _SectionList;
export const FlatList = _FlatList;
export const ColorPropType = _ColorPropType;
I have followed –or tried to– several posts on how to do it, including the airbnb enzyme's guide for (separatedly) react-native and jest. (E.g: https://medium.com/#childsmaidment/testing-react-native-components-with-enzyme-d46bf735540#.6sxq10kgt, https://blog.callstack.io/unit-testing-react-native-with-the-new-jest-i-snapshots-come-into-play-68ba19b1b9fe#.4iqylmqh5 or How to use Jest with React Native)
But I keep getting lots of warnings (I have multiple set of concurrent tests) whenever I try to render (not mount, it crashes) any native component. Warnings are always about a native prop not being recognised.
Warning: Unknown props `focus`, `secureTextEntry` on <TextInput> tag. Remove these props from the element.
in TextInput (created by TextInput)
in TextInput (created by PasswordInput)
Anyone who has a set up working, recognises how to remove the warning or how to solve it?
Thanks
So I know this is a bit old but I was having issues with Jest, Enzyme, and React Native and I found this post - hopefully this solution will help.
To start with - Enzyme doesn't support mounting React Native and only supports shallow rendering. This wasn't good enough for me as I needed end-to-end tests from the component to the api which lead me to react-native-mock-render. What this does is allow us to run react native inside a browser environment which let's us test using Enzyme - all the calls for React Native and the components work as you would expect.
To set this up you'll need to install JSDOM, react-native-mock-render, Enzyme 3.0+, and Jest 20.0.0+. And then inside your jest setup file (which is specified in your package.json) include the following code:
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM();
const { window } = jsdom;
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === 'undefined')
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
copyProps(window, global);
// Setup adapter to work with enzyme 3.2.0
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
Enzyme.configure({ adapter: new Adapter() });
// Ignore React Web errors when using React Native
console.error = (message) => {
return message;
};
require('react-native-mock-render/mock');
And that's it - you're all setup to mount components in Enzyme and test them.
If you want to see a full sample check out react-native-mock-render-example. This is working with React 16, React Native 0.51, and Enzyme 3.2.
In order to unit test your component with jest you can use enzyme-to-json
npm install --save enzyme-to-json
then your test would look like this:
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import MyComponent from './MyComponent';
it('should render component', => {
expect(shallowToJson(shallow(<MyComponent />))).toMatchSnapshot();
});
I'm not sure regarding your case with react-native.
I can share my case of using jest + enzyme with standard react.
When I needed to test some component and isolate it from others I used jest.mock, e.g.
jest.mock('../ComponentToBeMocked', () => {
return () => null;
});
Initially I found examples when the second argument (a function) should return just a string representing a name of the mocked component. But in that case I saw that distracting Unknown props warning.