Forem: Dani Akash 🧪💥

GitHub Actions workflow for building & managing React Native libraries

Dani Akash 🧪💥 — Wed, 16 Sep 2020 10:39:15 +0000

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,

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 ﹣

Automatically publish an update to NPM when you create a release in GitHub

Dani Akash 🧪💥 — Wed, 16 Sep 2020 10:22:27 +0000

In my last blog post, we created a workflow for reviewing Pull Requests. This is the final part of the series where we'll set up a workflow to automatically push updates to our package on NPM every time we create a new release in GitHub.

This workflow is used in the .github/workflows/publish.yml file of my library rex-state

GitHub Releases

Releases section allows us to tag individual commits with proper version numbers & a detailed changelog.

I use it as my source of truth for managing versions. Which means, every tag should be automatically published to GitHub.

Trigger

This workflow will run on release when the the type is published

name: publish
on:
  release:
    types: [published]

Jobs

This workflow has three jobs. First two are linting & testing to ensure the code is stable.

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

Once the above two jobs are over, we'll now use the JS-DevTools/npm-publish Action to publish an update to NPM.

You need to create an NPM Auth token and add it to your repository or organization secret under the name NPM_TOKEN

Then add the publish the job to your workflow ﹣

  publish:
    needs: [test, lint]
    name: Publish to npm 🚢📦
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - uses: JS-DevTools/npm-publish@v1
        with:
          token: ${{ secrets.NPM_TOKEN }}

Whenever you create a release in your repository from now onwards, you'll have an update published to your npm package.

This completes our React Native Library setup, you can use the setup + workflows you learnt in this 4 part series to publish both your React Native & React.js libraries.

I have been using it for both react-native-better-image which is for React Native & rex-state which works with both React.js & React Native.

In future, I'll be moving all my libraries in React Native Toolkit to this workflow which will help me maintain all my current 10+ libraries & some upcoming ones efficiently.

If this series helped you or you have any feedback feel free to post a comment or reach out to me on twitter. I'd be happy to help! :D

Automating the review process of your React Native Library's PRs

Dani Akash 🧪💥 — Wed, 16 Sep 2020 08:54:57 +0000

In my last blog post we saw how to automate the build process of your React Native library.

Reviewing PRs are an important part of managing Open Source libraries. However, they might require a considerable amount of time & effort from your busy life which means, you need to be as efficient as possible.

My whole toolchain was set up around making the review process as easy as possible. This time we'll create Github Action workflows to make the review process a whole lot simpler.

Every PR raised to the library will have the following checks performed automatically

Linting & Testing
Code coverage report
Deploy preview of the updated storybook docs
Build a review version of the example mobile app with link to quickly test it
Send all stories to chromatic to do a visual review

As soon as the PR is sent, you should be able to see the progress of the review workflow ﹣

The above image is from a PR of my rex-state library. Let's look into how we can implement this effectively.

You can find my working review workflow at .github/workflows/review.yml file of my rex-state library.

Triggering the workflow

This workflow will run on all pull requests

name: review
on: pull_request

Linting & Testing

This step is the same as what we did for our build workflow. All the other jobs will run only after Linting & Testing are complete.

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

Coverage report

Previously on the build step, we used Code Climate to store our test coverage reports. However, on PRs we need a way to quickly check the test coverage for the incoming code.

For this, we can use the romeovs/lcov-reporter-action which will post a nice comment on the PR with the test coverage details. You'd get a report like this following comment ﹣

Add the following configuration for receiving the coverage as a comment ﹣

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn test --coverage
      - uses: romeovs/lcov-reporter-action@v0.2.16
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

Deploy preview of the updated storybook docs

Since I was using the Netlify Github App, I'm getting the deploy previews out of the box without any kind of additional setup. You can try the Netlify CLI if you want to manually enable deploy previews with Github Actions.

Review Version of the Example App

This is where the power of expo toolchain shines. You can use the expo-cli to publish the app in a separate channel which you can use for your review purpose.

