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

const styles = StyleSheet.create({
  row: { flexDirection: "row" },
  basis: {
    maxWidth: "100%",
    flexBasis: "100%",
  },
});

type Props = {
  children: React.ReactNode;
};

/**
 * Constrains its child to exactly the available parent width.
 *
 * UI components such as Hero and List render their items inside a parent
 * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
 * scroll container can size itself to its own content rather than to the
 * viewport, which causes items to be measured at a stale width and resize
 * unexpectedly after layout changes such as device rotation.
 *
 * Wrapping the content in a `flexDirection: "row"` parent with a
 * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
 * re-derive its width from the parent on every layout pass instead of
 * caching a measured pixel width, keeping it full-width and stable.
 *
 * @param children - The content to render at full parent width.
 */
export function FullWidthRow({ children }: Props) {
  return (
    <View style={styles.row}>
      <View style={styles.basis}>{children}</View>
    </View>
  );
}