Trying to display a video inside a modal in react native

user_12232063 0
Viewed 2504

I am trying to display a youtube video inside a modal in react native.

Video gets displayed in the normal view(I.e., without a modal window) ,but I am not display the same video when it’s inside a modal.

Things I have tried so far:

//screen1.js

const [isVisible, setVisible] = useState(false);

<Touchable
          onPress={() => setVisible(true)}
          style={{
            minHeight: 200,
            backgroundColor: Colors.Black
          }}>
          <Text></Text>
        </Touchable>


<Modal isVisible={isVisible} onBackdropPress={() => setVisible(false)}>
        <View style={{ maxHeight: 400, backgroundColor: 'white' }}>
          <WebView
            javaScriptEnabled={true}
            source={{
              uri: 'https://www.youtube.com/embed/RJa4kG1N3d0'
            }}
          />
        </View>
  </Modal>

PS : I have used modal from ‘'react-native-modal';

react-native reactjs javascript
2 Answers
import React, { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Modal,
  WebView,
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const App = () => {
  const [isVisible, setVisible] = useState(false);
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => setVisible(true)}
        style={{
          height: 50,
          backgroundColor: 'yellow',
        }}>
        <Text>Click me</Text>
      </TouchableOpacity>

      <Modal
        style={{

        }}
        animationType="slide"
        transparent={false}
        visible={isVisible}
        onRequestClose={() => {
          alert('Modal has been closed.');
        }}>
        <View style={{ 
          flex: 1,
          backgroundColor: 'orange',
          borderWidth: 1,
          borderColor: 'orange',
          marginTop: 22 }}>

            <WebView
              javaScriptEnabled={true}
              style={{flex:1, borderColor:'red', borderWidth:1, height:400, width:400}}
              source={{
                uri: 'https://www.youtube.com/embed/RJa4kG1N3d0'
              }}
            />
            <TouchableOpacity onPress={() => setVisible(false)}>
              <Text>Hide Modal</Text>
            </TouchableOpacity>

        </View>
      </Modal>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

Follow this snack : https://snack.expo.io/@prashen/modal-video

user_47159980

Use reactnative module 'react-modal-video'. After install module usr this line of code

channelname will be youtube isOpen operate by using state VideoId : this you will get from the link which you have used ie 'RJa4kG1N3d0' in your link.

user_104990860
Related