Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>eJOY-React-Native-SnippetsNew to Visual Studio Code? Get it now.
eJOY-React-Native-Snippets

eJOY-React-Native-Snippets

eJOY JSC

|
2,191 installs
| (1) | Free
Code snippets for eJOY members using React Native
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Usage

After install this snippets add this inside your settings

"editor.snippetSuggestions": "top",

Snippets List

Snippets Content
imr Import React
imrc Import React Component
imrn Import React-Native Element
ims Import Styled-Components
imsn Import Styled-Components Native
rct Redux constant
crr Connect Redux
sl Stateless Component
slc Stateless Component Function
ccs Component Class
edccs Export default Component Class
rrd Redux Reducer
rpf Redux Pure Function
rpc Redux Pure Function Const
cwm ComponentWillMount
cdm ComponentDidMount
cdu ComponentDidUpdate
cwu ComponentWillUpdate
cwum ComponentWillUnmount
cwrp ComponentWillReceiveProps
ess EStyleSheet Style
ed Export default
edl EslintDisableLine
styc Styled Component
estyc Export Styled Component
edstyc Export default Styled Component
cmmb Comment Big Block
log Console Log
tdesc Test Describe
tit Test It

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Trigger Content
rcc→ class component skeleton
rccp→ class component skeleton with prop types after the class
rcjc→ class component skeleton without import and default export lines
rcfc→ class component skeleton that contains all the lifecycle methods
rsc→ stateless component skeleton
rscp→ stateless component with prop types skeleton
rpt→ empty propTypes declaration
con→ class default constructor with props
conc→ class default constructor with props and context
est→ empty state object
ren→ render method
sst→ this.setState with object as parameter
ssf→ this.setState with function as parameter
props→ this.props
state→ this.state
bnd→ binds the this of method inside the constructor
rrcon→ reactReduxContainer

The following table lists all the snippets that can be used for prop types. Every snippet regarding prop types begins with pt so it's easy to group it all together and explore all the available options. On top of that each prop type snippets has one equivalent when we need to declare that this property is also required. For example pta creates the PropTypes.array and ptar creates the PropTypes.array.isRequired

Trigger Content
pta→ PropTypes.array,
ptar→ PropTypes.array.isRequired,
ptb→ PropTypes.bool,
ptbr→ PropTypes.bool.isRequired,
ptf→ PropTypes.func,
ptfr→ PropTypes.func.isRequired,
ptn→ PropTypes.number,
ptnr→ PropTypes.number.isRequired,
pto→ PropTypes.object.,
ptor→ PropTypes.object.isRequired,
pts→ PropTypes.string,
ptsr→ PropTypes.string.isRequired,
ptnd→ PropTypes.node,
ptndr→ PropTypes.node.isRequired,
ptel→ PropTypes.element,
ptelr→ PropTypes.element.isRequired,
pti→ PropTypes.instanceOf(ClassName),
ptir→ PropTypes.instanceOf(ClassName).isRequired,
pte→ PropTypes.oneOf(['News', 'Photos']),
pter→ PropTypes.oneOf(['News', 'Photos']).isRequired,
ptet→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
ptetr→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
ptao→ PropTypes.arrayOf(PropTypes.number),
ptaor→ PropTypes.arrayOf(PropTypes.number).isRequired,
ptoo→ PropTypes.objectOf(PropTypes.number),
ptoor→ PropTypes.objectOf(PropTypes.number).isRequired,
ptsh→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),
ptshr→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,

imr [Import React]

import React from 'react';

imrc [Import React Component]

import React, { Component } from 'react';

imrn [Import React-Native Element]

import { $1 } from 'react-native';

ims [Import Styled-Components]

import styled from 'styled-components';

imsn [Import Styled-Components Native]

import styled from 'styled-components/native';

rct [Redux Constant]

export const $1 = '$1';

crr [Connect Redux]

import { connect } from 'react-redux';

sl [Stateless Component]

const $1 = () => (
  $2
);

export default $1;

slc [Stateless Component Function]

function $1($2) {
  $3
}

export default $1;

ccs [Component Class]

class $1 extends Component {
  state = { $2 }
  render() {
    return (
      $3
    );
  }
}

export default $1;

edccs [Export default Component Class]

export default class $1 extends Component {
  state = { $2 }
  render() {
    return (
      $3
    );
  }
}

rrd [Redux Reducer]

export default (state = $1, action) => {
  switch (action.type) {
    case $2:
      $3
    default:
      return state;
  }
};

rpf [Redux pure function]

export const $1 = '$1';

export function $2($3) {
  return {
    type: $1,
    $3
  }
}

rpc [Redux pure function const]

export const $1 = '$1';

export const $2 = $3 => ({
  type: $1,
  $3
});

cwm [ComponentWillMount]

componentWillMount() {
  $1
}

cwu [ComponentWillUpdate]

componentWillUpdate() {
  $1
}

cdu [ComponentDidUpdate]

componentDidUpdate(prevProps, prevState) {
  $1
}

cdm [ComponentDidMount]

componentDidMount() {
  $1
}

cwum [ComponentWillUnmount]

componentWillUnmount() {
  $1
}

cwrp [ComponentWillReceiveProps]

componentWillReceiveProps(nextProps) {
  $1
}

ess [EStyleSheet]

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  $1
});

export default styles;

ed [Export default]

export default $1;

edl [Eslint Disable Line]

// eslint-disable-line

styc [Styled Component]

const $1 = styled.$2`
  $3
`

estyc [Export Styled Component]

export const $1 = styled.$2`
  $3
`

edstyc [Export default Styled Component]

export default styled.$1`
  $2
`

cmmb [Comment Big Block]

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

log [Console Log]

console.log('====================================');
console.log($1);
console.log('====================================');

tdesc [Test Describe]

describe('$1', () => {
  $2
});

tit [Test It]

it('should $1', $2($3) => {
  $4
});
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft