Video is still playing when i navigate to another layout

Question

I create my project with Expo. I navigate layout with react-native-router-flux that base on react-navigation

I want to embed a youtube id , i find that expo doesn't support YoutuBe api yet , so i try to use WebView.

Here is my code for WebView:

            <WebView
                source={{ uri: 'https://www.youtube.com/embed/2B_QP9JGD7Q' }}
                style={{ flex: 1 }}
                javaScriptEnabled
                scalesPageToFit
                startInLoadingState
            />

It can work but when i try to navigate another layout , the video is still playing on background...

How to stop the video when i navigate to another layout ? Or onPause the layout just like Android. Why it can be stop automatic ?

Here is my environment:

"dependencies": {
    "expo": "^19.0.0",
    "firebase": "^4.2.0",
    "lodash": "^4.17.4",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz",
    "react-native-router-flux": "^3.41.0",
    "react-native-youtube": "^1.0.0-beta.3",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

Any help would be appreciated. Thanks in advance.

Answer 1

I am also looking for a good answer.

For now I use these new methods which got added recently to react-navigation https://reactnavigation.org/docs/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

I set a variable through which I update the state and set the state when willBlur is called so that when the screen is renders I return a empty view.

Edit: Since this for react-native-router-flux specifically, this is yet to be implemented in that framework last I checked. I would keep a look on this issue https://github.com/aksonov/react-native-router-flux/issues/2298

Earlier react-native-router-flux were based on other navigation solutions and thus it has the onExit and onEnter functions implemented for the given question. We can use those functions to implement the state change variable as I stated earlier.

Note: This doesn't work with the latest react-native-router-flux v4 yet. Look on the linked issue.

Here is a code snippet demonstrating it(you can get to work with flux variable):

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button, WebView } from 'react-native';
import { Scene, Router, Actions, Stack } from 'react-native-router-flux'; // 4.0.0-beta.28

class First extends Component {
  state = { showWebView: true };
  onEnter = () => {
    console.log('Entered');
    this.setState({ showWebView: true });
  }

  onExit = () => {
    console.log('Exited');
    this.setState({ showWebView: false });
  }

  renderWebView() {
    //console.log(this.state.showWebView);
    if (this.state.showWebView) {
      return (
        <WebView
          source={{ uri: 'https://www.youtube.com/embed/lEgTtQFMjWw' }}
          style={{ flex: 1 }}
          javaScriptEnabled
          startInLoadingState
        />
      );
    } else {
      return <View />;
    }
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Button
          title="Second"
          onPress={() => {
            Actions.push('Second');
          }}
          style={styles.container}
        />
        {this.renderWebView()}
      </View>
    );
  }
}

class Second extends Component {
  onEnter() {
    console.log('Entered 2');
  }

  onExit() {
    console.log('Exited 2');
  }

  render() {
    return (<Text>This second screen </Text>);
  }
}

export default class App extends Component {
  render() {
    return (
      <Router>
        <Stack>
          <Scene key="First" component={First} />
          <Scene key="Second" component={Second} />
        </Stack>
      </Router>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 100,
    backgroundColor: '#ecf0f1',
  },
});