Vscode-react-native: IntelliSense for StyleSheet

[dev-xdyang]

Actual Behavior

1. not show IntelliSense for StyleSheet key
   
2. not show IntelliSense for StyleSheet value
   

3. func IntelliSense always show when I edit the StyleSheet
   

   Expected Behavior

4. support IntelliSense for StyleSheet key. for Instance, when I input "align", I expect get "alignItems" IntelliSense

5. support IntelliSense for StyleSheet available value for given key. for Instance, when I input "alignItems: ", I expect IntelliSense are flex-start, center, flex-end, and stretch
6. don't show func IntelliSense when I edit StyleSheet
   

   Software versions

• React-Native VS Code extension version: 0.2.0
• VSCode version: 1.5.3
• OS platform and version: MacOS 10.11.6
• React Native version: 0.34

[billti]

This is an issue with the types defined in the DefinitelyTyped repo (e.g. for the above see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/react-native/index.d.ts#L3535 ). If someone wants to contribute better type definitions, that'd be awesome.

[vladimir-kotikov]

@dev-xdyang, @billti, a830751 should fix the problem with autocompleting properties.

As for 2 and 3 - the first is still a problem, even with the changes from a830751 It looks for me like a typescript issue, very similar to https://github.com/Microsoft/TypeScript/issues/11331

The second one probably has nothing to do with this extension - this is how VSCode displays a hint for function parameters. Hitting Esc once works for me - the hint disappears and is not being displayed anymore.

[vladimir-kotikov]

@MSLaguana, this should have been resolved by #306. Can we close this?

[MSLaguana]

@dev-xdyang We have updated the typings we use now as @vladimir-kotikov mentions, so it should be fixed. If you still have problems, feel free to re-open.

[josemigallas]

VSCode 1.24.1
React Native Tools 0.7.0

I'm still experiencing this error, only the values are shown:

[ruslan-bikkinin]

Hi @josemigallas extension isn't responsible for intelisense for React native anymore, I believe you better address this to vscode repo as now it manages typings stuff.

[HaloWang]

I create a function to fix this problem temporarily

import { ViewStyle, TextStyle, ImageStyle } from 'react-native'

/**
 * Quick Style
 *
 * related issue
 * @see https://github.com/Microsoft/vscode-react-native/issues/306
 * @see https://github.com/Microsoft/TypeScript/issues/29180
 * @see https://github.com/Microsoft/TypeScript/issues/28470
 *
 * Marco? `$`
 * @see https://github.com/Microsoft/TypeScript/issues/4892
 *
 * @todo `ViewStyle | TextStyle | ImageStyle` no work
 *  */
type _QS = ViewStyle & TextStyle & ImageStyle

export function $(style: _QS) {
  return style
}

usage

const styles = StyleSheet.create({
  item: $({
    position: 'relative',
    overflow: 'visible',
  }),
})

And it works

😂

[NilsBacke]

Has this issue been fixed? Even with the fix from @HaloWang I still don't get intellisense suggestions after the first line.

[TheMisir]

I have same problem. I didn't found anything to fix that 😟

[GollyJer]

Same issue here. Ended up finding this extension which helps.
https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet