We Keep Coding

struggling for ract-native/react npm package + storybook

Hi i struggling to create a npm package, like so:
Phase 1:
a npm package that hosts react components and react-native components.
it will have storybook so to display either the react components and the react-native components
Phase 2: (this phase is not the problem, just post it for reference)
a desktop app that consumes the react components from the npm package
an expo application that consumes the react-native components from the npm package
At first the npm package can have just 2 simple components will do one for react and one for react-native, like so:
/desktop-components/Button.tsx
import React from 'react';
export const Button = () => <button>click</button>
mobile-components/Views.tsx
import { View } from 'react-native';
export const Views = () => (
<View><Text>Hello world</Text></View>
)
What i have tried so far:
created a library like so: npx create-react-native-library#latest react-native-awesome-module.
But in the doc here: https://reactnative.dev/docs/native-modules-setup the next steps are to create IOS module or android module and it becomes complex.
So, is it possible to just create 2 differenct components into the package and import them into expo and in the react app ? or should i go with the tutorial and start writing in java ?
are there any other examples of a npm package that hosts react components and react-native components, that i can install storybook in it ?
i hope my query is not so complex.

Error. Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I am creating a library of components. In this library, I created one component, connected it locally via npm link to my project, all work, the component was displayed. But when I decided to include styled-components to create a component. Here is my component.
import React, {FC} from 'react'
import styled from "styled-components"
import './mytbc.css'
export interface MyButtonProps{
color:string;
big?:boolean;
}
const MyCom: FC<MyButtonProps> = ({children, color, big, ...props}) => {
const MyCommon = styled.button`
background:${color};
padding:10px;
`
return (
<MyCommon>
{children}
</MyCommon>
)
}
export default MyCom
Then errors appeared in the console.
How to fix these errors and what are they related to?

I also had similar case when I was working with lerna and yarn workspaces. In my case the problem was using multiple and different versions of react, some where hoisted some were not during lerna compilation process.
According to docs
In order for Hooks to work, the react import from your application
code needs to resolve to the same module as the react import from
inside the react-dom package.
Run this command to list installed versions of react. And if you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.
npm ls react
OR
yarn list react
Read more about the problem and solutions here

check that you have styled-components in your dependencies in file package.json
by:
cd project_name/src
npm install styled-components

Module not found: Can't resolve 'React' using npm package

I am using a simple package in nextjs project getting this error
Module not found: Can't resolve 'React'
I am trying to use this package
https://www.npmjs.com/package/button-publishing
Git repo : https://github.com/naveennsit/button-ns
Plugin have only hello world example
I am using like this
import Test from 'button-publishing'
function HomePage() {
return <Test/>
}
export default HomePage
here is my code
https://repl.it/#naveennsit/LastingKosherMonitor#pages/index.js

According to this comment:
https://github.com/vercel/next.js/issues/1588#issuecomment-354499850
You can have some issue by running next build. You should consider to run npx next build instead.
Just to quote the comment in the issue:
Explanation: Running next build uses the global installation of next and I think that it also looks for a global installation of react and react-dom. Running npx next build uses the local installation of next, react and react-dom.

How to migrate from React Native app to a react-native module

I've created a react native app with react-navigation (is just a react-native code won't needed to develop in a specific platform) is a very short app with 3 screens to list info from an API.
This is working as registered application.
Now what I want to do is use my app as an imported component to be integrated from another react-native app ().
--------------------------------------------------------------------------------------
# AnotherApp.js
import React from 'react';
import { MyModuleFlow } from 'my-module-flow';
const AnotherApp = () => {
return (
<MyModuleFlow
param1={someValue}
onSuccess={data=> {
console.log('success', data);
}}
/>
);
};
export default AnotherApp;
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
# index.js
import { AppRegistry } from 'react-native';
import AnotherApp from './AnotherApp.js'
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => AnotherApp);
-------------------------------------------------------------------------------------
What should I do to migrate my project? my app has now some linked dependencies, I don't have any idea what to do.

You should create an npm module and publish it. It will bundle all your files and will push it to npm. Then you can import your modules anywhere.
This is what i follow: https://medium.com/#KPS250/publishing-react-native-modules-to-npm-40d2c4878a8e

Well, I found the solution by myself looking at bob library from the community
What I had to do was setup the project as js-module to be build,
native folders as ios and android wouldn't be needed anymore, so I removed those
bob init (following the interactive cli)
move all dependencies to devDependencies, and set
"peerDependencies": {
"react": "*",
"react-native": "*"
}
if you are using tsx like me, then run tsc --noEmit and fix all the warnings
yarn (will exec bob build, force it otherwise)
next steps, add an example folder -> all the info to do that is here.
if you have doubts use this repos as guide: react-native-tab-view react-native-paper
finally the bob build gave me the module wanted with the size I've expected 100kb and that's it
There is a special module to handle release (publish to npm, change the package version, tag branches, etc) release-it.
Hope that someone find this useful

Unable to compile react application as it says "Module not found"

I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!

By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.

If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .