React Native Animated Splash Screen

Animated splash screen for Android and iOS. It is based on [Implementing Twitter’s App Loading Animation in React Native](https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native) topic from RN. This use an Image instead of MaskedView to work on both platforms. [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]() [![Version](https://img.shields.io/npm/v/react-native-animated-splash-screen.svg)](https://www.npmjs.com/package/react-native-animated-splash-screen) [![npm](https://img.shields.io/npm/dt/react-native-animated-splash-screen.svg)](https://www.npmjs.com/package/react-native-animated-splash-screen) ![GitHub issues](https://img.shields.io/github/issues-raw/fabio-alss-freitas/react-native-animated-splash-screen) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green)](https://github.com/fabio-alss-freitas/react-native-animated-splash-screen/pulls) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) ![GitHub followers](https://img.shields.io/github/followers/fabio-alss-freitas?style=social) ![GitHub stars](https://img.shields.io/github/stars/fabio-alss-freitas/react-native-animated-splash-screen?style=social)

SplashAnimated example app.

## Features - [x] Custom background color. - [x] Custom background image. - [x] Custom logo. - [x] Custom logo size. - [x] It works both: Expo and Pure React Native. (Thanks to [WrathChaos](https://github.com/WrathChaos)!) ## Installation `yarn add react-native-animated-splash-screen` or `npm install --save react-native-animated-splash-screen` ## Usage ```javascript import AnimatedSplash from "react-native-animated-splash-screen"; render() { return ( ); } ``` ## Props | Name | Description | Type | Required | Default Value | | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :------: | :---------------------------------------------------------: | | isLoaded | Condition to show children component and finish the animation. | Boolean | ✓ | false | | backgroundColor | Splash screen background color. | String | | ![#f00](https://placehold.it/15/f00/000000?text=+) `'#f00'` | | logoImage | Splash screen logo image. | Object | | `null` | | logoWidth | Logo image width in `px`. | Number | | 150 | | logoHeight | Logo image height in `px`. | Number | | 150 | | children | Children to render inside this component. | Node | | `null` | | preload | Condition to load children component while wait isLoaded prop be True. | Boolean | | true | | disableBackgroundImage | Disable the background image | Boolean | | false | | translucent | When translucent is set to true, the app will draw under the status bar. Example: [here](https://github.com/fabio-alss-freitas/react-native-animated-splash-screen#example-of-translucent-prop)! | Boolean | | false | | customComponent | Add a logo component instead of a logo image. | React Component | | `null` | ## Example with React Navigation ```javascript const AppNavigator = createStackNavigator( { home: { screen: HomeScreen, navigationOptions: { header: null, }, }, dashboard: { screen: DashboardScreen, navigationOptions: { title: "Dashboard", }, }, }, { initialRouteName: "home", } ) const Container = createAppContainer(AppNavigator) class App extends React.Component { state = { isLoaded: false, } async componentDidMount() { await loadAsync() this.setState({ isLoaded: true }) } render() { return ( ) } } export default App ``` ## Example with React Navigation (setting isLoaded inside a screen of navigator) #### Navigator ```javascript const AppNavigator = createSwitchNavigator( { home: { screen: props => ( ), }, dashboard: { screen: DashboardScreen }, }, { initialRouteName: "home", } ) const Container = createAppContainer(AppNavigator) class App extends React.Component { state = { isLoaded: false, } setAppLoaded = () => { this.setState({ isLoaded: true }) } render() { return ( ) } } export default App ``` #### HomeScreen ```javascript class HomeScreen extends React.Component { ... async componentDidMount() { await loadAsync(); this.props.setAppLoaded(); } ... } export default HomeScreen ``` ## Example of translucent prop translucent={true} translucent={false} ## Author [Fabio Freitas](https://github.com/fabio-alss-freitas) ## License MIT

react-native-animated-splash-screen

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past