import React from "react";
import { View, StyleSheet, Platform } from "react-native";

type Props = {
  children: React.ReactNode;
  style?: object;
};

const ScreenWrapper = ({ children, style }: Props) => {
  return (
    <View style={styles.outer}>
      <View style={[styles.inner, style]}>{children}</View>
    </View>
  );
};

const styles = StyleSheet.create({
  outer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "flex-start",
  },
  inner: {
    width: "100%",

    maxWidth: Platform.OS === "web" ? 420 : "100%",
    flexGrow: 1,
  },
});

export default ScreenWrapper;