The expo team have also provided detailed documentation on their expo-github-action. Add the following configuration to your workflow (replace the URL in the msg with your application's URL)﹣

  expo-publish:
    needs: [test, lint]
    name: Publish to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - run: expo publish --release-channel=pr-${{ github.event.number }}
        working-directory: example
      - uses: unsplash/comment-on-pr@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: App is ready for review, you can [see it here](https://expo.io/@daniakash/rex-state-example?release-channel=pr-${{ github.event.number }}).

From now on, for every PRs you'll get a comment just like this one ﹣

Sending stories to chromatic

Finally to do a visual review if the PR has affected your stories you can send the stories to chromatic. The configuration is the same as our last one, chromatic is smart enough to figure out that the data is from a PR!

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Once you have everything ready, Your PRs will now have detailed information on the things you'd otherwise have to check manually every time ﹣

We got a powerful review workflow now. In the next blog post, let's publish the library to NPM every time you create a new release in GitHub!

Getting started with your React Native library

Dani Akash 🧪💥 — Wed, 16 Sep 2020 03:44:30 +0000

React Native is an excellent framework for building mobile apps. The best thing about React Native is how it provides the developers with a solid set of primitive UI components. This means there's plenty of opportunities for you to build your own library and publish it to the open-source community.

The Problem

Building & maintaining quality open-source libraries is hard work. Especially React Native libraries are harder since they often need to be verified on both Android & iOS platforms.

I ran into this exact issue when I started working on open-sourcing the libraries I built for my personal use. I created an organization that holds the collection of the libraries. It's called React Native Toolkit

I wanted to ensure developers get to try out all my libraries, at the same time, I should be able to quickly make small updates and bug fixes without having to spend too much time.

In summary, I wanted to ensure I covered all the following 6 items for my open-source libraries,

Proper Linting of code & commit messages
A working example in an actual app
Unit tests
Detailed documentation that covers all the use cases
Visual testing after code changes
Easily review PRs

Solution

Once I have created a list of things needed for my open source projects, I started exploring various tools that'll help me achieve the individual targets.

So I started working on my library react-native-better-image while evaluating the various options. I had two major tasks

Picking the right tools
Automate as many tasks as possible

Picking the right tools

React Native Community's Bob - Linting + Example App

This almost felt like a no-brainer. React Native Community which hosts a collection of quality libraries already had a tool which would make building react native libraries so much simpler.

Bob had almost everything I needed in terms of Proper Linting & having a working example app using the library.

The example app is also pre-linked with the library's source so you can just start writing code and you probably won't have to worry about anything. Just import your library inside the app & setup your working example!

That's 2 out of 6 items covered

Alternatives

One other alternative I tried in this category is create-react-native-module. This one is good but bob is just too better.

React Native Testing Library - Unit Tests

I'm a big fan of the testing library in general. It encourages you to write tests in the way your software is being used rather than being implemented. Which is why I immediately picked up the React Native Testing Library that brings all the best parts to the native side of development.

If your library uses native iOS or Android code, then you'll have to write tests that run on the native side. However, since all my libraries are pure JavaScript, I didn't explore any on the native side. Suggest the tools you use for this purpose in the comments :)

That's 3 out of 6 items covered

Alternatives

If your library requires an end to end testing, then you can add detox to your project. You can use the example app created by Bob to run the test cases.

Another common library for writing unit tests is Enzyme. If you are already familiar with enzyme then you can use it for your library.

Storybook - Documentation

Storybook v6.0 was recently released with improved documentation. While storybook already has a React Native version, the react version is much more powerful & better suited for our documentation.

The documentation can be hosted a static site & it will showcase your library in real-time. Check out my react-native-better-image documentation.

To get storybook working with your React Native library, you can add it to your example expo app following this example from the expo team.

I only had to change the webpack config in my .storybook/main.js file and it worked well using react-native-web

4 out of 6 now covered

Alternatives

I haven't personally tried any alternatives to storybook yet. Maybe you can read about it in this blog post by logrocket.

Chromatic - Visual Testing

One other reason I was firmly sticking to storybooks is their integration with chromatic. Chromatic lets you quickly do visual tests on your stories. You can also easily share stories & get feedback from others.

They have a generous free tier & their team is kind enough to provide me support when I ran into issues with my react-native + storybook setup.

I'll be using chromatic for reviewing PRs, will explain about it in the automation section.

Chromatic makes visual testing a breeze! That makes 5 out of 6 items handled

Expo Cli - Reviewing PRs

Reviewing PRs is the most important thing in Open Source projects. I have been struggling to review PRs in some of my old projects as I have to manually clone & run the code to check how it affects my library. Many times I just don't have the bandwidth to do so...

This time, however, I have decided to make the reviewing process as easy as possible. The trick is to have a good example application in your library that covers almost all use cases. Once someone raises a PR, you can generate a build using the Expo CLI. Expo team has been making this process a lot easier by creating a Github Action that can easily publish a review version of your library.

Along with this, the stories in the PR are also pushed to chromatic. This means I should be able to review a PR fairly faster. I haven't yet received any PRs yet, so fingers crossed 🤞

Automating stuff with Github Actions

Now that we have all the right tools in place, it is time to automate the Build, Review & Publishing process for your new React Native library. Which will be covered in the next part of this series!

Automating your React Native library's build process

Dani Akash 🧪💥 — Tue, 15 Sep 2020 10:10:24 +0000

In my last blog post, I explained about the tools we will be using for your react native library. We are now going to automate the build process.

All open-source Github repositories have free Github Actions available with which we can automate most of our workflows. I'll be using Github Actions throughout the automation process.

The library's build consists of the following items ﹣

Linting
Running Tests
Publishing the test coverage
Publishing the example app to expo
Publishing the stories to chromatic
Publish the storybook which contains documentation as a static site

You can find my build workflow in the .github/workflows/build.yml file of my react-native-better-image project. This is how the build process should look like ﹣

When to trigger the workflow

I wanted the build workflow to ensure the master branch is always stable. Hence it will run on all the pushes to master. But it will not run for tags, as I have planned another release workflow for this

name: build
on:
  push:
    branches:
      - master
    tags:
      - '!*' # Do not execute on tags
    paths:
      - example/*
      - src/*
      - test/*
      - __tests__/*
      - '*.json'
      - yarn.lock
      - .github/**/*.yml

Linting

Since we are using react-native-community/bob in our project, we can run both lint & typescript scripts in the package.json file which is enough to complete the lint process

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

Testing & Coverage

For displaying the test coverage, I decided to use code climate for open source projects. They also have a nice action available at paambaati/codeclimate-action.

Code climate checks your code for best practices and provides you with maintainability metrics. Along with that, you'll also get code coverage reports. Once you setup code climate you can add their badges to your repo that gives everyone a live code quality score ﹣

The following configuration is used for running tests ﹣

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

Once both linting & testing jobs are completed, you have to push your code coverage to code climate. Following their docs you need to create a secret in your repository with name CC_TEST_REPORTER_ID after which add the following configuration

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - uses: paambaati/codeclimate-action@v2.5.3
        env:
          CC_TEST_REPORTER_ID: ${{secrets.CC_TEST_REPORTER_ID}}
        with:
          coverageCommand: npx yarn test --coverage
          debug: true

Publish example app to expo

Publish should also happen after the lint & test jobs. This time we will be using the expo/expo-github-action. As per the action's docs, you'll have to add your expo username & password to your repo's secrets under the name EXPO_CLI_USERNAME & EXPO_CLI_PASSWORD.

If you have an organization, you can add it under the organization secrets and share it with all your repositories!

The first step to publish is to run yarn bootstrap command. However, the next step expo run should run inside the example directory. For this we will use the working-directory config

  publish:
    needs: [test, lint]
    name: Publish example app to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - working-directory: example
        run: expo publish

You'll get a published page for your library's example app. You can check out for the page of my react-native-better-image library's example app.

Publish stories to chromatic

Similar to expo, chromatic also have a GitHub action available in chromaui/action. You have to create a new project in chromatic and get your project token. Then add it to your repository's secrets under the name CHROMATIC_PROJECT_TOKEN

We need to run chromatic action inside the example directory since our storybook lives in this directory. The chromaui/action didn't have an option to run it inside a specific directory. So I had to manually add the following script in my example app's package.json file ﹣

"chromatic": "npx chromatic"

Then added the following workflow configuration which manually runs chromatic ﹣

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Publish storybook as a static site

I used Netlify to publish my storybook as a static site. I was initially planning to use GH Pages, but I needed the 1-click rollback & Deploy Previews offered by netlify. I installed the Netlify app which automatically takes care of the building the repo & deploy previews so I didn't have to write any actions config.

If you are interested to use GitHub pages for your library, you can use the Deploy to GitHub Pages action for this purpose.

You can also try Netlify CLI if you want to configure deploys with netlify through GitHub Actions.

This build workflow is actively used in two of my libraries rex-state & react-native-better-image

In the next blog post, I'll explain how to set up the review workflow!

Rex State - a handy utility to convert your hooks into shared states

Dani Akash 🧪💥 — Sat, 12 Sep 2020 13:14:47 +0000

Introducing Rex State v1.0

I initially built rex-state as a state management library, however, since it was using the Context API it wasn't very efficient with handling re-renders.

But then its another feature became more prominent. It can easily convert any hook into a shared state!

Focusing on this functionality, Today I'm releasing Rex State 1.0. This tool is easy to use and will work with your existing hooks.

Usage

Add rex-state to your project

yarn add rex-state

# or

npm i rex-state

Consider you have the following counter hook ﹣

const useCounterHook = (initialCount) => {
  const [count, setCount] = useState(initialCount || 0);

  const increaseCount = () => setCount(count + 1);
  const decreaseCount = () => setCount(count - 1);

  return {
    count,
    increaseCount,
    decreaseCount
  };
};

You can use rex-state to create a provider and a shared hook using the following code ﹣

import { createRexStore } from "rex-state";

const { 
  useStore: useCounter, 
  RexProvider: CountProvider 
} = createRexStore(useCounterHook);

Wrap your application inside the CountProvider ﹣

export default function App() {
  // Starting off with an initial count of 10
  return (
    <CountProvider value={10}>
      <CountDisplay />
      <Controls />
    </CountProvider>
  );
}

Now you can use useCounter hook inside both <CountDisplay/> & <Controls/> components. When the count changes in the <Controls/> component, it will cause the <CountProvider/> to re-render & will also update the <CountDisplay/> component.

This is based on the React.Context API. I have written a detailed page on its performance & when to use it in your application.

Following is a working codesandbox of the counter app ﹣

Read about it detail on Github

Share your thoughts about using this library. I'm open to feedbacks & ideas ✌🏽

A better Image component for React Native

Dani Akash 🧪💥 — Sat, 05 Sep 2020 11:54:08 +0000

Introducing a better image component for React Native!

React Native only includes a basic image component. However, I always needed two very important functionalities on the Image component:

A fallback image if the original source fails to load
Progressive image loading (especially for banners & cover images)

So I customized the existing <Image/> component and have been using this <BetterImage/> component in my projects. Today, I'm open-sourcing my component to receive feedbacks & ideas from the community.

Do try it out at react-native-toolkit/react-native-better-image

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
  viewStyle={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 the…

View on GitHub

I have also created a storybook with detailed docs at betterimage.netlify.app

What other features do you think are essential for the Image component? Share your ideas & I'll be happy to help 👍

Drawing Triangles in React Native

Dani Akash 🧪💥 — Fri, 05 Jun 2020 15:37:01 +0000

Dani Akash 🧪💥

@dani_akash_

I have decided to focus on open-sourcing all the components I have built for React Native. Starting with the Triangle!
github.com/react-native-t…

03:20 AM - 05 Jun 2020

0 7

I always come across a scenario where my UI needs a triangle view. Also I needed fine control over all aspects of the triangle view. Hence I built @react-native-toolkit/triangle view based on the well known CSS trick to create triangles on the web.

As my requirements grew, I was adding more features to the library and now it supports almost all possible triangles you need. Hence I'm open sourcing it today for general use.

I initially used react-native-triangle but it's configuration is fairly limited and I couldn't control many of the triangle properties. Hence this library became a necessity.

Also, I have started to work on open sourcing all the libraries I built for react native over the years for my personal projects. Will be slowly moving them over to React Native Toolkit. Stay tuned for future updates!

I recreated React's class component lifecycle methods with hooks

Dani Akash 🧪💥 — Fri, 22 May 2020 01:54:09 +0000

Dani Akash 🧪💥

@dani_akash_

felt evil, so created this 😈

04:37 AM - 21 May 2020

2 8

Project - lifecycle-hooks, also available in npm

I recently started working on an old react native project where I had to upgrade react-navigation from v3 to v5.

To take advantage of the new navigation hooks in version 5, I had to migrate existing class components to react hooks.

At first, it seemed like a straight forward case of refactoring some bit of code. However, I quickly realized how difficult the task at hand is...

Class component to hooks conversion is just not straight forward. Hooks are awesome when you are building new components but they are definitely not created with migrating class components in mind.

As react documentation says, class components aren't going away, so you probably won't have to migrate your project to functional components in most cases.

But if you run into a situation like me where you need the powerful hooks from react-navigation, react-spring or any other similar library, lifecycle-hooks will make your migration a lot easier.

traditional class state

// Initialization
this.state = {
  name: "",
  email: "",
};

// updating name
this.setState({
  name: "John Doe",
});

lifecycle-hook's `useState`

import { useState } from "@daniakash/lifecycle-hooks"

// Initialization
const [state, setState] = useState({
  name: "",
  email: "",
});

// updating name
setState({
  name: "John Doe",
});

Likewise, I have also created hooks for componentDidMount, componentDidUpdate & componentWillUnmount which will let you quickly move code without having to worry about dependency arrays of useEffect

You can try these hooks in the following codesandbox playground. Let me know your thoughts! Feedbacks & PRs welcome ✨

UX friendly loading indicators

Dani Akash 🧪💥 — Thu, 09 Apr 2020 18:36:06 +0000

I love loading indicators. Especially ever since lottie animations came out, I have been playing around with different kinds of animations as loading indicators. However, these loading indicators often pose a huge UX Issue when used to display "waiting" for fetch requests.

Let's say you have a nice loading indicator like this one & a webpage that makes a network request to fetch quote of the day.

If you use this loading indicator directly, on a super-fast connection, where the request resolves in 200ms, then you'll notice that the loading indicator basically flashes in between the old & new content ﹣

The loading indicator is nice for content that takes 1000ms+ response time. However, it is not suitable for content that takes very small time like 200ms. But the content, however, is loaded over the network which means for users with fast 5G 🛰 connection the response time is going to be 200ms 🚀 while for users with slow 3G/2G connections the response time might be higher for the same content ☹️

// Detect dark theme var iframe = document.getElementById('tweet-1247617453795840000-484'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1247617453795840000&theme=dark" }

To provide optimal user experience in this scenario, we need different loading indicators for each type of network speeds and we have to maintain a separate "loading-state" that ensures we are displaying the proper loading indicator.

On digging deep into this topic, React team has done a great deal of research in the suspense module which does optimistic rendering and doesn't display any loading indicators if the request is resolved quickly!

I have written a summary of my learnings in a separate tweet thread which you can also read using thread reader

For an ideal UX for a scenario such as the one in the above codesandbox sample,

if the request resolves in 200ms
- no loading indicator is needed
if the request resolves in 500ms
- no loading indicator is needed till 200ms
- a loading indicator appears at 300ms (something non-intrusive)
- the loading indicator is visible till 600ms (even though the data is retrieved at 500ms) to ensure the UI doesn't appear as if it is stuttering/flashing for the user
if the request resolves in 1200ms
- following above timeline, a loading indicator is displayed till 600ms
- after 1000ms, another loading indicator appears (seems like the user is in a slow network region)
- this loading indicator will remain visible till 1300ms (to prevent the users from seeing a flashing screen)

Applying this logic, try the following example ﹣

This time, at

200ms no loading indicators are needed.
300ms+ we have a loading indicator which a gentle opacity that is mandatorily visible for 300ms before displaying the data
1000ms+ we have another animated loading indicator which is also visible for 300ms before displaying the data

For the second example, I have built a javascript library ﹣ "loading-state" which maintains the loading state internally using setTimeout and provides an easy to use API to display the loading indicators.

import loader from "loading-state";

loader(
  new Promise((resolve, reject) => resolve("cool!")),
  {
    shortLoading: () => {}, // callback to display first loading indicator
    longLoading: () => {}, // callback to display the second indicator
    done: (result) => {}, // success callback with the result of the promise
    error: (e) => {} // error callback with the thrown error
  },
  {
    busyDelayMs: 300, // how long to wait till displaying first indicator
    longBusyDelayMs: 1000, // how long to wait till displaying second indicator
    shortIndicatorVisibilityMs: 300, // how long to display first indicator
    longIndicatorVisibilityMs: 300, // how long to display second indicator
  }
)

With this, we can effectively maintain the loading state of our network request & ensure that the UX is not affected for the user based on their network speeds!

React Native Responsive Dimensions - Updated with more responsiveness for foldable devices

Dani Akash 🧪💥 — Sat, 21 Mar 2020 13:11:18 +0000

React Native Responsive Dimensions have been updated to version 3.1.0 with full typescript support & a whole bunch of new utilities quickly check out the new release at github

First published three years ago as a simple utility to resize some views based on the device's screen size, responsive dimensions quickly became one of the favourite tools for my colleagues and many react native developers. I was updating it once a year with a few new things like the responsive hooks last year. But this update is quite important!

I recently worked with Rachel Nabors on React Native Component Docs Drive where while documenting the actual react native's inbuilt dimensions module, I realized Responsive Dimensions has a great potential to simplify application development for foldables and react-native-web apps.

With this new update, Responsive Dimensions now have

Separate utilities for Responsive "window" & "screen" sizes (screen sizes will be useful while working with foldables)
New responsive screen size hooks
useDimensionsChange hook to let your application respond to dimension changes

See the release notes for a full list of changes and also checkout the example projects at Snack & CodeSandbox

Do let me know if you have any feature requests or feedbacks ﹣ always happy to help 😁👍

Introducing Rex State 🦖

Dani Akash 🧪💥 — Thu, 19 Mar 2020 00:55:27 +0000

The simplest way to manage your React States! Check out the demo app

I have been using Redux and Mobx for managing states in my react projects. Ever since React Hooks were introduced I had been playing around with the Context API experimenting different ways to manage states.

I finally came up with Rex State, a tool that I have been using in my personal projects for creating re-usable hooks as well as state management.

The idea behind Rex State is making your states more declarative and providing an easy to use API to connect with the React Components. A classic example ﹣

import React from "react";
import useRex from "rex-state";

const useInput = () => {
  const [state, setState] = useRex({ value: "" });

  return {
    get value() {
      return state.value;
    },
    updateValue(value) {
      setState({ value });
    }
  };
};

const InputField = () => {
  const { value, updateValue } = useInput();

  return (
    <input
      type="text"
      value={value}
      placeholder="Add Text here..."
      onChange={event => updateValue(event.target.value)}
    />
  );
};

export default InputField;

Rex State can also be used as a state management tool. A 400 bytes replacement to redux or mobx ✨

Follow this tutorial to see how to manage states with Rex State.

Feedbacks & PRs welcome! 😁

Github

Forem: Dani Akash 🧪💥

GitHub Actions workflow for building & managing React Native libraries

My Workflow

Submission Category:

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

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

Installation

Usage

Motivation

react-native-toolkit / rex-state

Convert hooks into shared states between React components

Rex State

PRs Welcome 👍✨

Requirements

Installation

Usage

Additional Resources / Info

Automatically publish an update to NPM when you create a release in GitHub

GitHub Releases

Trigger

Jobs

Automating the review process of your React Native Library's PRs

Triggering the workflow

Linting & Testing

Coverage report

Deploy preview of the updated storybook docs

Review Version of the Example App

Sending stories to chromatic

Getting started with your React Native library

The Problem

Solution

Picking the right tools

React Native Community's Bob - Linting + Example App

Alternatives

React Native Testing Library - Unit Tests

Alternatives

Storybook - Documentation

Alternatives

Chromatic - Visual Testing

Expo Cli - Reviewing PRs

Automating stuff with Github Actions

Automating your React Native library's build process

When to trigger the workflow

Linting

Testing & Coverage

Publish example app to expo

Publish stories to chromatic

Publish storybook as a static site

Rex State - a handy utility to convert your hooks into shared states

Introducing Rex State v1.0

Usage

A better Image component for React Native

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

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

React Native Better Image

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

Installation

Usage

Motivation

Drawing Triangles in React Native

I recreated React's class component lifecycle methods with hooks

traditional class state

lifecycle-hook's useState

UX friendly loading indicators

React Native Responsive Dimensions - Updated with more responsiveness for foldable devices

Introducing Rex State 🦖

lifecycle-hook's `useState`