Typescript failing when passing a StyleSheet to an Image style.

[ethanneff]

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 34.65 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.1, 28.0.2
        API Levels: 22, 23, 24, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react-native: 3.4.11 => 3.4.11
      @types/react: 16.4.18 => 16.4.18
      @types/react-native: 0.57.7 => 0.57.7
      react: 16.6.0 => 16.6.0
      react-native: 0.57.3 => 0.57.3
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      create-react-native-web-app: 0.1.6
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

Typescript failing when passing a StyleSheet to an Image style

Reproducible Demo

Example from here https://facebook.github.io/react-native/docs/image

import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  stretch: {
    width: 50,
    height: 200
  }
});

export default class DisplayAnImageWithStyle extends Component {
  render() {
    return (
      <View>
        <Image
          style={styles.stretch}
          source={require('/react-native/img/favicon.png')}
        />
      </View>
    );
  }
}

// skip these lines if using Create React Native App
AppRegistry.registerComponent(
  'DisplayAnImageWithStyle',
  () => DisplayAnImageWithStyle
);

Error found here:

- error TS2322: Type 'RegisteredStyle<ViewStyle | TextStyle | ImageStyle>' is not assignable to type 'StyleProp<ImageStyle>'.
  Type 'RegisteredStyle<ViewStyle | TextStyle | ImageStyle>' is not assignable to type 'RecursiveArray<false | ImageStyle | RegisteredStyle<ImageStyle> | null | undefined>'.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[ethanneff]

Bad bot. I am using the latest from npm.

[ikesyo]

You should follow DefinitelyTyped/DefinitelyTyped#29265 and microsoft/TypeScript#27421.

[ethanneff]

Thank you. closing.