yarn-expo-workspaces with react hooks? - reactjs

I feel like I was finally able to setup my expo monorepo using expo-yarn-workspaces until I encountered the following error:
Invariant Violation: Hooks can only be called inside the body of a function component. (https:fb.me/react-invalid-hook-call)
Has anyone successfully created an expo monorepo working with react hooks?
I should also mention that the expo app was working perfectly with no-hoist until I needed to include other packages from the monorepo into it. So it seems the issue is now how yarn-expo-workspaces is not compatible with hooks, or am I missing something?

Related

React Hooks behave differently when imported from built npm module

I'm trying to build a React Components and Hooks Library.
When using hooks that depend on useEffect and the DOM, my components and hooks break when they come from inside the NPM published module. If i import them from inside my source directory they work fine.
Examples:
working, importing from inside project:
https://strooks-debug-working.vercel.app/
not working, importing from npm module.
https://strooks-debug-working-59iztjqwx-andrepadez.vercel.app/
github repo:
https://github.com/andrepadez/strooks-debug/
branch master: working
branch develop: not working
any help would be greatly appreciated as i have been struggling with this for two days straight...

React native, main file is in wrong extension

I'm creating a react project with this command npx react-native init projectName,
It does create the project, however App.js have typeScript code in it, it compiles just fine but VScode keeps throwing an error about annotations being a part of .ts file only.
IK typescript, so if react does create typeScript code then why is the extension .js.
Is there something that I'm doing wrong?
One more thing I'd like to add, If I manually change App.js to App.tsx the error does go away and it still works fine, but I don't think that's the right way to go, and I don't intend to turn off javaScript checking is vs Code
It's not typescript, but flow. More info: https://github.com/facebook/react-native/issues/29123
As mentioned in the other answer, what you are seeing in App.js is not TypeScript code. It is Flow, facebook's own static type checker for JavaScript.
If you want to use TypeScript then create project using this template:
npx react-native init MyApp --template react-native-template-typescript
You can find more details about TypeScript integration in React Native here:
https://reactnative.dev/docs/typescript

I am trying to build NPM module with React Hooks and Webpack , so after Publishing package when i try to use it's giving Invalid Hook call Error

so after publishing package when i import it in local application then it's giving me
There are three common reasons you might be seeing it:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
after some googling i have checked with npm ls react command and it show me only 1 version available and i guess that's not an issue in case,hence i have change it to class based component to make it work.
So i would like to know is there any way to implement react hooks in npm module with webpack or any other way if possible ?

Error: [class] is not a constructor when importing npm module in react-native application

I'm writing react-native application and using npm module #waves/signature-adapter. When I make import { Seed } from '#waves/signature-generator'; compiler returns an error undefined is not a constructor (evaluating 'new __1.Base58('senderPublicKey')'). At first I thought the way I imported the lib was wrong but then I tried to do the same for new react application (not react-native) and it is imported and works with no errors.
The module is written in typescript but I'm not sure it really matters cause my app uses lots of other modules written in typescript. I try to understand what's wrong cause I have same-same code in both apps, but it gives the error in react-native.
The reason was the lib used native node.js modules which react-native didn't support. I had to make a patch using patch-package to solve the problem.

Creating a React and React Native component in a single npm package

Is it possible to create a component, living in a single npm package, that would work in both React and React Native?
I have created two variations of a component (View vs div and so on), one for the web and one for react native. I could easily use a build script or something like preprocessor.js to build a react or react-native output of the library but is there a better way?
Have anyone had any luck building a component that you could simply npm install into a react or react native project and just have it use the correct implementation? Or would I have a problem where both the react and react-native dependencies would exist in my package.json? Thanks!

Resources