My React Native Library

A reusable React Native + Expo component library built with JavaScript.

This library is designed to work with both Expo and React Native CLI projects while avoiding duplicate React instances and the Invalid Hook Call error.

Features

• ⚡ JavaScript only
• 📱 Expo compatible
• ⚛️ React Native compatible
• 🎨 Theme support
• ♻️ Reusable components
• 🚀 Performance optimized
• 📦 Tree-shakeable exports
• 🔥 Easy installation

Folder Structure

my-react-native-library/
│
├── example/                  # Expo testing application
│
├── src/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   ├── constants/
│   ├── theme/
│   ├── assets/
│   └── index.js
│
├── package.json
├── babel.config.js
├── metro.config.js
├── README.md
└── LICENSE

Requirements

• Node.js >= 20
• Expo SDK 57+
• React 19+
• React Native 0.82+

Installation

npm install my-react-native-library

or

yarn add my-react-native-library

Peer Dependencies

Install the required peer dependencies in your application.

npm install react react-native expo

If your library uses additional packages, install them in your app as well.

Example:

npm install react-native-reanimated
npm install react-native-gesture-handler
npm install expo-image

Usage

import { Button } from "my-react-native-library";

export default function App() {
  return <Button />;
}

Local Development

Clone the repository.

git clone https://github.com/your-name/my-react-native-library.git

Install dependencies.

npm install

Move into the example app.

cd example

Install dependencies.

npm install

Run the Expo app.

npx expo start

Using the Local Library

Inside the example application.

npm install ..

or

npm install ../

Building the Library

If you transpile the source code.

npm run build

Project Structure

src/
│
├── components/
│   ├── Button/
│   ├── Card/
│   ├── Header/
│   └── ...
│
├── hooks/
│
├── utils/
│
├── constants/
│
├── theme/
│
├── assets/
│
└── index.js

Export Components

export { default as Button } from "./components/Button";
export { default as Card } from "./components/Card";

Best Practices

• Keep React in peerDependencies
• Keep React Native in peerDependencies
• Keep Expo in peerDependencies
• Never bundle React
• Never bundle React Native
• Never bundle Expo
• Export everything from a single index.js
• Keep components reusable
• Avoid inline styles when possible
• Memoize expensive components
• Support light and dark themes

Invalid Hook Call Prevention

Always use:

"peerDependencies": {
  "react": "*",
  "react-native": "*",
  "expo": "*"
}

Do not use:

"dependencies": {
  "react": "...",
  "react-native": "...",
  "expo": "..."
}

This prevents multiple React instances.

Troubleshooting

Invalid Hook Call

Possible reasons:

• Multiple React versions
• Duplicate node_modules
• React installed inside the library
• Metro cache issue

Fix:

npm ls react

Only one version should be listed.

Clear cache.

npx expo start --clear

Delete dependencies.

rm -rf node_modules
rm package-lock.json
npm install

Metro Cache

npx expo start --clear

Duplicate React

Check.

npm ls react

There should be only one version.

Recommended Peer Dependencies

{
  "peerDependencies": {
    "react": "*",
    "react-native": "*",
    "expo": "*",
    "react-native-reanimated": "*",
    "react-native-gesture-handler": "*"
  }
}

Only include packages your library actually uses.

Publishing

Login.

npm login

Build.

npm run build

Publish.

npm publish

Versioning

Patch

npm version patch

Minor

npm version minor

Major

npm version major

Publish again.

npm publish

License

MIT License

Author

Your Name

GitHub: https://github.com/your-name

Support

If you find a bug or have a feature request, please open an issue on GitHub.

Changelog

v1.0.0

• Initial release
• Expo support
• React Native support
• JavaScript implementation
• Theme support
• Reusable components