Skip to content

Video goes off its intended screen area #136

@hossamnasser938

Description

@hossamnasser938
  • react-native-af-video-player version: ^0.2.1

  • React Native version: 0.59.8

  • OS: Mac. Building for IOS

  • Has this issue already been raised?
    No

  • Have you clearly read and understood the Readme?
    Yes

  • Code and explanation to replicate this issue:
    I 'm trying to render a video within a Post component that is rendered in a FlatList. I have followed the basic example and I'm getting the video goes off of the area it should be rendered in. Here is my Video component.

import React, { PureComponent } from 'react';
import { View } from 'react-native';
import Video from 'react-native-af-video-player';
import PropTypes from 'prop-types';
import { POST_FILES_URL_PATH } from '../../../utils/constants';

export default class PostVideo extends PureComponent {
    static propTypes = {
        video: PropTypes.object.isRequired
    };

    render() {
        const { video } = this.props;

        return(
            <Video 
              url = { POST_FILES_URL_PATH +  video.url }
              style = { {height: 250, width: 250} }
            />
        );
    }
}

I also tried to render the Video inside a View like this but also experiencing the same issue.

render() {
        const { video } = this.props;

        return(
            <View style ={{height: 250, width: 250}}>
                <Video 
                  url = { POST_FILES_URL_PATH +  video.url }
                />
            </View>
        );
    }

Also tried giving the video flex: 1 like this:

render() {
        const { video } = this.props;

        return(
            <View style ={{height: 250, width: 250}}>
                <Video 
                  url = { POST_FILES_URL_PATH +  video.url }
                  style = { {flex: 1} }
                />
            </View>
        );
    }
  • Are there any console logs?
    No

  • Include Screeshots / Video:
    Screen Shot 2019-09-10 at 6 59 27 PM

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions