React Native Animated Splash Screen

SplashAnimated example app.

Features

- [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

Usage

``javascript
import AnimatedSplash from "react-native-animated-splash-screen";

render() {
return (
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
disableBackgroundImage
logoHeight={150}
logoWidht={150}
>


);
}
`

Props

| Name | Description | Type | Required | Default Value |
| :--------------------- | :--------------------------------------------------------------------- | :------ | :------: | :---------------------------------------------------------: |
| isLoaded | Condition to show children component and finish the animation. | Boolean | ✓ | |
| backgroundColor | Splash screen background color. | String | | !#f00 '#f00' |
| logoImage | Splash screen logo image. | Object | ✓ | |
| 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 |

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 (
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidht={150}
>


);
}
}

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 (
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidht={150}
>


);
}
}

export default App;
`

#### HomeScreen

`javascript
class HomeScreen extends React.Component {

...

async componentDidMount() {
await loadAsync();
this.props.setAppLoaded();
}

...

}

export default HomeScreen
``

Author

Fabio Freitas

License

MIT