React Native VSCode Code Snippets

React Native.code-snippets

{
  "React Native Component": {
    "prefix": "rnc",
    "body": [
      "import React, { useState } from \"react\";",
      "import { StyleSheet, View } from \"react-native\";",
      "",
      "import AppText from \"@/components/AppText\";",
      "import defaultStyles from \"@/constants/Styles\";",
      "",
      "function ${TM_FILENAME_BASE}({ navigation }) {",
      "  return <View style={styles.container}>",
      "    <AppText>Welcome Home</AppText>",
      "  </View>;",
      "}",
      "",
      "const styles = StyleSheet.create({",
      "  container: {",
      "    paddingHorizontal: defaultStyles.padding,",
      "    paddingTop: defaultStyles.padding,",
      "  }",
      "});",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ],
    "description": "React Native Component"
  },
  "React Native Native Base Component": {
    "prefix": "rnnc",
    "body": [
      "import React, { useState } from \"react\";",
      "import { StyleSheet } from \"react-native\";",
      "import { Box } from \"native-base\";",
      "",
      "import AppText from \"@/components/AppText\";",
      "import defaultStyles from \"@/constants/Styles\";",
      "",
      "function ${TM_FILENAME_BASE}({ navigation }) {",
      "  return (",
      "    <Box style={styles.container}>",
      "      <AppText>$1</AppText>",
      "    </Box>",
      "  );",
      "}",
      "",
      "const styles = StyleSheet.create({",
      "  container: {",
      "    paddingHorizontal: defaultStyles.padding,",
      "    paddingTop: defaultStyles.padding,",
      "  },",
      "});",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ],
    "description": "React Native Native Base Component"
  }
}