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.
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.
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
New to React Native:
I started a brand new project with Expo init and then I followed the instructions mentioned inhttps://reactnavigation.org/docs/hello-react-navigation
I run the project with expo start and I get this error.
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.
invariant
browser.js:38:14
runApplication
AppRegistry.js:193:13
__callFunction
MessageQueue.js:425:19
__guard$argument_0
MessageQueue.js:112:6
__guard
MessageQueue.js:373:10
callFunctionReturnFlushedQueue
MessageQueue.js:111:4
callFunctionReturnFlushedQueue
[native code]:0
Any suggestions?
Open the index.js, the content of the file should be like this:
import { AppRegistry, Platform } from 'react-native';
import App from './App';
AppRegistry.registerComponent('X', () => App);
if (Platform.OS === 'web') {
const rootTag = document.getElementById('root') || document.getElementById('X');
AppRegistry.runApplication('X', { rootTag });
}
If you have this error Invariant Violation: “main” has not been registered you have to replace the 'X' by 'main'.
Another example :
If you have this error Invariant Violation: “app” has not been registered you have to replace the 'X' by 'app'.
For android :
Open ./android/app/src/main/java/[multiple folders]/MainActivity.java
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
#Override
protected String getMainComponentName() {
return "X";
}
The 'X' of MainActivity.java and index.js must match.
This worked for me:
delete node_modules and your lockfile (package-lock.json / yarn.lock)
change the expo package version in package.json to 38.0.8
run yarn or npm install
run expo install react-native-safe-area-context
The problem is that if you are using expo then you have to registerComponent differently. All the information is in the docs. https://docs.expo.io/versions/latest/sdk/register-root-component/
import { registerRootComponent } from 'expo';
import React from 'react';
import { View } from 'react-native';
class App extends React.Component {
render() {
return <View />;
}
}
registerRootComponent(App);
In my case, the problem was solved when I called
AppRegistry.registerComponent(appName.toLowerCase(), () => App);
in index.js. So it looks like the first parameter is to be passed based on what error message is shown. In my case, my project name was AwesomeProject and the error reported by Metro was:
Invariant Violation: "awesomeproject" has not been registered.
so I figured that adding toLowerCase() will solve the problem and it did!!
However, I was facing this problem when trying to run it on macos using npx react-native run-macos and after this was solved, I tried to invoke the iOS version, then I got Invariant Violation: "AwesomeProject" has not been registered.
So finally I got both working by registering the App twice as below:
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName.toLowerCase(), () => App);
The same also works with npx react-native run-android.
workarounded by:
AppRegistry.registerComponent('main', () => App);
In my case I was missing some packages which are mandatory to install.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
index.js
AppRegistry.registerComponent("X", () => Root);
If you are facing this issue in Android then make sure that both mainactivity.java and index.js contains same "X"
mainActivity.java
#Override
protected String getMainComponentName() {
return "X";
}
If you are facing this issue in iOS then make sure that both AppDelegate.m and index.js contains same "X"
AppDelegate.m
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:#"X" initialProperties:nil];
Change your index.js .
import { AppRegistry, Platform } from "react-native";
import { registerRootComponent } from "expo";
import App from "./App";
import { name as appName } from "./app.json";
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
if (Platform.OS == "android") {
registerRootComponent(App);
} else {
AppRegistry.registerComponent(appName, () => App);
}
In my case, I had a class that existed solely to model the structure of a meal i.e not a react class component. I forgot to export that class but was calling it in the application new Meal(foo, bar .....) and that triggered this error. I found it by just tracing my steps to the most recent addition I had made before I started getting this error.
In my case it a specific package called graphql-type-json that was the problem.
So the 2nd part of the error was referring to the real issue:
A module failed to load due to an error and AppRegistry.registerComponent wasn't called."'
The loading of the incriminated package was throwing an error 'GraphQLError: Syntax Error: Expected Name, found "}".' which stopped the App loading and threw the Invariant Violation error.
After removing precisely the graphql-type-json (yarn remove graphql-type-json) package, expo loaded fine again.
If you're using react-native-reanimated and Expo, make sure to install it using:
expo install react-native-reanimated
See the documentation for further help
import app name from app.json like this:
import {name as appName} from './app.json';
then add appname in registerComponent
AppRegistry.registerComponent(appName, () => App);
The main reason to get this error is that, for some reason, App.js is not functioning properly. It may be because that you are running the server from a wrong folder. In my case, I always got another error along with this error, so I kept fixing those and this error got resolved automatically.
It can happen after you've used expo prebuild --clean and when in your Podfile/AppDelegate.m was some 3rd party library specific import, like react-native-maps, or Google Maps API Key.
You'd need to put back these imports into Podfile/AppDelegate.m, next cd ios, next pod install. Still, expo start might be not enough and you'd need to build your project using Xcode. After building & running your code on Xcode, the error will be gone and the emulator will start.
There is some difference between how Expo and Xcode build/simulate the app, but I'm at quite an early stage regarding distinguishing these differences. I've also noticed sometimes you need to first build the project on Xcode first, if the app isn't installed on the simulator yet, and only then running the app from simulator launched via expo start --dev-client. Otherwise, I was getting an error Error: The development client (com.XYZ.ABC) for this project is not installed. Please build and install the client on the simulator first. or Invariant Violation: Native module cannot be null. or Invatian Violation: 'main' has not been registered....
If you have changed the application and package name using react-native-rename,
in the file ios/AppName/AppDelegate.mm
Synchronize the application name with the app.json file by finding the lineUIView *rootView = RCTAppSetupDefaultRootView(bridge, #"AppName", nil);
I'm not great at diagnosing these stack traces but my project just suddenly started throwing this error. I installed react-native-skeleton-content which then threw errors for react-native-gesture-handler here I am thinking that gesture handler was just a result of some other peer dependency updating.
I uninstalled both and voila. The expo server runs again and processes the app just fine. Had I slept on it I never would have known but yeah, as a newbie, try deleting a new package you just installed and it's dependencies. It's likely the cause of a new issue.
I finally found a solution that worked for me!
I just execute it again:
npm install -g expo-cli
ps.: In my case, it may have happened because I tried to install Turtle CLI and had to remove it to free disk space. This may have corrupted the expo files.
For iOS, we need to make one additional change in ios>appName>AppDelegate.mm file,
Search for RCTAppSetupDefaultRootView and update old_app_name to new_app_name
I am using NativeScript 2.0 with Visual Studio Code and TypeScript 1.8 support (Windows).
I am developing a module, lets say MyModule-common.ts with an Android specific implementation (MyModule.android.ts).
Currently I cannot access Android classes!
If I write something like
var MyModule = require("./MyModule-common");
export class MyClass {
private _activity: android.app.Activity;
}
I get
error TS2503: Cannot find namespace 'android'
when I build my project.
Is there something to install extra or configure?
The TypeScript definition files for Android are by default not included as they are fairly large.
You can get then by doing a npm install tns-platform-declarations --save-dev