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

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.

GitHub issues

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}
        logoWidht={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`

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}
        logoWidht={150}
      >
        <Container />
      </AnimatedSplash>
    )
  }
}

export default App

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

Example of translucent prop

translucent={true} translucent={false}

Author

Fabio Freitas

License

MIT

JSPM