react-native-animated-splash-screen
Advanced tools
Comparing version 1.0.5 to 1.0.6
{ | ||
"name": "react-native-animated-splash-screen", | ||
"version": "1.0.5", | ||
"version": "1.0.6", | ||
"private": false, | ||
@@ -5,0 +5,0 @@ "description": "Animated splash screen component for React Native project.", |
@@ -0,27 +1,39 @@ | ||
<h1 align="center"> | ||
React Native Animated Splash Screen | ||
</h1> | ||
<div align="center"> | ||
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) | ||
![GitHub All Releases](https://img.shields.io/github/downloads/fabio-alss-freitas/react-native-animated-splash-screen/total) | ||
[![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) | ||
# React Native Animated Splash Screen | ||
![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) | ||
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. To work on Android, it use an Image instead of MaskedView. | ||
</div> | ||
## Examples | ||
![React Native Animated Splash Screen Android 1](https://i.postimg.cc/wMqmK0Wz/ezgif-3-d649b8902f22.gif) | ||
![React Native Animated Splash Screen Android 2](https://i.postimg.cc/5yTkKY3w/ezgif-3-2b23776764cf.gif) | ||
<p align="center" > | ||
<kbd> | ||
<img src="https://i.postimg.cc/wMqmK0Wz/ezgif-3-d649b8902f22.gif" title="Scroll Demo" float="left"> | ||
</kbd> | ||
<kbd> | ||
<img src="https://i.postimg.cc/5yTkKY3w/ezgif-3-2b23776764cf.gif" title="Priority Demo" float="left"> | ||
</kbd> | ||
<br> | ||
<em>SplashAnimated example app.</em> | ||
</p> | ||
## Features | ||
- Custom background color | ||
- Custom logo | ||
- Custom logo size | ||
- [x] Custom background color. | ||
- [x] Custom logo. | ||
- [x] Custom logo size. | ||
## Installation | ||
`yarn add react-native-animated-splash-screen` | ||
or | ||
`npm install --save react-native-animated-splash-screen` | ||
@@ -59,4 +71,4 @@ | ||
## Example with React Navigation | ||
#### 1) Create a navigator (Stack or Switch) normally: | ||
```javascript | ||
@@ -82,11 +94,5 @@ const AppNavigator = createStackNavigator( | ||
); | ||
``` | ||
#### 2) Create an app container: | ||
```javascript | ||
const Container = createAppContainer(AppNavigator); | ||
``` | ||
#### 3) Pass the container as a children of AnimatedSplash: | ||
```javascript | ||
class App extends React.Component { | ||
@@ -121,5 +127,20 @@ state = { | ||
## Example with React Navigation (setting isLoaded inside a screen of navigator) | ||
##### Make sure you have done the [previous step](https://github.com/fabio-alss-freitas/react-native-animated-splash-screen/new/master?readme=1#example-with-react-navigation). | ||
#### 1) Pass the IsLoaded function as screenProps of Container: | ||
#### Navigator | ||
```javascript | ||
const AppNavigator = createSwitchNavigator( | ||
{ | ||
home: { | ||
screen: props => ( | ||
<HomeScreen {...props} setAppLoaded={props.screenProps.setAppLoaded} /> | ||
) | ||
}, | ||
dashboard: { screen: DashboardScreen } | ||
}, | ||
{ | ||
initialRouteName: "home" | ||
} | ||
); | ||
const Container = createAppContainer(AppNavigator); | ||
class App extends React.Component { | ||
@@ -152,28 +173,25 @@ state = { | ||
#### 2) Update your navigator to handle screenProps on the chosen screen: | ||
#### HomeScreen | ||
```javascript | ||
const AppNavigator = createSwitchNavigator( | ||
{ | ||
home: { | ||
screen: props => ( | ||
<HomeScreen {...props} setAppLoaded={props.screenProps.setAppLoaded} /> | ||
) | ||
}, | ||
dashboard: { screen: DashboardScreen } | ||
}, | ||
{ | ||
initialRouteName: "home" | ||
class HomeScreen extends React.Component { | ||
... | ||
async componentDidMount() { | ||
await loadAsync(); | ||
this.props.setAppLoaded(); | ||
} | ||
); | ||
``` | ||
... | ||
#### 2) Call the function on the chosen screen: | ||
```javascript | ||
this.props.setAppLoaded(); | ||
} | ||
export default HomeScreen | ||
``` | ||
## Author | ||
Fabio Freitas | ||
[Fabio Freitas](https://github.com/fabio-alss-freitas) | ||
## License | ||
MIT |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
194
65177