Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-animated-splash-screen

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-animated-splash-screen - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

2

package.json
{
"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
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc