How to position popup/flyout with respect to screen

[lcherukuri]

import React, {useState} from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';
import {Flyout} from 'react-native-windows';

export const FlyoutScreen = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <View style={styles.container}>
      <Pressable onPress={() => setIsOpen(true)}>
        <Text>Open</Text>
      </Pressable>

      <Flyout
        style={styles.flyout}
        isOpen={isOpen}
        isLightDismissEnabled={true}
        onDismiss={() => setIsOpen(false)}>
        <View style={styles.flyoutContent}>
          <Text>Some Content inside Flyout</Text>
          <Text>More Content inside Flyout</Text>
        </View>
      </Flyout>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  flyout: {
    width: '50%',
  },
  flyoutContent: {
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Given a flyout of width X%, I want to horizontally align it to the center of the screen and 100px from the top of the screen. By default, it looks like this

If I give it a vertical offset of 100px, it looks like this

Is there a way to horizontally center the flyout without using a fixed horizontal offset number?
In web CSS, something like width: 50%, margin: auto

[chrisglein]

If you check out the Gallery app (https://github.com/microsoft/react-native-gallery) it has examples of positioning Flyouts. Both a fixed offset and attaching to position near an element.

For your situation where you want one part fixed (the top margin) and the rest proportional (half width), I don't know if you can do that. The offsets are just numeric.

You could create an element that is in the spot you want the Flyout and is invisible and then position to that? Kind of annoying, but that might work?

[TatianaKapos]

@lcherukuri @chrisglein You may also want to check out the useWindowsDimensions API and set the horizontalOffset to horizontalOffset={useWindowDimensions().width / 2}. It will keep the horizontal alignment relative to the screen but still technically a fixed offset. Let me know if that helps your situation!