Untitled
unknown
plain_text
a month ago
1.6 kB
3
Indexable
import React, { useState, useRef } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native'; import Video from 'react-native-video'; const MyReel = () => { const videoRef = useRef(null); const [videoSource, setVideoSource] = useState(require('./assets/myVideo.mp4')); // Replace with your video const [textOverlays, setTextOverlays] = useState([ { text: 'Are you', time: 1 }, { text: 'Dumb?', time: 3 }, ]); const [currentTime, setCurrentTime] = useState(0); const onProgress = (data) => { setCurrentTime(data.currentTime); }; const renderTextOverlays = () => { return textOverlays.map((overlay, index) => { if (currentTime >= overlay.time) { return ( <Text key={index} style={styles.overlayText}> {overlay.text} </Text> ); } return null; }); }; return ( <View style={styles.container}> <Video ref={videoRef} source={videoSource} style={styles.video} controls={true} onProgress={onProgress} /> {renderTextOverlays()} {/* Add controls for adding/editing text overlays, audio, etc. */} </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, video: { width: '100%', height: 400, }, overlayText: { position: 'absolute', top: 200, fontSize: 30, color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, }); export default MyReel;
Editor is loading...
Leave a Comment