diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index 856ee98b260c94..de23c59d7f13d5 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -18,7 +18,7 @@ type FlexAlignType = | 'stretch' | 'baseline'; -type DimensionValue = +export type DimensionValue = | number | 'auto' | `${number}%` @@ -79,15 +79,9 @@ export interface FlexStyle { | undefined; left?: DimensionValue | undefined; margin?: DimensionValue | undefined; - marginBlock?: DimensionValue | undefined; - marginBlockEnd?: DimensionValue | undefined; - marginBlockStart?: DimensionValue | undefined; marginBottom?: DimensionValue | undefined; marginEnd?: DimensionValue | undefined; marginHorizontal?: DimensionValue | undefined; - marginInline?: DimensionValue | undefined; - marginInlineEnd?: DimensionValue | undefined; - marginInlineStart?: DimensionValue | undefined; marginLeft?: DimensionValue | undefined; marginRight?: DimensionValue | undefined; marginStart?: DimensionValue | undefined; @@ -100,14 +94,8 @@ export interface FlexStyle { overflow?: 'visible' | 'hidden' | 'scroll' | undefined; padding?: DimensionValue | undefined; paddingBottom?: DimensionValue | undefined; - paddingBlock?: DimensionValue | undefined; - paddingBlockEnd?: DimensionValue | undefined; - paddingBlockStart?: DimensionValue | undefined; paddingEnd?: DimensionValue | undefined; paddingHorizontal?: DimensionValue | undefined; - paddingInline?: DimensionValue | undefined; - paddingInlineEnd?: DimensionValue | undefined; - paddingInlineStart?: DimensionValue | undefined; paddingLeft?: DimensionValue | undefined; paddingRight?: DimensionValue | undefined; paddingStart?: DimensionValue | undefined; diff --git a/packages/react-native/types/experimental.d.ts b/packages/react-native/types/experimental.d.ts new file mode 100644 index 00000000000000..c58c9ffa10ac00 --- /dev/null +++ b/packages/react-native/types/experimental.d.ts @@ -0,0 +1,136 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +/** + * These are types for things that are present for New Architecture enabled apps + * which is currently considered experimental. + * + * To load the types declared here in an actual project, there are three ways. + * + * 1. If your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, + * is to add `"react-native/types/experimental"` to the `"types"` array. + * + * 2. Alternatively, a specific import syntax can to be used from a typescript file. + * This module does not exist in reality, which is why the {} is important: + * + * ```ts + * import {} from 'react-native/types/experimental' + * ``` + * + * 3. It is also possible to include it through a triple-slash reference: + * + * ```ts + * /// + * ``` + * + * Either the import or the reference only needs to appear once, anywhere in the project. + */ + +import {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'; + +export {}; + +declare module '.' { + export interface FlexStyle { + /** + * Equivalent to `top`, `bottom`, `right` and `left` + */ + inset?: DimensionValue | undefined; + + /** + * Equivalent to `top`, `bottom` + */ + insetBlock?: DimensionValue | undefined; + + /** + * Equivalent to `bottom` + */ + insetBlockEnd?: DimensionValue | undefined; + + /** + * Equivalent to `top` + */ + insetBlockStart?: DimensionValue | undefined; + + /** + * Equivalent to `right` and `left` + */ + insetInline?: DimensionValue | undefined; + + /** + * Equivalent to `right` or `left` + */ + insetInlineEnd?: DimensionValue | undefined; + + /** + * Equivalent to `right` or `left` + */ + insetInlineStart?: DimensionValue | undefined; + + /** + * Equivalent to `marginVertical` + */ + marginBlock?: DimensionValue | undefined; + + /** + * Equivalent to `marginBottom` + */ + marginBlockEnd?: DimensionValue | undefined; + + /** + * Equivalent to `marginTop` + */ + marginBlockStart?: DimensionValue | undefined; + + /** + * Equivalent to `marginHorizontal` + */ + marginInline?: DimensionValue | undefined; + + /** + * Equivalent to `marginEnd` + */ + marginInlineEnd?: DimensionValue | undefined; + + /** + * Equivalent to `marginStart` + */ + marginInlineStart?: DimensionValue | undefined; + + /** + * Equivalent to `paddingVertical` + */ + paddingBlock?: DimensionValue | undefined; + + /** + * Equivalent to `paddingBottom` + */ + paddingBlockEnd?: DimensionValue | undefined; + + /** + * Equivalent to `paddingTop` + */ + paddingBlockStart?: DimensionValue | undefined; + + /** + * Equivalent to `paddingHorizontal` + */ + paddingInline?: DimensionValue | undefined; + + /** + * Equivalent to `paddingEnd` + */ + paddingInlineEnd?: DimensionValue | undefined; + + /** + * Equivalent to `paddingStart` + */ + paddingInlineStart?: DimensionValue | undefined; + } +}