TypeScript doesn't know about Layout Props

Description

Hi, I’ve encountered a strange bug that top='small' on my custom component was throwing an error JSON value 'small' of type NSString cannot be converted to a YGValue. Did you forget the % or pt suffix?.

After some digging, I found out that View can accept props from Layout Props like top, bottom, marginTop etc.

TypeScript doesn’t know about it

For example, we can add marginTop prop to View and it will work well as described here

Here is a snippet:

          <View marginTop={50}>
            <Text>
              Magna amet quis officia mollit aute sint labore proident sit
              occaecat.
            </Text>
          </View>

This code works well yet TypeScript throws an error:

(JSX attribute) marginTop: number
No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ marginTop: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'marginTop' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ marginTop: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'marginTop' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'.ts(2769)

React Native version:

▶ npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 58.29 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 28, 30
      Build Tools: 28.0.3, 30.0.3
      System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.0 => 0.64.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Setup React Native + TypeScript project
2. Create View component
3. add some content inside
4. add marginTop prop with a numerical value
5. see that it works
6. add marginTop prop with some string like small
7. there is an error

Expected Results

I think there should be consistency and we have two options here:

1. Add layout props to TypeScript typings
2. Remove possibility to pass layout props to View so there is no prop shadowing

[ecreeth]

After some digging, I found out that View can accept props from Layout Props like top, bottom, marginTop etc.

Me too 😅

You’re right, I can confirm this. I’ve created a simple example here.

The view style props doesn’t mention that View inherit all Layout Props

[asklar]

This seems wrong, since it also prevents view managers from providing properties that collide with the layout/view prop names, e.g. if they have different types. Also impacts RN Windows: microsoft/react-native-windows#8158