Put n react-native-videos inside a scrollview that renders react-native-render-html

Question

How do I place react-native-videos one after the other in a scrollview that renders html using react-native-render-html I have tried but the problem is they get placed on top of each other and if I try to place another html element than I cant see it.

this is my attempt

import React from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import Video from "react-native-video";
import RenderHTML, {
  HTMLContentModel,
  HTMLElementModel,
} from "react-native-render-html";
import { SCREEN_WIDTH } from "../components/lib/constants";

function RenderHtml({ uri }: { uri: string }) {
  return (
    <>
      <RenderHTML
        contentWidth={SCREEN_WIDTH}
        source={{ html: uri }}
        customHTMLElementModels={{
          video: HTMLElementModel.fromCustomModel({
            tagName: "video",
            mixedUAStyles: {
              alignSelf: "center",
            },
            contentModel: HTMLContentModel.block,
          }),
        }}
        renderers={{
          video: (obj1: any, obj2: any) => {
            let link = obj1["tnode"].domNode.attribs.src;
            return (
              <>
                <Video
                  source={{ uri: link }}
                  resizeMode={"contain"}
                  style={[{ width: SCREEN_WIDTH, height: 300, flex: 1 }]}
                  controls={true}
                  paused={true}
                />
              </>
            );
          },
        }}
      />
    </>
  );
}
// test video uri from expo-video example
export default function Test() {
  return (
    <ScrollView style={styles.container}>
      <RenderHtml
        uri={
          "<video src='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' /><video src='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' />"
        }
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
  videoContainer: {
    flex: 1,
    height: 300, // Adjust the height as needed to fit your videos
    justifyContent: "center",
    alignItems: "center",
  },
  video: {
    width: "100%",
    height: "100%",
  },
});

Answer 1

The problem is you are not using closing brackets in the video tag so change <video ... /> to <video ...></video Try this

import React from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import Video from "react-native-video";
import RenderHTML, {
  HTMLContentModel,
  HTMLElementModel,
} from "react-native-render-html";
import { SCREEN_HEIGHT, SCREEN_WIDTH } from "../components/lib/constants";

function RenderHtml({ uri }: { uri: string }) {
  return (
    <RenderHTML
      contentWidth={SCREEN_WIDTH}
      source={{ html: uri }}
      customHTMLElementModels={{
        video: HTMLElementModel.fromCustomModel({
          tagName: "video",
          mixedUAStyles: {
            alignSelf: "center",
          },
          contentModel: HTMLContentModel.block,
        }),
      }}
      renderers={{
        video: (obj1: any, obj2: any) => {
          let link = obj1["tnode"].domNode.attribs.src;
          return (
            <View style={styles.videoContainer}>
              <Video
                source={{ uri: link }}
                resizeMode={"contain"}
                style={styles.video}
                controls={true}
                paused={true}
              />
            </View>
          );
        },
      }}
    />
  );
}

export default function Test() {
  return (
    <ScrollView style={styles.container}>
      <RenderHtml
        uri={
          "<video src='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'></video><video src='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'></video>"
        }
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    minWidth: SCREEN_WIDTH,
    minHeight: SCREEN_HEIGHT,
    backgroundColor: "black",
  },
  videoContainer: {
    width: SCREEN_WIDTH, // Display videos side by side, adjust as needed
    height: 300, // Adjust the height as needed to fit your videos
    justifyContent: "center",
    alignItems: "center",
  },
  video: {
    width: "100%",
    height: "100%",
  },
});