ReactDevTS.code-snippents

{
  "Create React.FC typescript component RN/Relay fragment": {
    "scope": "javascript,typescript",
    "prefix": "#react-fc",
    "body": [
      "import React from 'react'",
      "import { StyleSheet, View, Text } from 'react-native'",
      "import { graphql, useFragment } from 'react-relay/hooks'",
      "import { ${TM_FILENAME_BASE}_data$$key } from '__generated__/${TM_FILENAME_BASE}_data.graphql'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  data: ${TM_FILENAME_BASE}_data$$key",
      "  children?: React.ReactNode",
      "}",
      "",
      "const fragment = graphql`",
      "  fragment ${TM_FILENAME_BASE} on Viewer {",
      "    $1",
      "  }",
      "`",
      "",
      "const ${TM_FILENAME_BASE}: React.FC<${TM_FILENAME_BASE}Props> = props => {",
      "  const data = useFragment(fragment, props.data)",
      "",
      "  return (",
      "    <View style={styles.container}>",
      "      <Text>$2</Text>",
      "    </View>",
      "  )",
      "}",
      "",
      "const styles = StyleSheet.create({",
      "  container: {",
      "    $3",
      "  }",
      "})",
      "",
      "export default ${TM_FILENAME_BASE}",
      ""
    ]
  },
  "Create styles RN component": {
    "scope": "javascript,typescript",
    "prefix": "#react-style",
    "body": [
      "import { StyleSheet } from 'react-native'",
      "import Theme from 'types/Theme.interface'",
      "",
      "const styles = (theme: Theme) =>",
      "  StyleSheet.create({",
      "    container: {",
      "      $1",
      "   }",
      "})",
      "",
      "export default styles",
      ""
    ]
  }
}

"files.associations": {
  "*.md": "mdx",
  "*.jsx": "javascript",
  "*.tsx": "typescript"
},