Using React native component in Local NPM Package.

2 min read

Relsell Global : Cross platform development using React Native

Dear friends

We at Relsell Global as a startup, decided to contribute to open source but had no clue from where to proceed. Our devs worked diligently for past 1 day continuously to figure out a way to contribute to open source NPM Registry. For their indomitable courage and dedication , I personally salute them.

While you read this it may seem a bit of boring stuff for people not having a developer bent of mind. Sorry for that. This blog is part 1 of our steps for creating a package for publishing to npm public registry.

Lets start by creating a react native application using

react-native init publishdemolib

After the creation of project enter into project directory and open file App.js and edit few text in it. See below file

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> Welcome To Relsell Global. PublishDemoLib
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

And package.json

{
  "name": "publishdemolib",
  "version": "0.0.1",
  "private":true,
  "main": "App.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5"
  },
  "devDependencies": {
    "@babel/core": "7.8.3",
    "@babel/runtime": "7.8.3",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

We have made a simple change, in the App.js file just to make sure , that the package is getting included right in other react native app. As you might be knowing react native app is built over npm so its in itself is npm module.

Now coming back to what we were doing, run this command in terminal or command line inside the root directory of your react native project.

npm pack

This will pack the whole react native app (npm module) into .tgz package . this .tgz package or npm package can now be used in another react native app.

For doing this , create a new react native project. once its gets up, inside the terminal go to the newly created project directory. and run command

npm install <path of local package we created earlier, .tgz file> 

Now open index.js file for your newly created project. and edit it

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from 'publishdemolib';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

So if you see carefully we are using component App from publishdemolib

You run new app on device and you will see component is loaded from lib (other package).

To prepare our publishdemolib package so that we can publish them in npm registry we need to make some changes in package.json file for that package. Friends this brings to end of the this blog . We will be writing a new blog for other part and publish our contribution to open source.

Build something great. People are waiting for you.

All the best .

Happy coding.

One Reply to “Using React native component in Local NPM Package.”

Leave a Reply

Your email address will not be published. Required fields are marked *