I would like to use https://github.com/dgladkov/react-native-image-rotate in react-native project
I download it with yarn add react-native-image-rotate
I link it with react-native link
I import it in my component with import ImageRotate from 'react-native-image-rotate';
But when I try to use it I have a Cannot read property 'rotateImage' of undefined
I put a break-point in node_modules/react-native-image-rotate/index.js on the line:
const RCTImageRotateModule = NativeModules.ImageRotateModule;
And in the object NativeModules there is no ImageRotateModule object.
How Can I add ImageRotateModule in NativeModules ?
Im using react-native 0.50.3
Thx
react-native link react-native-image-rotate
Related
When I' using the react navigation version 6.1.1. I face this error.
TypeError: Cannot read property 'createDrawerNavigator' of undefined
I have import the createDrawerNavigator from #react-navigation/drawer. But When I start the app the I saw this error TypeError: Cannot read property 'createDrawerNavigator' of undefined. How can I solve this error?
Screenshot of the error
We have to import the gesture handler in the main index file. like this
import 'react-native-gesture-handler';
install "react-native-reanimated" and config your bable.config file
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'react-native-reanimated/plugin'
],
};
and then
pod install
yarn start --reset-cache
Open your android folder in android studio, then run from there.
The code in app.js file with import statements for react redux is created to display a header with a text called "Tech stack".
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
const App = () => {
return(
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
</View>
</Provider>
);
};
export default App;
This is the index file
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent(tech_stack, () => App);
While running this on the terminal, it throws a error saying unable to resolve module 'react-redux'.
Close the JS bundle(a terminal starts when you run app for first time) and rerun it using the command react-native start from the project path. Basically, you need to rerun the JS bundle after every package installation.
Install 'react-redux' by using
npm install --save react-redux
if you not installed it. By seeing your comment as you mentioned that you installed redux only.
Then restart the JS bundle by using
react-native start --reset-cache
I've faced this issue just now. actually, Our (you and I) main issue is naming the global state folder name is redux and the bundler falls in a conflict because there is a folder inside node_modules that name is redux too.
In fact, the main issue is this line:
import { createStore } from 'redux';
I renamed the resux stuffs folder to reduxStore instead of redux and then everything works properly.
This error occurs because you do not have Redux-Thunk middleware installed on your application. To install run:
npm install redux-thunk
Then, restart your application:
react-native start
More information: https://github.com/reduxjs/redux-thunk
I just ran into this problem and solved it by installing redux in addition to react-redux. Apparently, react-redux requires it.
I try to use jsPDF in a React-Native app but i have this error on loading.
Unhandled JS Exception: undefined is not an object (evaluating 't.createElementNS')
I try to install jsPDF like this:
npm install jspdf --save
and by specify the git commit, the lib is correctly downloaded in the node_modules directory.
I tried to import like this:
import * as jsPDF from 'jspdf';
or
import { default as JSPDF } from 'jspdf';
or
import jsPDF from 'jspdf';
or
var jsPDF = require('jspdf');
So anyone have an idea ?
Thanks.
Is it even for React Native? Something like this better?
https://www.npmjs.com/package/react-native-pdf-lib
I am new in React Native. Right now, I am studying Props and State. I wanted to try the FlatList Component in this doc https://facebook.github.io/react-native/docs/flatlist. However, I am getting this error.
You're using typed JavaScript known as Type script.
If you want to use TypeScript (I highly encourage it, then you can do so by following below tutorial):
Migrating to TypeScript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
To just get rid of the error!
state = {selected : (new Map())};
TypeScript Migration Continued...
Adding TypeScript
The next step is to add TypeScript to your project. The following commands will:
add TypeScript to your project
add React Native TypeScript Transformer to your project
initialize an empty TypeScript config file, which we'll configure next
add an empty React Native TypeScript Transformer config file, which we'll - configure next
adds typings for React and React Native
Okay, let's go ahead and run these.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev #types/react #types/react-native
The tsconfig.json file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
Migrating to TypeScript
Rename the generated App.js and __tests_/App.js files to App.tsx. index.js needs to use the .js extension. All new files should use the .tsx extension (or .ts if the file doesn't contain any JSX).
If you tried to run the app now, you'd get an error like object prototype may only be an object or null. This is caused by a failure to import the default export from React as well as a named export on the same line. Open App.tsx and modify the import at the top of the file:
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
Some of this has to do with differences in how Babel and TypeScript interoperate with CommonJS modules. In the future, the two will stabilize on the same behaviour.
At this point, you should be able to run the React Native app.
I am trying to mock a module that ships with react-native (not 3rd party modules), such as LayoutAnimation:
import * as RN from 'react-native'
RN.LayoutAnimation = jest.fn()
But the test fails with:
TypeError: Cannot read property 'decelerationRate' of undefined
at Object.<anonymous> (node_modules/react-native/Libraries/Components/WebView/WebView.ios.js:555:3254)
at Object.get WebView [as WebView] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:73:22)
Is there any other way to mock/stub out a RN module such as LayoutAnimation or any other react-native (not 3rd party) module?
Try to simply do jest.mock('LayoutAnimation');
You got this message because of line №217 in /node_modules/react-native/Libraries/Components/WebView/WebView.ios.js
decelerationRate: ScrollView.propTypes.decelerationRate
Because ScrollView is mocked ScrollView.propTypes === undefined
I solved this issue by adding:
import {PropTypes} from 'react';
ScrollView.propTypes = { decelerationRate: PropTypes.number };
to setup script file (file which set by setupTestFrameworkScriptFile property in jest section of package.json);