CODEWITHSUNDEEP
react-native
Lavaraju
Lavaraju

Reputation: 2808

How Can I Set Video Splash Screen in react native android

I am Developing Sample Application, But i want a video splash (in this Video Duration is 8 sec.) , Actually I am Setting Splash page,But now i want to set to Video Splash.

splashPage.js file

This is My Code. import Video from 'react-native-video';

//import Main from './main';
import LoginScreen from './App/Components/login.js';
class SplashPage extends Component {

componentWillMount () {
        var navigator = this.props.navigator;
        setTimeout (() => {

          navigator.replace({
                component: LoginScreen,
                 // <-- This is the View you go to
            });
        }, 5000);     //<-- Time until it jumps to "MainView"
    }
    render () {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>

               <View>{StatusBar.setBackgroundColor('black', true)}</View>
               <Video source={require('./images/splashVideo.mp4')}
                     style={{position: 'absolute',
                             top: 0,
                             left: 0,
                             right: 0,
                             bottom: 0,
                             opacity: 0.3}}
                             muted={true}
                             repeat={true}
                             resizeMode="cover"
     />
               {/*<Image style={{ width: windowSize.width, height: windowSize.height}} source={require('./images/splash.png')}></Image>*/} 
            </View>
        );
    }
}

Thanks In Advance,

Upvotes: 3

Views: 9770

Answers (1)

Codesingh
Codesingh

Reputation: 3384

Let's integrate video component into your splash screen:

1) Install the node module: 

npm install react-native-video --save or yarn add react-native-video --save

2) Import the video component in your splash screen component:

`import Video from 'react-native-video'

3) Inside the splash screen's render() function put video component

<Video source={require('path of video')}
                     style={{position: 'absolute',
                             top: 0,
                             left: 0,
                             right: 0,
                             bottom: 0,
                             opacity: 0.3}}
                             muted={true}
                             repeat={true}
                             resizeMode="cover"
             
          />

Edits: 

import LoginScreen from './App/Components/login.js';
import Video from 'react-native-video'

class SplashPage extends Component {

componentWillMount () {
        var navigator = this.props.navigator;
        setTimeout (() => {

          navigator.replace({
                component: LoginScreen,
                 // <-- This is the View you go to
            });
        }, 5000);     //<-- Time until it jumps to "MainView"
    }
    render () {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center',width:null,height:null}}>
               <Video source={require('./images/splashVideo.mp4')}
                     style={{position: 'absolute',
                             top: 0,
                             left: 0,
                             right: 0,
                             bottom: 0,
                             opacity: 0.3}}
                             muted={true}
                             repeat={true}
                             resizeMode="cover"
     />
               <View>{StatusBar.setBackgroundColor('black', true)}</View> 
               {/*<Image style={{ width: windowSize.width, height: windowSize.height}} source={require('./images/splash.png')}></Image>*/} 
            </View>
        );
    }
}

Back button integration: 

BackAndroid.addEventListener('hardwareBackPress', () => {
            const { navigator } = this.props
            var routes = navigator.getCurrentRoutes()

            if(routes[routes.length - 1].id == 'main' || routes[routes.length - 1].id == 'login') {
                return false;
            }
            else {
                this.popRoute();
                return true;
            }
        });

Cheers:)

Upvotes: 8

Related Questions