Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Render Wordpress Gutenberg Videos in React Native using react-native-render-html
import {ul} from '../../node_modules/react-native-render-html/src/HTMLRenderers';
<HTML
ignoredStyles={['height', 'width']}
contentWidth={Dimensions.get('screen').width - 36}
tagsStyles={HtmlStyles}
classesStyles={HtmlClassStyles}
html={productTraining.productTraining.content}
renderers={{
div: (htmlAttribs, children, convertedCSSStyles, passProps) => {
if (htmlAttribs.class === 'wp-video') {
return (
<Video
style={[tailwind('w-full'), {aspectRatio: 5 / 3}]}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
isLooping
useNativeControls={true}
source={require('../../assets/videos/video.mp4')}
/>
);
} else {
return ul(
htmlAttribs,
children,
convertedCSSStyles,
passProps,
);
}
},
}}
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment