Portrait Viewports

[anthonycmain]

I've been trying to present a portrait viewport in order to present a portrait video (essentially a iphone screen recording - as a demo) but the viewport always takes the width over the height so it always presents in landscape.

I tried to create a Snack, but the library doesnt seem to work in Snacks.

Here is my basic sample code:

import { StyleSheet, View as DefaultView, useColorScheme, useWindowDimensions } from 'react-native';

import { ButtonText, Text, View } from '@/components/Themed';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { HeaderText, MonoText } from '@/components/StyledText';
import { useTranslation } from 'react-i18next';
import { Link, Href } from 'expo-router';
import YoutubePlayer from "react-native-youtube-iframe";

// Icons
import { library } from '@fortawesome/fontawesome-svg-core';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import Colors from '@/constants/Colors';
library.add(far);

import Flower from '../../../assets/images/pops/flower.svg'

export type ModalPropsType = {
  title: string, 
  icon: string, 
  copy: string, 
  button: string, 
  link?: string
}

export type ModalProps = ModalPropsType & DefaultView['props'];

export default function iMessageModalScreen(props: ModalProps) {
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();
  const colorScheme = useColorScheme();
  const dimensions = useWindowDimensions();

  const height = dimensions.height;
  console.log(height);
  const ratio = 1178/2556;

  const styles = StyleSheet.create({
    containerStyle: {
      flex: 1,
      alignItems: 'center',
      verticalAlign: 'middle',
      //backgroundColor: Colors[colorScheme ?? 'light'].homeButtonBackground,
    },
    videoFrameStyle: {
      borderRadius: 16,
      width: 300,
      height: 300 / ratio,
      backgroundColor: Colors[colorScheme ?? 'light'].homeButtonBackground,
      alignContent: 'center',
      alignItems: 'center'

    }
  });

  return (
      <View style={styles.containerStyle}>
          <View style={styles.videoFrameStyle}>
            <YoutubePlayer
                    // height={300 / ratio}
                    // width={16/9 * (300 / ratio)} 
                    width={1080}
                    height={1920}
                    play={true}
                    videoId={"iI6daTDKJ8M"}
                    //onChangeState={onStateChange}
                    webViewStyle={{ backgroundColor: 'pink'}}
              />
          </View>
      </View>
  );
}

With a screenshot of the output

[LonelyCpp]

if you want the player to expand into a custom height and ignore aspect-ratio, you can try this - https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123