Skip to content

Instantly share code, notes, and snippets.

@anatooly

anatooly/ReactDevTS.code-snippents

Last active August 18, 2021 10:16
Show Gist options
  • Save anatooly/d29064be1081b0f4913edb943aaba6d2 to your computer and use it in GitHub Desktop.
Save anatooly/d29064be1081b0f4913edb943aaba6d2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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",
""
]
}
}
@anatooly
Copy link
Author

anatooly commented Aug 18, 2021 •
edited
Loading 

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment