React Native – How to create a common library?

How to setup a new library repo?

tsup

• Install dependencies

mkdir react-native-ui-library
cd react-native-ui-library

npm init

yarn add react react-native
yarn add tsup typescript @types/react @types/react-native --dev

npx tsc --init // Create tsconfig.json file

• Create example component

// src/components/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, TouchableOpacityProps } from 'react-native';

interface ButtonProps extends TouchableOpacityProps {
  title: string;
}

const Button: React.FC<ButtonProps> = ({ title, ...rest }) => {
  return (
    <TouchableOpacity {...rest}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

export default Button;

// src/index.ts
export { default as Button } from './components/Button';
// Export other components as needed

• Create tsup.config.ts

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
  // The file we created above that will be the entrypoint to the library.
  // If you don't set this here, you need to set "build": "tsup ./src" in the package.json' script block
  entry: ["src/index.ts"],
   
  // This is optional, if this is not specified, "dist" is used as default
  //outDir: 'lib',

  // Enable TypeScript type definitions to be generated in the output.
  // This provides type-definitions to consumers.
  dts: true,
  // Clean the `dist` directory before building.
  // This is useful to ensure the output is only the latest.
  clean: true,
  // Sourcemaps for easier debugging.
  sourcemap: true,
  // Export mjs module file which is equivalent to "module" folder of builder-bob
  format: ['cjs', 'esm'],
});

• Setup tsconfig.json

"jsx": "react-jsx", // Fix error "Cannot use JSX unless the --jsx flag is provided."

• Setup package.json so that other project can use import/require our library easily

// package.json
{
  ...
  "main": "./dist/index.js",
  "files": [
    "dist",
    "package.json"
  ],
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": { // This is optional
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
  ...
  "scripts": {
    "build": "tsup"
  }
  ...
}

{
  ...
  // It's important to set peer dependecies here, otherwise issue https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com
  "peerDependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.6"
  }
  ...
}

• Run library locally

// Run this in the root folder of library project
yarn build

// Run this in the root folder of react native project
yarn add /path/to/react-native-ui-library

// Use libarry component like this
<Button title="Press me" onPress={() => console.log('Button pressed')} />

create-react-native-library (old)

• Create a template library using create-react-native-library

npx create-react-native-library@latest react-native-awesome-library

• Change library name by editing package.json

{
  "name": "react-native-new-ui",
  ...

How to use this library locally?

Install local library into your React Native project

yarn add your_react-native-awesome-library_folder_path

Setup watch for library changes

• Edit metro.config.js in React Native project

const packagePath =
  '/Volumes/Data/New/react-native-awesome-library'

module.exports = {
  resolver: {
    nodeModulesPaths: [packagePath],
  },
  watchFolders: [packagePath]
}