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 topic from RN. This use an Image instead of MaskedView to work on both platforms.
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
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>
);
}
Props
Example with React Navigation
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;
Example with React Navigation (setting isLoaded inside a screen of navigator)
Navigator
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;
HomeScreen
class HomeScreen extends React.Component {
...
async componentDidMount() {
await loadAsync();
this.props.setAppLoaded();
}
...
}
export default HomeScreen
Author
License
MIT