Skip to content

Instantly share code, notes, and snippets.

@andreferi3
Last active October 26, 2020 08:04
Show Gist options
  • Select an option

  • Save andreferi3/dc6e3127f01f9d0cba5e0c70b7539b91 to your computer and use it in GitHub Desktop.

Select an option

Save andreferi3/dc6e3127f01f9d0cba5e0c70b7539b91 to your computer and use it in GitHub Desktop.
This is to showing auto suggestion CSS Intelisense for react-native-extended-stylesheet. place in your styles/index.ts
import { ImageStyle, TextStyle, ViewStyle } from "react-native"
import EStyleSheet from "react-native-extended-stylesheet"
type Function<K> = () => K
type Value<T> = T | string & {}
type Variable<T> = Value<T> | Function<Value<T>>
type Extended<T> = { [K in keyof T]: Variable<T[K]> }
type AnyStyle = ImageStyle & TextStyle & ViewStyle
type AnyStyleSet = { [key: string]: AnyStyle }
type EStyleSet<T = any> = { [K in keyof T]:
T[K] extends Variable<number> ? T[K] :
T[K] extends MediaQuery ? T[K] :
Extended<AnyStyle>
}
type StyleSet<T = any> = { [K in keyof T]:
T[K] extends number ? T[K] :
T[K] extends string ? T[K] :
T[K] extends Function<number> ? number :
T[K] extends Function<string> ? string :
T[K] extends MediaQuery ? AnyStyleSet :
AnyStyle
}
export type MediaQuery = { [key: string]: Extended<AnyStyle> }
export const createStyles = <T = EStyleSet>(styles: EStyleSet<T>) => EStyleSheet.create(styles) as StyleSet<T>
export const styleValue = (key: string, prop?: string) => EStyleSheet.value(key, prop)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment