react-native-mask-loader - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #android #rust #deep-learning #docker #macos #java #kubernetes #awesome-list #vue #pytorch #mcp #ios

react-native-mask-loader

(★ 469)

React Native App Loader that shows an expanding image as a mask on your app. Direct rip of Twitter's loading animation.

File Explorer

Download Latest Version (.zip)

- loader.gif
- qrcode.png
- - twitter.png
- .babelrc
- .flowconfig
- .gitignore
- .watchmanconfig
- App.js
- app.json
- package.json
- README.md
- yarn.lock
- index.js
.babelrc
.flowconfig
.gitignore
.prettierrc
package.json
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/elicwhite/react-native-mask-loader

Downloads the entire project code from GitHub to your computer.

cd react-native-mask-loader

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add react-native-mask-loader

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-mask-loader

This component provides a loading screen for React Native apps that is meant to reproduce Twitter's app loading animation.

There is an accompanying blog post at https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html.

![Loader](https://raw.githubusercontent.com/elicwhite/react-native-mask-loader/master/assets/loader.gif)

## Installation

```
yarn add react-native-mask-loader

# or npm install react-native-mask-loader
```

## Usage

```
import Loader from 'react-native-mask-loader';

<Loader
  isLoaded={this.state.appHasLoaded}
  imageSource={require('./assets/twitter.png')}
  backgroundStyle={styles.loadingBackgroundStyle}
>
  <AppContent />
</Loader>
```

## Demo
The gif above looks a bit stuttery, but it feels quite smooth on a real device.

In the [example](example) directory is a basic app created with [create-react-native-app](https://github.com/react-community/create-react-native-app) demonstrating this component. Running code is the best documentation so check it out to understand how it works.

It is [published to expo](https://expo.io/@eliwhite/react-native-mask-loader-example) and you should check it out on your device via the expo app:

![Loader](https://raw.githubusercontent.com/elicwhite/react-native-mask-loader/master/assets/qrcode.png)