Put a Video player (expo-av) under an Image in React-Native

I’m currently learning React/React-Native using Expo, so I need to play a video this video is going to be saved in a server, but for now I’m testing the video playback locally with a random video and that video need to have a sticker kinda like instagram.

I obviously think of merge the two things together and pass the edited video, but later on I came with an idea, just displaying the two things on top of each other, the current state of what I have is:

Current state of the app with video playback

Is this proposition possible?, I searched and I read that adding position: 'absolute' should work but the image doesn’t even display, here’s the code:

import {
    View, 
    StyleSheet,
    Text,
    Image,
    SafeAreaView,
    Dimensions,
    ScrollView } from 'react-native'
import { Video } from 'expo-av'

// const {widthVideo, heightVideo} = Dimensions.get('window');
// Image.getSize('../.././assets/hack.png', (width, height) => {this.setState({width, height})});


const ReportsLists = ({ navigation }) => {
    return (
        <SafeAreaView>
            <ScrollView>
                <View style={styles.container}>
                    <Image style = {styles.watermark} source = {{uri: 'https://www.hackathones.mx/img/supporters/3.png'}}/>

                    <Video
                        source={{ uri: 'https://i.imgur.com/j020nsG.mp4' }}
                        rate={1.0}
                        volume={1.0}
                        isMuted={false}
                        resizeMode="cover"
                        shouldPlay
                        isLooping
                        useNativeControls
                        style={{ width: 420, height: 680, flex: 1, zIndex: 1 }}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        margin: 5
    },
    watermark: {
        margin: 5,
        position: 'absolute',
        top: 0,
        left: 0,
        opacity: 50,
        zIndex: 100
    }
});

export default ReportsLists```

Answer

Try giving width and height in watermark image style and if doesn’t work then try swapping the position of Image view and Video view

Advertisement

Answer