npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rn-lib-temp

v3.1.2

Published

A usable template for setting up a new React Native library. It's designed to reduce the hassle of configuration and help quickly start the project.

Downloads

220

Readme

📚 React Native Library Template

This repository is an optimized React Native library boilerplate, designed to boost your library development process.🧑‍💻🔧 It's tailored for both bare React Native applications and Expo-created ones. This boilerplate is equipped with valuable tools, simplifying library development and ensuring high-quality code.

🌟 Features

  • Enforces code style with eslint, prettier, and TypeScript,
  • Precommit hooks checking code style and type issues,
  • GitHub Actions to aid in your development process,
  • Automated library deployments to npm and hassle-free versioning thanks to semantic-release,
  • Provides an example app for both bare React Native projects and Expo-managed ones,
  • jest setup is also available with example tests

📋 Requirements

Node 18 or greater is required. Development for iOS needs a Mac and Xcode.

🚀 Quick Start

To create a fresh project, just run:

npx rn-lib-temp init <projectName>

Before starting development, go to the directory where you created the template project and install all necessary dependencies with yarn:

yarn

For iOS only: Install required Pods for the bare React Native example app (example/fabric or example/paper):

yarn pod

💫 GitHub Actions

To use the GitHub Actions bundled with this boilerplate, you'll need to provide 2 secrets (refer to this page for more about secrets):

  • GH_TOKEN - a GitHub token with repo permissions (check docs for more on GitHub access tokens).
  • NPM_TOKEN - an npm token employed by semantic-release for automatic library deployment (see docs for info on npm access tokens).

Alternatively, remove workflows from the .github directory if you prefer not to use GitHub Actions.

🛠️ Library Development

🏗️ Project Structure

he repository uses the most common monorepo structure where the example directory contains the example app and the packages directory contains sources of the library itself, as well as, documentation and other packages (if necessary).

Library Source Files

By default, the resulting library will include files specified under the files key in the packages/<your-library-name>/package.json:

  • src directory - where you write all library source code,
  • dist directory - generated by react-native-builder-bob during the build process,
  • LICENSE - you should include your LICENSE file because it's not provided by default,
  • CHANGELOG.md - a file containing all version history with included changes, automatically generated by the semantic-release library,
  • README.md - readme file from the repository root directory

Library Dependencies

Included in the library
  • Usually for smaller dependencies or these which must point to the exact version,
  • Should be listed under dependencies field in the packages/<your-library-name>/package.json
Dependencies that must be installed by the user
  • Usually large dependencies or these, which are commonly used by other packages (such as react-native-reanimated),
  • Should be listed under peerDependencies field in the packages/<your-library-name>/package.json,
  • Should be installed as dependencies of the example app (added to the example/app/package.json)

All dependencies should be installed with yarn in order to ensure that yarn workspaces work properly.

📱 Example App

The example app is located in the example directory. Inside, you'll find three subdirectories:

  • app - Where the example app source code is located
  • fabric - Sources necessary to run the bare React Native app on Fabric (the New Architecture)
  • paper - Sources necessary to run the paper React Native app on Paper (the Old Architecture)
  • expo - Sources of the expo-managed app

If you don't need to include expo or fabric/paper React Native app example, you can just remove the corresponding directory.

Useful Commands

For launching the bare React Native example app:

yarn start|android|ios|pod

For the Expo React Native app:

yarn start|android|ios
  • start - starts metro client
  • android - starts example app on the Android emulator/device,
  • ios - starts example app on the iOS simulator/device,
  • pod - installs Pods required by example app native iOS dependencies.

🔄 Automatic deployments

The release.yaml workflow included in the project contains the auto deployment logic. By default, the deployment will be caused on the workflow dispatch action (manually from the GitHub Actions page). You can change this behavior by modifying the workflow triggers.