astra-mobile/src/components/Screen.tsx

import {
  View,
  type ViewProps
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { spacing } from '@/theme';
import { createThemedStyles } from '@/theme/themed';

interface ScreenProps extends ViewProps {
  /** Apply default horizontal padding. */
  padded?: boolean;
}

/** Base screen container: black background + top safe-area inset. */
export function Screen({ children, style, padded = true, ...rest }: ScreenProps) {
  const styles = useStyles();
  const insets = useSafeAreaInsets();
  return (
    <View style={[styles.root, { paddingTop: insets.top }, style]} {...rest}>
      <View style={[styles.inner, padded && styles.padded]}>{children}</View>
    </View>
  );
}

const useStyles = createThemedStyles((colors) => ({
  root: {
    flex: 1,
    backgroundColor: colors.bgPrimary,
  },
  inner: {
    flex: 1,
  },
  padded: {
    paddingHorizontal: spacing.lg,
  },
}));

export default Screen;