GitHub Actions workflow for building & managing React Native libraries

My Workflow

I built a workflow which will help React Native library maintainers to build & manage their library based on my experience in building libraries in my open-source organization React Native Toolkit

The workflows are currently used in two of my libraries,

• React Native Better Image - workflow code
• Rex State - workflow code

Submission Category:

Maintainer Must-Haves

This is a workflow to help maintainers of React Native JavaScript libraries. It can also be easily modified for React.js libraries too.

Yaml File or Link to Code

react-native-toolkit / react-native-better-image

A better image component for react-native with fallback images & progressive loading support

React Native Better Image

A better image component for react-native with fallback images & progressive loading support

Built on top of View, Image & Animated components

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

• 📦 Installation
• ℹ️ Usage
• 📃 Documentation
• ✨ Motivation
• 📱 Example App

Installation

yarn add react-native-better-image
#or
npm install react-native-better-image

Usage

import BetterImage from 'react-native-better-image';
// ...

<BetterImage
  containerStyle={style}
  source={{
    uri: // image uri
  }}
  thumbnailSource={{
    uri: // thumbnail uri - will be displayed till image is loaded
  }}
  fallbackSource={{
    uri: // fallback image if original image fails to load
  }}
  // ...all other react-native image props
/>

Motivation

React Native only includes a basic image component. I used to try solutions like react-native-fast-image but none actually worked for…

View on GitHub

react-native-toolkit / rex-state

Convert hooks into shared states between React components

Rex State

Convert hooks into shared states between react components

---

PRs Welcome 👍✨

• 📦 Installation
• ℹ️ Usage
• 📑 Documentation
• 👨🏽‍🏫 Examples
  • Simple Counter with React.js on CodeSandbox
  • Dark Mode with React Native on expo. Project in example/ directory
• ✨ Why Rex State?

Requirements

Rex State is built purely on React Hooks hence it requires React > 16.8 to work.

Installation

yarn add rex-state
# or
npm i rex-state

Usage

Consider the following hook which lets you toggle theme between light & dark modes

const useThemeMode = (initialTheme = 'light') => {
  const [theme, setTheme] = useState(initialTheme)
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return [theme, toggleTheme];
};

You can use the createRexStore module from rex state to create a provider & a…

View on GitHub

Additional Resources / Info

I have written detailed posts on how to use these workflows in the DEV Community ﹣

1. Getting started with your React Native library
2. Automating your React Native library's build process
3. Automating the review process of your React Native Library's PRs
4. Automatically publish an update to NPM when you create a release in GitHub