Untitled

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;