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

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

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

Fabio Freitas

License

MIT