CODEWITHSUNDEEP
react-nativesplash-screenhybrid
Thisara
Thisara

Reputation: 664

React native- How to display one time splash video in react native?

I am creating a project where I have a one time splash video screen, which is used for display some intro video of the application.after the video, app needs to load sign in screen which is already created.have no problem with that but don't have any clue how to do one time splash screen.

your help is highly appreciated Thanks

Upvotes: 0

Views: 1864

Answers (1)

quirky purple
quirky purple

Reputation: 2219

I haven't dealt with video in React Native before so I am unfamiliar with its capabilities handling video, but just googling react native video returns the react-native-video library which has an onEnd prop. Like Anis D said, it would depend on your navigation and how you are storing your data, but if it were me using react-navigation for my navigation, I would have a component that is rendered on app startup that checks if they have viewed the video, returning the component to display the video if not, otherwise returning the main application stack if so. Something like below 

class App extends Component {
  render() {
     if (!this.props.hasViewedVideo) {
        return <MyVideoComponent/>
     }
     return <MainApplicationStack/>
  }
}

And in the MyVideoComponent that renders the video player, on the onEnd prop, set the hasViewedVideo variable to true. If you need to show the video only once per install, I would suggest looking into redux and redux persist to store this data. Otherwise, if the video needs to be shown every time the app is started up, using state inside the initial component would be fine, which would look more like below

class App extends Component {
  state = {
    hasViewedVideo: false
  }

  render() {
     if (!this.state.hasViewedVideo) {
        return <MyVideoComponent/>
     }
     return <MainApplicationStack/>
  }
}

With async storage, might look something like this

class App extends Component {
  state = {
    hasViewedVideo: false 
  }

  componentDidMount = async () => {
    const hasViewedVideo = await AsyncStorage.getItem('hasViewedVideo')
    this.setState({ hasViewedVideo })
  }

  onVideoEnd = async () => {
    await AsyncStorage.setItem('hasViewedVideo', true)
    this.setState({ hasViewedVideo: true})
  }

  render() {
     if (!this.state.hasViewedVideo) {
        return <MyVideoComponent onVideoEnd={this.onVideoEnd}/>
     }
     return <MainApplicationStack/>
  }
}

Which passes the onVideoEnd prop into the child MyVideoComponent component, and uses it in the onEnd prop of the video player.

Upvotes: 2

Related Questions