Package Exports

react-native-animated-splash-screen

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-animated-splash-screen) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GitHub file size in bytes GitHub issues

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. To work on Android, it use an Image instead of MaskedView.

Example

React Native Animated Splash Screen Android

Features

Custom background color
Custom logo
Custom logo size

Installation

yarn add react-native-animated-splash-screen

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

1) Create a navigator (Stack or Switch) normally:

const AppNavigator = createStackNavigator(
  {
    home: {
      screen: HomeScreen,
      navigationOptions: {
        header: null
      }
    },
    dashboard: {
      screen: DashboardScreen,
      navigationOptions: {
        title: "Dashboard"
      }
    }
  },
  {
    initialRouteName: "home"
  }
);

2) Create an app container:

const Container = createAppContainer(AppNavigator);

3) Pass the container as a children of AnimatedSplash:

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;

Make sure you have done the previous step.

1) Pass the IsLoaded function as screenProps of Container:

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;

2) Update your navigator to handle screenProps on the chosen screen:

const AppNavigator = createSwitchNavigator(
  {
    home: {
      screen: props => (
        <HomeScreen {...props} setAppLoaded={props.screenProps.setAppLoaded} />
      )
    },
    dashboard: { screen: DashboardScreen }
  },
  {
    initialRouteName: "home"
  }
);

2) Call the function on the chosen screen:

this.props.setAppLoaded();

Author

Fabio Freitas

License

MIT

JSPM