Animated splash screen for Android and iOS. It is based on Implementing Twitter’s App Loading Animation in React Native topic from RN. This use an Image instead of MaskedView to work on both platforms.
SplashAnimated example app.
- Custom background color.
- Custom logo.
- Custom logo size.
yarn add react-native-animated-splash-screen
or
npm install --save react-native-animated-splash-screen
import AnimatedSplash from "react-native-animated-splash-screen";
render() {
return (
<AnimatedSplash
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
disableBackgroundImage
logoHeight={150}
logoWidht={150}
>
<App />
</AnimatedSplash>
);
}| Name | Description | Type | Required | Default Value |
|---|---|---|---|---|
| isLoaded | Condition to show children component and finish the animation. | Boolean | ✓ | |
| backgroundColor | Splash screen background color. | String | '#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 |
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 (
<AnimatedSplash
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidht={150}
>
<Container />
</AnimatedSplash>
);
}
}
export default App;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 {
state = {
isLoaded: false,
};
setAppLoaded = () => {
this.setState({ isLoaded: true });
};
render() {
return (
<AnimatedSplash
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidht={150}
>
<Container screenProps={{ setAppLoaded: this.setAppLoaded }} />
</AnimatedSplash>
);
}
}
export default App;class HomeScreen extends React.Component {
...
async componentDidMount() {
await loadAsync();
this.props.setAppLoaded();
}
...
}
export default HomeScreenMIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent