Vscode-react-native: IntelliSense for StyleSheet not work

[y2kbug]

The problem I encountered was the same as this closed issue 306, the issue link is
#306

Software versions

• React-Native VS Code extension version: 0.2.5
• VSCode version: 1.8.1
• OS platform and version: 10.11.6
• NodeJS version: v7.3.0
• React Native version: 0.39.2

[vladimir-kotikov]

@y2kbug, thanks for reporting!

I confirm that the problem appeared again and it seems to be happening because the fix, mentioned in #306, hadn't been sent to DefinitelyTyped, which is the main source of typings for react-native now. I'll send the update to DT shortly.

[vladimir-kotikov]

Created https://github.com/DefinitelyTyped/DefinitelyTyped/pull/13988. This bug will be resolved once the PR is accepted and updated typings are released on NPM.

[y2kbug]

@vladimir-kotikov Is there any way to manually solve this problem?

[vladimir-kotikov]

Yeah, the simpliest workaround would be to npm install @types/react-native --save-dev and then open node_modules/@types/react-native/index.d.ts file and add the change from the PR manually

[y2kbug]

@vladimir-kotikov I try to follow the above method did not succeed, and I'm not sure where the problem, do you attempt to verify the bug fix, please

[vladimir-kotikov]

I just verified and it works. Here are the exact instructions:

1. run npm i --save-dev @types/react-native in your project's root
2. open <project>/node_modules/@types/react-native/index.d.ts
3. add the following snippet
   ```typescript
   interface Styles {
   [style: string]: Style
   }

    export function create(styles: Styles): any;

`` right after the line withexport namespace StyleSheet {` (it's line 4469 in my case).

You might also need to restart VSCode after applying the changes, but in my case they were applied immediately.

[pierredewilde]

Thanks for the tip.

Just to be precise, the following line should also be commented:

// export function create<T>(styles: T): T;

[pierredewilde]

Color name intellisense would be appreciated for any color style (eg borderColor, backgroundColor, etc).

See https://facebook.github.io/react-native/docs/colors.html

[y2kbug]

@vladimir-kotikov Thank you for your instructions, but according to pierredewilde's tip to commented the code to fix the bug

[y2kbug]

I just verified the instruction , it show IntelliSense for StyleSheet key but not show IntelliSense for StyleSheet value.

[vladimir-kotikov]

@y2kbug, this is not yet supported unfortunately - react typings are still incomplete. There is a separate issue for this - #387

[vladimir-kotikov]

Linking another PR that would fix the problem with autocompleting StyleSheet properties https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14906

[y2kbug]

I updated the DefinitelyTyped latest Master branch and found that index.d.ts is somewhat different from pr13988.

Master branch of this code dose not work

type NamedStyles<T> = {
        [P in keyof T]: Style;
    }

    export function create<T extends NamedStyles<T>>( styles: T ): T;

You submit this code is working

 interface Styles {
          [style: string]: Style
      }

      export function create(styles: Styles): any;

I am confused about the code for the master branch

[thienlhh]

Just confirm that workaround solution only effect in ViewStyle not work with TextStyle and ImageStyle:
interface Styles { [style: string]: Style }

export function create(styles: Styles): any;

[GingerBear]

in published module, adding

type Style = ViewStyle | TextStyle | ImageStyle;

and change styles: T to styles: T | Style works to me, IntelliSense shows, no error, go to definition works.

    type Style = ViewStyle | TextStyle | ImageStyle;
    type NamedStyles<T> = {
        [P in keyof T]: Style;
    }

    /**
     * Creates a StyleSheet style reference from the given object.
     */
    export function create<T extends NamedStyles<T>>( styles: T | Style ): {
        [P in keyof T]: RegisteredStyle<T[P]>;
    };

[vladimir-kotikov]

Closing this one as a) it has been resolved in DefinitelyTypes and should be available in new RN typings b) we're not maintaining own RN typings anymore and requests like this are more approriate to be filled against DT repo

[piyushchauhan2011]

Still need the above fix to get autocompletion, seems like months now and haven't been pushed ? Hopefully it get published soon !

[vladimir-kotikov]

@piyushchauhan2011, as I mentioned in https://github.com/Microsoft/vscode-react-native/issues/379#issuecomment-317391772 we're not maintaining our own typings for React Native anymore and don't install them into project (if only you're not using relatively old version of VS Code). Instead we rely on TypeScript's ATA (automatic typings acquisition) feature which fetches latest typings for dependencies from @types and this is the process we can't affect.

One idea that I have about why it doesn't work in your case - Typescript's ATA cache might got a bit stale so you could try either remove existing RN typings from cache () or just npm i @types/react-native to install the latest typings into your project and enforce TS to use them.

See also https://github.com/Microsoft/TypeScript/issues/16912 for reference

[stephen-james]

I had the same problem recently... I tried reinstalling VSCode / vscode-react-native and updating my @types just in case it was environmental. No luck.

Since @vladimir-kotikov says this is a DefinitelyTyped issue I looked at the latest definition and it looks like StyleSheet.create is now a generic signature. Maybe I'm supposed to call this, specifying a Type to allow it to find which styles are valid...

I've tried a bit and haven't found any intuitive Types which work there, so to shortcut the whole lot, in my project I created my own Stylesheet utility module which I use purely to get CSS completion. Its not a great solution, but it is saving me time. Sharing in case it helps others.

import { StyleSheet as RnStyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';

type StyleProps = Partial<ViewStyle | TextStyle | ImageStyle>;

export const StyleSheet = {
    create(styles: { [className: string]: StyleProps }) {
        return RnStyleSheet.create(styles);
    }
};

Then in my components

import { Stylesheet }  from './utils';

StyleSheet.create({
   "myClass": {
      // get intellisense for keys and values here
   }
});

of course you'll need to extend this to proxy other method calls (flatten, ...) to StyleSheet.

[theapache64]

@stephen-james solution works for me.

[baveku]

in published module, adding

type Style = ViewStyle | TextStyle | ImageStyle;

and change styles: T to styles: T | Style works to me, IntelliSense shows, no error, go to definition works.

    type Style = ViewStyle | TextStyle | ImageStyle;
    type NamedStyles<T> = {
        [P in keyof T]: Style;
    }

    /**
     * Creates a StyleSheet style reference from the given object.
     */
    export function create<T extends NamedStyles<T>>( styles: T | Style ): {
        [P in keyof T]: RegisteredStyle<T[P]>;
    };

this is work for me, thanks

[Ninnka]

I also had the same problem recently, and I changed the default index.d.ts like below

 export function create<T extends NamedStyles<T>>(styles: T): { [P in keyof T]: RegisteredStyle<T[P]> };

to

 export function create<T extends NamedStyles<T>>(styles: NamedStyles<T>): { [P in keyof T]: RegisteredStyle<T[P]> };

it work to me, like IntelliSense shows, no error, and go to definition is works.

if you think change the default index.d.ts is unsafely, you can add a new function like below

/** util.ts */
export type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

export function createStyle<T extends NamedStyles<T>>(styles: NamedStyles<T>) {
    return StyleSheet.create(styles);
}

[fangrm]

I also had the same problem recently, and I changed the default index.d.ts like below

 export function create<T extends NamedStyles<T>>(styles: T): { [P in keyof T]: RegisteredStyle<T[P]> };

to

 export function create<T extends NamedStyles<T>>(styles: NamedStyles<T>): { [P in keyof T]: RegisteredStyle<T[P]> };

it work to me, like IntelliSense shows, no error, and go to definition is works.

if you think change the default index.d.ts is unsafely, you can add a new function like below

/** util.ts */
export type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

export function createStyle<T extends NamedStyles<T>>(styles: NamedStyles<T>) {
    return StyleSheet.create(styles);
}

Good job!, thanks！

[zhongjie-chen]

I also had the same problem recently, and I changed the default index.d.ts like below

 export function create<T extends NamedStyles<T>>(styles: T): { [P in keyof T]: RegisteredStyle<T[P]> };

to

 export function create<T extends NamedStyles<T>>(styles: NamedStyles<T>): { [P in keyof T]: RegisteredStyle<T[P]> };

it work to me, like IntelliSense shows, no error, and go to definition is works.

if you think change the default index.d.ts is unsafely, you can add a new function like below

/** util.ts */
export type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

export function createStyle<T extends NamedStyles<T>>(styles: NamedStyles<T>) {
    return StyleSheet.create(styles);
}

well