fabio-alss-freitas / React Native Animated Splash Screen
Licence: mit
Animated splash screen component for React Native project.
Stars: ✭ 157
Programming Languages
javascript
184084 projects - #8 most used programming language
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 background image.
- [x] Custom logo.
- [x] Custom logo size.
- [x] It works both: Expo and Pure React Native. (Thanks to WrathChaos!)
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
translucent={true}
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidth={150}
>
<App />
</AnimatedSplash>
);
}
Props
Name | Description | Type | Required | Default Value |
---|---|---|---|---|
isLoaded | Condition to show children component and finish the animation. | Boolean | ✓ | false |
backgroundColor | Splash screen background color. | String |
'#f00'
|
|
logoImage | Splash screen logo image. | Object | null |
|
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 | |
translucent | When translucent is set to true, the app will draw under the status bar. Example: here! | Boolean | false | |
customComponent | Add a logo component instead of a logo image. | React Component | null |
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
translucent={true}
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidth={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
translucent={true}
isLoaded={this.state.isLoaded}
logoImage={require("./assets/logo.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidth={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
Example of translucent prop
translucent={true}
translucent={false}
Author
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].