How to use library that requires native setup?

[learnForeverr]

Hi, I successfully setup the library it works great. but i wanted to use react-native-reanimated 2 in my own library. I added it into peer dependency. But I cannot setup its configuration for native side as its documentation tell us to do. So the reanimated code in the root src folder index.tsx gives me the error. Can someone help how to setup reanimated configuration to run in the library side code?

[demchenkoalex]

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?

[learnForeverr]

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?

[demchenkoalex]

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.

[learnForeverr]

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.

[demchenkoalex]

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.

[learnForeverr]

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

[demchenkoalex]

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

[learnForeverr]

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.

[demchenkoalex]

Thanks for letting me know! Good luck with your project :)