Comments (9)
Hi @learnForeverr. When you add your dependency to peerDependencies
you actually telling the library user that they need to install that in a normal dependencies
and complete native side configuration, you don't do that in your library's code. Then inside your library you can also add react-native-reanimated
to the devDependencies
section so you will have TS types and autocompletion. Is this resolves your case?
from react-native-module-template.
No It gives me error. I have setup everything in example folder for reanimated. Then in main root I added reanimated in peer and dev dependency. The thing is when i use reanimted in example folder it works fine.
let someVal = useSharedValue(0);
But when I use it in root that is counter.tsx it gives me error. And also added the required config in both the babel files. After error. But it doesn't worked. Can you try using reanimated and let me know if I have missed something?
from react-native-module-template.
Ah yes, see this file https://github.com/demchenkoalex/react-native-module-template/blob/main/example/metro.config.js and add react-native-reanimated
and react-native-gesture-handler
to the ignore, similar to what you see with react-native
there. The error is because you have 2 instances of those libraries (inside the example node_modules and inside the library node_modules) and you need to ignore 1 instance.
from react-native-module-template.
Nope not working by adding there. The solution I found is to remove the reanimated from dev dependencies. Then it is working fine. But Intellisense is gone. Anyway not a problem for me. It is working thats enought. wish for @type file from reanimated would be great. Same problem was happening with react node module also. After removing them from dependency and dev-dependency worked. @type is doing its job. reanimated would be a pain.
from react-native-module-template.
But I know this error - it is exactly what I sent you above. You can send me how you modified metro.config.js
for verification. After modifying that file you need to restart packager, rebuild the app. I can give it a go if you want, but I am 100% sure it is fixable. I use the same template here https://github.com/flyerhq/react-native-keyboard-accessory-view with a dependency which has native code (react-native-safe-area-context). It's in peerDependencies
and devDependencies
and is ignored in example https://github.com/flyerhq/react-native-keyboard-accessory-view/blob/main/example/metro.config.js. Try again and restart packager/clear project/rebuild from scratch. It should work.
from react-native-module-template.
Yeah. Tried re-installing all.
This is the config I have in root/example/metro.config.js
const path = require('path')
const exclusionList = require('metro-config/src/defaults/exclusionList')
const moduleRoot = path.resolve(__dirname, '..')
module.exports = {
watchFolders: [moduleRoot],
resolver: {
extraNodeModules: {
react: path.resolve(__dirname, 'node_modules/react'),
'react-native': path.resolve(__dirname, 'node_modules/react-native'),
'react-native-gesture-handler': path.resolve(
__dirname,
'node_modules/react-native-gesture-handler'
),
'react-native-reanimated': path.resolve(
__dirname,
'node_modules/react-native-reanimated'
),
},
blockList: exclusionList([
new RegExp(${moduleRoot}/node_modules/react/.*
),
new RegExp(${moduleRoot}/node_modules/react-native/.*
),
new RegExp(
${moduleRoot}/node_modules/react-native-reanimated/.*
),
new RegExp(
${moduleRoot}/node_modules/react-native-gesture-handler/.*
),
]),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
}
Getting invalid hook error for react, because of two node modules. Need to check this file. It should ignore the other node modules
from react-native-module-template.
Invalid hook for react? I import react inside library's code like this import * as React from 'react'
and inside the example you can do usual import React from 'react'
not sure why I can normally import inside the library but it does the job
from react-native-module-template.
So I added reanimated in dependency instead of dev-dependency and it started working. with react it is still giving the hook error. But i dont need react there because @type is doing its job. So for me the error is resolved. Thanks for quick response demchenkoalex. I am working on windows just FYI.
from react-native-module-template.
Thanks for letting me know! Good luck with your project :)
from react-native-module-template.
Related Issues (18)
- Counter not showing HOT 3
- Fresh setup yields Xcode 12.4 build error: "ld: library not found for -lRNModuleTemplateModule" HOT 3
- Error finding the headers HOT 6
- I want to add custom fonts to the module HOT 1
- How can i add placeholder images? HOT 2
- Adding new library made with this template to another project HOT 12
- Assets folder is not included HOT 1
- Error: Invalid Hook Call HOT 11
- Question: How to add custom styles into the library? HOT 2
- Unable to resolve module ./index HOT 2
- React Navigation error within the library HOT 2
- Renaming module template causes module to return as null in JS (Android) HOT 1
- Suggestion for Seeing Changes immediately HOT 1
- How to add custom fonts
- How to upgrade?
- Error building example app HOT 3
- How to upgrade?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-module-template.