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