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

Viewed 69

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.

2 Answers

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

Related