Intellisense is not working when using extended style sheet

[rawatmanoj]

After using extended stylesheet instead of the default stylesheet Intellisense is not working in vscode.

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[beDenz]

Same issue. Vs code + typescript

[jonathanm-tkf]

any news for this>
?
thanks

[vitalets]

duplicate #118

[gf-studios]

I know I'm a bit late to the party but I just thought I would post this for anyone looking for it:

when you import EStylesheet from 'react-native-extended-stylesheet', in VS code you can hold control and click on your import EStylesheet.

You'll be taken to a file called index.d.ts. It's a relatively small file, and you'll see the following

type AnyObject = {[key: string]: any};`
type Event = 'build';
export function create(styles: AnyObject): AnyObject;

This is where the issue is, the object that EStylesheet.create() returns is typed to any, which turns off typescript. Here's how i fixed it.

So you have react native's original ViewStyle and TextStyle types that you can import, but you don't want to use this because then it just becomes a regular StyleSheet which defeats the purpose, so i made my own types:

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


type ViewEStyle = {[K in keyof ViewStyle]: string | number}` 

type TextEStyle = {[K in keyof TextStyle]: string | number}`

declare namespace EStyleSheet {
type AnyObject = {[key: string]: ViewEStyle | TextEStyle | number | string};
...
}

What K in keyof ViewStyle does is grab all the properties available in ViewStyle (backgroundColor, borderRadius, etc) and makes it available in the new type, but instead of restricting it to specific values, you can now put any string or number as a value (e.g padding: '3rem'). Also, extended stylesheet allows you to make local variables ($text-color: #fff), which is why i typed the AnyObject as number and string also.

Lastly, typescript will give you an error if you try to use this on the style prop, because its incompatible with what EStylesheet provides, probably why it was typed to any in the first place, so you have to declare your styles object as type any.

const styles = EStylesheet.create({
 ...
 ...
 ... 
}) as any;

now when you create an object inside it will autocomplete the styles.

Here's the whole index.d.ts incase you want to copy and paste

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

export = EStyleSheet;

type ViewEStyle = {[K in keyof ViewStyle]: string | number} 

type TextEStyle = {[K in keyof TextStyle]: string | number}

declare namespace EStyleSheet {
    type AnyObject = {[key: string]: ViewEStyle | TextEStyle | number | string};
    type Event = 'build';

    export function create(styles: AnyObject): AnyObject;
    export function build(rawGlobalVars?: AnyObject): void;
    export function value(expr: any, prop?: string): any;
    export function child(styles: AnyObject, styleName: string, index: number, count: number): AnyObject;
    export function subscribe(event: Event, listener: () => any): void;
    export function clearCache(): void;

    // inherited from StyleSheet
    export const flatten: typeof StyleSheet.flatten;
    export const setStyleAttributePreprocessor: typeof StyleSheet.setStyleAttributePreprocessor;
    export const hairlineWidth: typeof StyleSheet.hairlineWidth;
    export const absoluteFillObject: typeof StyleSheet.absoluteFillObject;
    export const absoluteFill: typeof StyleSheet.absoluteFill;
}