react-native-animated-splash-screen

Animated splash screen component for React Native project.

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedSplashScreen from 'https://cdn.skypack.dev/react-native-animated-splash-screen';
</script>

README

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.

license Version npm GitHub issues PRs Welcome runs with expo

GitHub followers GitHub stars


SplashAnimated example app.

Features

  • Custom background color.
  • Custom background image.
  • Custom logo.
  • Custom logo size.
  • 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 '#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

Fabio Freitas

License

MIT