/* eslint-disable react/jsx-key, react-native/no-inline-styles */ import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native" import { AutoImage } from "@/components/AutoImage" import { Text } from "@/components/Text" import { translate } from "@/i18n/translate" import { $styles } from "@/theme/styles" import type { ThemedStyle } from "@/theme/types" import { s } from "@/utils/responsive" import { DemoDivider } from "../DemoDivider" import { Demo } from "./types" import { DemoUseCase } from "../DemoUseCase" const $imageContainer: ViewStyle = { alignItems: "center", } const $aspectRatioDescription: ThemedStyle = ({ spacing }) => ({ textAlign: "center", width: "100%", marginTop: spacing.xs, }) const $aspectRatioWidthExampleContainer: ViewStyle = { justifyContent: "space-between", } const $aspectRatioHeightExampleContainer: ViewStyle = { alignItems: "stretch", justifyContent: "space-between", height: s(130), } const $aspectRatioBox: ThemedStyle = (theme) => ({ borderRadius: s(4), borderWidth: 3, borderColor: theme.colors.palette.secondary300, backgroundColor: theme.colors.palette.neutral800, }) export const DemoAutoImage: Demo = { name: "AutoImage", description: "demoAutoImage:description", data: ({ theme, themed }) => [ , , {translate("demoAutoImage:useCase.scaledToFitDimensions.heightAuto")} {translate("demoAutoImage:useCase.scaledToFitDimensions.widthAuto")} {translate("demoAutoImage:useCase.scaledToFitDimensions.bothManual")} , ], }