KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #dsh #dsh-plugin #ai-agent #codex #ai-agents #deepseek-harness #claude-code #cli #react #mcp

react-native-mask-loader

★ 469 Open GitHub ↗

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

// 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)

react-native-mask-loader

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README