{"id":18487697,"url":"https://github.com/iamdylanngo/react-native-snippet","last_synced_at":"2026-04-09T00:34:15.112Z","repository":{"id":70476945,"uuid":"115059364","full_name":"iamdylanngo/react-native-snippet","owner":"iamdylanngo","description":"React Native, ReactJs, Redux, ES7 Snippet","archived":false,"fork":false,"pushed_at":"2019-12-14T08:05:13.000Z","size":1723,"stargazers_count":27,"open_issues_count":0,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-06T13:00:07.271Z","etag":null,"topics":["javascript","react","react-components","react-native","redux","redux-snippet"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamdylanngo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-12-22T00:32:37.000Z","updated_at":"2024-09-23T18:25:44.000Z","dependencies_parsed_at":"2023-03-11T08:39:36.419Z","dependency_job_id":null,"html_url":"https://github.com/iamdylanngo/react-native-snippet","commit_stats":null,"previous_names":["iamdylanngo/react-native-snippet"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdylanngo%2Freact-native-snippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdylanngo%2Freact-native-snippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdylanngo%2Freact-native-snippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamdylanngo%2Freact-native-snippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamdylanngo","download_url":"https://codeload.github.com/iamdylanngo/react-native-snippet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247923058,"owners_count":21018919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","react-components","react-native","redux","redux-snippet"],"created_at":"2024-11-06T12:50:43.297Z","updated_at":"2026-04-09T00:34:14.881Z","avatar_url":"https://github.com/iamdylanngo.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# VS Code React Native, React Native Typescript, StyleSheet, ReactJS, Redux Snippet\n\n[![Version](https://vsmarketplacebadge.apphb.com/version-short/jundat95.react-native-snippet.svg)](https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet)\n[![Install](https://vsmarketplacebadge.apphb.com/installs-short/jundat95.react-native-snippet.svg)](https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet)\n[![Ratings](https://vsmarketplacebadge.apphb.com/rating-short/jundat95.react-native-snippet.svg)](https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet)\n\nThis extension provide you Javascript and React/Redux snippets in ES6, ES7, Typescript with babel plugins features for [Vs Code](https://code.visualstudio.com/)\n\nHere is direct link to marketplace [React Native, StyleSheet, ReactJS, Redux Snippet](https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippet)\n\n## Tutorial \n\n\n![Snippet React Native Example](https://media.giphy.com/media/3oFzm591DaU08CLcJ2/giphy.gif)\n\n![Snippet React Native Component](https://media.giphy.com/media/xULW8NK5nhbjR9ALtK/giphy.gif)\n\n![Snippet React Native StyleSheet](https://media.giphy.com/media/l1IBk7p8DT3v9mpGM/giphy.gif)\n\n\n## Supported languages (file extensions)\n\n* JavaScript (.js)\n* Redux (.js)\n* ReactJS (.js)\n* React Native (.js)\n* React Native StyleSheet (.js)\n* TypeScript ReactJS (.tsx)\n* Typescript React Native (.tsx)\n\n\n## Snippets info\n\nEvery space inside `{ };` and `( )` means that this is pushed into next line :)\n`$` represent each step after `tab`.\n\n\n## Basic Methods\n\n|Prefix|Method|\n|-------:|-------|\n|`imp→`|`import moduleName from 'module';`|\n|`imn→`|`import 'module';`|\n|`imd→`|`import { destructuredModule } from 'module';`|\n|`ime→`|`import * as alias from 'module';`|\n|`ima→`|`import { originalName as aliasName} from 'module';`|\n|`exp→`|`export default moduleName`|\n|`exd→`|`export { destructuredModule } from 'module';`|\n|`exa→`|`export { originalName as aliasName} from 'module';`|\n|`enf→`|`export const functionName = (params) =\u003e { };`|\n|`edf→`|`export default (params) =\u003e { };`|\n|`met→`|`methodName = (params) =\u003e { };`|\n|`fre→`|`arrayName.forEach(element =\u003e { };`|\n|`fof→`|`for(let itemName of objectName { };`|\n|`fin→`|`for(let itemName in objectName { };`|\n|`anfn→`|`(params) =\u003e { };`|\n|`nfn→`|`const functionName = (params) =\u003e { };`|\n|`dob→`|`const {propName} = objectToDescruct`|\n|`dar→`|`const [propName] = arrayToDescruct`|\n|`sti→`|`setInterval(() =\u003e { }, intervalTime`|\n|`sto→`|`setTimeout(() =\u003e { }, delayTime`|\n|`prom→`|`return new Promise((resolve, reject) =\u003e { };`|\n|`cmmb→`|`comment block`|\n|`fregion→`|`full region block`|\n\n\n## React Native JavaScript\n\n|Prefix|Method|\n|-------:|-------|\n|`imr→`|`import React from 'react';`|\n|`imrc→`|`import React, { Component } from 'react';`|\n|`imrn→`|`import { $1 } from 'react-native';`|\n|`imrpc→`|`import React, { PureComponent } from 'react';`|\n\n\n## StyleSheet\n\n|Prefix|Method|\n|-------:|-------|\n|`rnss→`|`const styles = StyleSheet.create({});`|\n|`just→`|`justifyContent: '',`|\n|`align→`|`alignItems: '${1}',`|\n|`as→`|`aspectRatio: '',`|\n|`bor→`|`borderWidth: ,`|\n|`flex→`|`flexDirection: '',`|\n|`h→`|`height: ,`|\n|`w→`|`width: ,`|\n|`l→`|`left: '',`|\n|`mar→`|`marginHorizontal: '',`|\n|`max→`|`maxWidth: ,`|\n|`min→`|`minWidth: ,`|\n|`over→`|`overflow: ,`|\n|`padding→`|`paddingHorizontal: ,`|\n|`pos→`|`position: ,`|\n|`ri→`|`right: ,`|\n|`z→`|`zIndex: ,`|\n|`di→`|`direction: ,`|\n|`back→`|`backgroundColor: ,`|\n|`sha→`|`shadowColor: ,`|\n|`op→`|`opacity: ,`|\n|`e→`|`elevation: ,`|\n\n## React\n\n|Prefix|Method|\n|-------:|-------|\n|`imr→`|`import React from 'react';`|\n|`imrc→`|`import React, { Component } from 'react';`|\n|`imrcp→`|`import React, { Component } from 'react' \u0026 import PropTypes from 'prop-types';`|\n|`imrpc→`|`import React, { PureComponent } from 'react';`|\n|`imrpcp→`|`import React, { PureComponent } from 'react' \u0026 import PropTypes from 'prop-types';`|\n|`redux→`|`import { connect } from 'react-redux';`|\n|`rconst→`|`constructor(props) with this.state`|\n|`rconc→`|`constructor(props, context) with this.state`|\n|`est→`|`this.state = { };`|\n|`cwm→`|`componentWillMount = () =\u003e { };`|\n|`cdm→`|`componentDidMount = () =\u003e { };`|\n|`cwr→`|`componentWillReceiveProps = (nextProps) =\u003e { };`|\n|`scu→`|`shouldComponentUpdate = (nextProps, nextState) =\u003e { };`|\n|`cwup→`|`componentWillUpdate = (nextProps, nextState) =\u003e { };`|\n|`cdup→`|`componentDidUpdate = (prevProps, prevState) =\u003e { };`|\n|`cwun→`|`componentWillUnmount = () =\u003e { };`|\n|`ren→`|`render() { return( ) };`|\n|`sst→`|`this.setState({ })`|\n|`ssf→`|`this.setState((state, props) =\u003e return { })`|\n|`props→`|`this.props.propName`|\n|`state→`|`this.state.stateName`|\n\n\n## Redux\n\n|Prefix|Method|\n|-------:|-------|\n|`rx→`|`import { connect } from 'react-redux';`|\n|`rxaction→`|`redux action template`|\n|`rxconst→`|`export const $1 = '$1';`|\n|`rxmap→`|`mapping to props template`|\n|`rxreducer→`|`redux reducer template`|\n|`rxselect→`|`redux selector template`|\n\n\n## PropTypes\n\n|Prefix|Method|\n|-------:|-------|\n|`ipt→`|`import PropTypes from 'prop-types';`|\n|`pt→`|`Component.PropTypes = {};`|\n|`dfp→`|`Component.defaultProps = {};`|\n|`pta→`|`PropTypes.array`|\n|`ptar→`|`PropTypes.array.isRequired`|\n|`ptb→`|`PropTypes.bool`|\n|`ptbr→`|`PropTypes.bool.isRequired`|\n|`ptf→`|`PropTypes.func`|\n|`ptfr→`|`PropTypes.func.isRequired`|\n|`ptn→`|`PropTypes.number`|\n|`ptnr→`|`PropTypes.number.isRequired`|\n|`pto→`|`PropTypes.object`|\n|`ptor→`|`PropTypes.object.isRequired`|\n|`pts→`|`PropTypes.string`|\n|`ptsr→`|`PropTypes.string.isRequired`|\n|`ptnd→`|`PropTypes.node`|\n|`ptndr→`|`PropTypes.node.isRequired`|\n|`ptel→`|`PropTypes.element`|\n|`ptelr→`|`PropTypes.element.isRequired`|\n|`pti→`|`PropTypes.instanceOf(name)`|\n|`ptir→`|`PropTypes.instanceOf(name).isRequired`|\n|`pte→`|`PropTypes.oneOf([name])`|\n|`pter→`|`PropTypes.oneOf([name]).isRequired`|\n|`ptet→`|`PropTypes.oneOfType([name])`|\n|`ptetr→`|`PropTypes.oneOfType([name]).isRequired`|\n|`ptao→`|`PropTypes.arrayOf(name)`|\n|`ptaor→`|`PropTypes.arrayOf(name).isRequired`|\n|`ptoo→`|`PropTypes.objectOf(name)`|\n|`ptoor→`|`PropTypes.objectOf(name).isRequired`|\n|`ptsh→`|`PropTypes.shape({ })`|\n|`ptshr→`|`PropTypes.shape({ }).isRequired`|\n\n## GraphQL\n|`graphql→`|`import { compose, graphql } from 'react-apollo';`|\n### `expgql`\n```js\nexport default compose(\n  graphql($1, { name: $2 })\n)($3)\n```\n\n## Console\n\n|Prefix|Method|\n|-------:|-------|\n|`clg→`|`console.log(object)`|\n|`cas→`|`console.assert(expression,object)`|\n|`ccl→`|`console.clear()`|\n|`cco→`|`console.count(label)`|\n|`cdi→`|`console.dir`|\n|`cer→`|`console.error(object)`|\n|`cgr→`|`console.group(label)`|\n|`cge→`|`console.groupEnd()`|\n|`ctr→`|`console.trace(object)`|\n|`cwa→`|`console.warn`|\n|`cin→`|`console.info`|\n\n\n## React Native Components\n\n\n### `rnc`\n\n```javascript\nimport React, { Component } from 'react';\nimport { Text, View } from 'react-native';\n\nexport default class $1 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n    };\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n### `rnce`\n\n```javascript\nimport React, { Component } from 'react';\nimport { Text, View } from 'react-native';\n\nexport class $1 extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n    };\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nexport default $1\n```\n\n\n### `rnpc`\n\n```javascript\nimport React, { PureComponent } from 'react';\nimport { Text, View } from 'react-native';\n\nexport default class $1 extends PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n    };\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n\n### `rnpce`\n\n```javascript\nimport React, { PureComponent } from 'react';\nimport { Text, View } from 'react-native';\n\nclass $1 extends PureComponent {\n  constructor(props) {\n    super(props);\n    this.state = {\n    };\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e $2 \u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nexport default $1\n```\n\n\n### `rncsl`\n\n```javascript\nimport React from 'react';\nimport { Text, View } from 'react-native';\n\nconst $1 = ({\n    params1,\n}) =\u003e (\n    \u003cView\u003e\n        \u003cText\u003e$2\u003c/Text\u003e\n    \u003c/View\u003e\n);\n\nexport default $1;\n```\n\n\n## Typescript React Native\n\n### `tsrnc`\n\n```javascript\nimport * as React from 'react';\nimport { View, StyleSheet, Text, } from 'react-native';\n\nexport interface $1Props {\n}\n\nexport default class $1 extends React.Component\u003c$1Props, any\u003e {\n  constructor(props: $1Props) {\n    super(props);\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n         \u003cText\u003e\n          $2\n         \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n\n### `tsrnc`\n\n```javascript\nimport * as React from 'react';\nimport { View, StyleSheet, Text, } from 'react-native';\n\nexport interface $1Props {\n}\n\nexport interface $1State {\n}\n\nexport default class $1 extends React.Component\u003c$1Props, $1State\u003e {\n  constructor(props: $1Props) {\n    super(props);\n    this.state = {\n    };\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n         \u003cText\u003e$1\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n\n### `tsrnpc`\n\n```javascript\nimport * as React from 'react';\nimport { View, StyleSheet, Text } from 'react-native';\n\nexport interface AppProps {\n}\n\nexport default class App extends React.PureComponent\u003cAppProps, any\u003e {\n  constructor(props: AppProps) {\n    super(props);\n  }\n\n  public render() {\n    return (\n      \u003cView\u003e\n         \u003cText\u003e\n           App\n         \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n\n### `tsrncsl`\n\n```javascript\nimport * as React from 'react';\nimport { View, Text } from 'react-native';\n\nexport interface AppProps {\n}\n\nexport function App (props: AppProps) {\n    return (\n      \u003cView\u003e\n         \u003cText\u003eApp\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n}\n\n```\n\n\n## Others\n\n### `cmmb`\n\n```JS\n/**\n|--------------------------------------------------\n| $1\n|--------------------------------------------------\n*/\n```\n\n### `desc`\n\n```javascript\ndescribe('$1', () =\u003e {\n  $2\n})\n```\n\n### `test`\n\n```javascript\ntest('should $1', () =\u003e {\n  $2\n})\n```\n\n### `tit`\n\n```javascript\nit('should $1', () =\u003e {\n  $2\n})\n```\n\n### `stest`\n\n```javascript\nimport { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'\n\ndescribe('\u003c${1:ComponentName} /\u003e', () =\u003e {\n  const defaultProps = {\n\n  }\n\n  const setup = buildSetup(${1: ComponentName }, defaultProps)\n\n  test('render', () =\u003e {\n    expect(setup().wrapper).toMatchSnapshot()\n  })\n})\n```\n\n### `sjtest`\n\n```javascript\nimport toJson from 'enzyme-to-json'\nimport { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'\n\ndescribe('\u003c${1:ComponentName} /\u003e', () =\u003e {\n  const defaultProps = {\n\n  }\n\n  const setup = buildSetup(${1: ComponentName }, defaultProps)\n\n  test('render', () =\u003e {\n    expect(toJson(setup().wrapper)).toMatchSnapshot()\n  })\n})\n```\n\n### `sntest`\n\n```javascript\nimport 'react-native'\nimport React from 'react'\nimport renderer from 'react-test-renderer'\n\nimport ${1:ComponentName} from '../${1:ComponentName}'\n\nit('renders correctly', () =\u003e {\n  const tree = renderer.create(\u003c${1:ComponentName} /\u003e).toJSON()\n\n  expect(tree).toMatchSnapshot()\n})\n```\n\n### `hocredux`\n\n```javascript\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nexport const mapStateToProps = state =\u003e ({\n\n})\n\nexport const mapDispatchToProps = {\n\n}\n\nexport const ${1:hocComponentName} = (WrappedComponent) =\u003e {\n  const hocComponent = ({ ...props }) =\u003e \u003cWrappedComponent {...props} /\u003e\n\n  hocComponent.propTypes = {\n  }\n\n  return hocComponent\n}\n\nexport default WrapperComponent =\u003e connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))\n```\n\n### `hoc`\n\n``` javascript\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nexport default (WrappedComponent) =\u003e {\n  const hocComponent = ({ ...props }) =\u003e \u003cWrappedComponent {...props} /\u003e\n\n  hocComponent.propTypes = {\n  }\n\n  return hocComponent\n}\n```\n\n## Lorem Ipsum\n\n|Prefix|Method|\n|-------:|-------|\n\n`li1→`\n\n```bash\nLorem Ipsum is simply dummy text of the printing and typesetting industry.  \n```\n\n`li2→`\n\n```bash\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\n```\n\n`li4→`\n\n```bash\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\nIt has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\nIt was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n```\n\n`li5→`\n\n```bash\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\nIt has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\nIt was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nThe standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamdylanngo%2Freact-native-snippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamdylanngo%2Freact-native-snippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamdylanngo%2Freact-native-snippet/lists"}