What should the type of image be for new architecture when using Typescript?

[BartoszKlonowski]

Hello everyone!

I have the callstack/react-native-slider already migrated to new architecture.
However, it is currently running on Flow, while I'm trying to migrate it to Typescript.

I have an issue with type for an image:
Looking at the @types/react-native I see there is ImageSourcePropType, which should be the equivalent of ImageSource used before (when running on Flow).

/**
 * @see https://reactnative.dev/docs/image#source
 */
export type ImageSourcePropType = ImageURISource | ImageURISource[] | ImageRequireSource;

But it looks like the Codegen has problem with this type:

/Users/bartoszklonowski/Desktop/Projects/react-native-slider/example/node_modules/react-native-codegen/lib/parsers/typescript/components/props.js:505
      throw new Error(`Unknown prop type for "${name}": "${type}"`);
      ^

Error: Unknown prop type for "maximumTrackImage": "ImageURISource"

and ineed, looking at the sources I can see that the for images there's still the ImageSource required, even when looking at Typescript related sources:

    case 'ImageSource':
      return {
        type: 'ReservedPropTypeAnnotation',
        name: 'ImageSourcePrimitive',
      };

(taken from react-native-codefen/src/parsers/typescript/components/props.js)

I don't think I can still use the ImageSource, as importing it by

import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';

ends with Cannot find module error.

So my question is: what type should be used for Typescript with new architecture codegen? Any support with this would be much appreciated!

[troZee]

Probably here you have an answer

[cipolleschi]

So my question is: what type should be used for Typescript with new architecture codegen? Any support with this would be much appreciated!

The real answer is that, probably, You are already using the right type for TS, but the CodeGen is not aware of the TS ImageSource.
The TypeScript parser is a porting of the Flow one: we use Flow extensively internally, but we don't use TypeScript. So the TS parser could have bugs and incompatibilities, unfortunately.

But this is a great opportunity to contribute! :D

How?

We can try to add a proper support for that type in TypeScript.

The truth is that, probably, the TS AST Parser outputs type that is not ImageSource when it encounter that type.

1. Let's see what the AST parser outputs.

For example, we can create a very simple component spec in TS with just an ImageSource, run the codegen and see what is output by the parser.

To run a piece of the codegen singularly, the parser, for example, you can use this command:

node App/node_modules/react-native-codegen/lib/cli/parser/parser-cli.js <your-comp>/src/<your_spec>NativeComponent.ts

When it works properly, the Codegen outputs the schema. In this case, we are not supporting the type yet, so it will probably output an error.

2. Add console logs

We can open the App/node_modules/react-native-codegen/lib/parsers/typescript/components/props.js
Look for the ImageSource case
before the switch, let's add a console.log(type)

3. Rerun the parser to see what outputs
4. Replace the ImageSource with that type

What do you think? If you want to go through this path, we would be extremely happy to review the PR and import it! :D

[BartoszKlonowski]

I can give it a shot and debug it. Most probably this week (09.05 - 09.11).
Let's see where we land.