Code Monkey home page Code Monkey logo

react-native-animated-splash-screen's Introduction

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

react-native-animated-splash-screen's People

Contributors

ajp8164 avatar dependabot[bot] avatar elforastero avatar fabio-alss-freitas avatar wrathchaos avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.