Breaking News: Grepper is joining You.com. Read the official announcement!

video in modal react native

Axel Toure answered on October 10, 2023 Popularity 1/10 Helpfulness 1/10

answer video in modal react native

video in modal react native

Comment

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',
  },
});

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-native video

Link to this answer
Share Copy Link

Contributed on Oct 10 2023

Axel Toure

0 Answers Avg Quality 2/10

video in modal react native

Contents

More Related Answers

video in modal react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.