Unable to play two videos side by side in separate containers, how can I fix this? When I comment ou-CodePudding

This code is to render to my Post page which is the next block of code

import React from "react";
import { View } from "react-native";
import Post from "../../components/Post";

const Home = () => {
  return (
    <View>
      <Post />
    </View>
  );
};

export default Home;

This code is the Post page where I have having to comment out one video to play the other. When I uncomment both videos only the top one plays (leftContainer)

import React from "react";
import { View } from "react-native";
import Video from "react-native-video";
import styles from "./styles";

const Post = () => {
  return (
    <View>
      {/* <View style={styles.leftContainer}>
            <Video
            source={{uri: 'https://static.videezy.com/system/resources/previews/000/008/292/original/Young_African_American_Woman_Headphones_2.mp4'}}
            style={styles.video}
            resizeMode={'cover'}/>
        </View> */}

      <View style={styles.rightContainer}>
        <Video
          source={{
            uri: "https://static.videezy.com/system/resources/previews/000/008/444/original/Dark_Haired_Girl_in_deep_thought_1.mp4",
          }}
          style={styles.video}
          resizeMode={"cover"}
        />
      </View>
    </View>
  );
};

export default Post;

Here is the stylesheet where I have setup a leftContainer and rightContainer for each video respectively:

import { StyleSheet, Dimensions } from "react-native";

const styles = StyleSheet.create({
  leftContainer: {
    width: "50%",
    height: Dimensions.get("window").height,
    flexDirection: "row",
  },
  rightContainer: {
    width: "50%",
    height: Dimensions.get("window").height,
    flexDirection: "row",
    marginLeft: "50%",
  },
  video: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    flexDirection: "row",
  },
});

export default styles;

CodePudding user response：

Instead of using a duplication segment, use React component for the Video element.

for example VideoPlayer component:

import Video from 'react-native-video';
import { StyleSheet } from "react-native";


const VideoPlayer = ({path, resizeMode="cover"}) => (
  <Video 
    source={{uri: path}}
    style={styles.video}
    resizeMode={resizeMode}
  />
)

const styles = StyleSheet.create({
  video: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    flexDirection: "row",
  },
});

export default VideoPlayer;

Now, use the new VideoComponent in your Post component:

import React from "react";
import { View } from "react-native";
import { StyleSheet, Dimensions } from "react-native";

import { VideoPlayer } from "path/to/your/components/direcory"

const Post = () => {
  return (
    <View>
      <View style={styles.leftContainer}>
        <VideoPlayer
          path={'https://static.videezy.com/system/resources/previews/000/008/292/original/Young_African_American_Woman_Headphones_2.mp4'}  
        />
        </View> 

      <View style={styles.rightContainer}>
        <VideoPlayer 
          path={"https://static.videezy.com/system/resources/previews/000/008/444/original/Dark_Haired_Girl_in_deep_thought_1.mp4"} 
        />
      </View>
    </View>
  );
};

const height = Dimensions.get("window").height;

const styles = StyleSheet.create({
  leftContainer: {
    width: "50%",
    height: height,    // ---> replaced
    flexDirection: "row",
  },
  rightContainer: {
    width: "50%",
    height: height,    // ---> replaced
    flexDirection: "row",
    marginLeft: "50%",
  },
});

export default Post;

CodePudding user response：

videoContainer: {
    flexDirection: 'row',
},
leftContainer: {
    width:'50%',
    height: Dimensions.get('window').height,
    flex: 1,
},
rightContainer: {
    width:'50%',
    height: Dimensions.get('window').height,
    flex: 1,
},