[Typescript React VS Code snippet]

typescriptreact.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Redux Request, Success, Failure Constants": {
    "prefix ": "rxreqconst",
    "body": [
      "export const $1_REQUEST = '$1_REQUEST';",
      "export const $1_SUCCESS = '$1_SUCCESS';",
      "export const $1_FAIL = '$1_FAIL';"
    ],
    "description": "Redux constants for request, success, fail actions"
  },
  "Import React Navigation Options": {
    "prefix": "impnavopt",
    "body": "import navigationOptions from './navigationOptions';"
  },
  "React Navigation Container": {
    "prefix": "rnavcont",
    "body": [
      "import React from 'react';",
      "import {",
      "  NavigationScreenProps,",
      "  NavigationStackScreenOptions",
      "} from 'react-navigation';",
      "import { SafeAreaView, Text } from 'react-native'",
      "",
      "export type $1Params = {",
      "};",
      "",
      "type $1Props = NavigationScreenProps<",
      "  $1Params",
      "> & {};",
      "",
      "const $1: React.SFC<",
      "  $1Props",
      "> = props => {",
      "  return (",
      "    <SafeAreaView style={{ flex: 1 }}>",
      "      <Text>$1</Text>",
      "    </SafeAreaView>",
      "  );",
      "};",
      "",
      "const navigationOptions = ({",
      "  navigation",
      "}: NavigationScreenProps<",
      "  $1Params",
      ">): NavigationStackScreenOptions => ({",
      "  title: '$1',",
      "  headerTitle: '$1',",
      "  headerTruncatedBackTitle: '$1',",
      "});",
      "",
      "Object.assign($1, { navigationOptions });",
      "",
      "export default $1;",
      ""
    ]
  },
  "Graphql Query": {
    "prefix": "gqlquery",
    "body": [
      "<Query",
      "  notifyOnNetworkStatusChange",
      "  query={$2}",
      "  variables={{ $3 }}",
      ">",
      "  {({ data, error, loading, networkStatus, refetch }) => (",
      "    <$1",
      "      data={data}",
      "      error={error}",
      "      loading={loading}",
      "      networkStatus={networkStatus}",
      "      refetch={refetch}",
      "    />",
      "  )}",
      "</Query>"
    ]
  },
  "Graphql Query Component": {
    "prefix": "gqlqcomponent",
    "body": [
      "import * as React from 'react';",
      "import { View, Text } from 'native-base';",
      "import { ApolloError, NetworkStatus } from 'apollo-boost';",
      "",
      "type $1Props = {",
      "  data: ${2:any} | undefined;",
      "  loading: boolean;",
      "  error: ApolloError | undefined;",
      "  networkStatus: NetworkStatus;",
      "  refetch();",
      "};",
      "",
      "const $1: React.SFC<",
      "  $1Props",
      "> = props => {",
      "  return (",
      "    <View>",
      "      <Text>$1</Text>",
      "      <Text>{JSON.stringify(props)}</Text>",
      "    </View>",
      "  );",
      "};",
      "",
      "export default $1;",
      ""
    ]
  },
  "Navigation options": {
    "prefix": "rnavnavoptions",
    "body": [
      "const navigationOptions = ({",
      "  navigation",
      "}: NavigationScreenProps<",
      "  $2",
      ">): NavigationStackScreenOptions => ({",
      "  $3",
      "});",
      "",
      "Object.assign($1, { navigationOptions });",
      ""
    ]
  }
}