React Native Snippet installs statistics

VS Code React Native, React Native Typescript, StyleSheet, ReactJS, Redux Snippet

This extension provide you Javascript and React/Redux snippets in ES6, ES7, Typescript with babel plugins features for Vs Code

Here is direct link to marketplace React Native, StyleSheet, ReactJS, Redux Snippet

Tutorial

Supported languages (file extensions)

• JavaScript (.js) • Redux (.js) • ReactJS (.js) • React Native (.js) • React Native StyleSheet (.js) • TypeScript ReactJS (.tsx) • Typescript React Native (.tsx)

Snippets info

Every space inside { }; and ( ) means that this is pushed into next line :) $ represent each step after tab.

Basic Methods

|Prefix|Method|

|imp→|import moduleName from 'module';| |imn→|import 'module';| |imd→|import { destructuredModule } from 'module';| |ime→|import * as alias from 'module';| |ima→|import { originalName as aliasName} from 'module';| |exp→|export default moduleName| |exd→|export { destructuredModule } from 'module';| |exa→|export { originalName as aliasName} from 'module';| |enf→|export const functionName = (params) => { };| |edf→|export default (params) => { };| |met→|methodName = (params) => { };| |fre→|arrayName.forEach(element => { };| |fof→|for(let itemName of objectName { };| |fin→|for(let itemName in objectName { };| |anfn→|(params) => { };| |nfn→|const functionName = (params) => { };| |dob→|const {propName} = objectToDescruct| |dar→|const [propName] = arrayToDescruct| |sti→|setInterval(() => { }, intervalTime| |sto→|setTimeout(() => { }, delayTime| |prom→|return new Promise((resolve, reject) => { };| |cmmb→|comment block| |fregion→|full region block|

React Native JavaScript

|Prefix|Method|

|imr→|import React from 'react';| |imrc→|import React, { Component } from 'react';| |imrn→|import { $1 } from 'react-native';| |imrpc→|import React, { PureComponent } from 'react';|

StyleSheet

|Prefix|Method|

|rnss→|const styles = StyleSheet.create({});| |just→|justifyContent: '',| |align→|alignItems: '${1}',| |as→|aspectRatio: '',| |bor→|borderWidth: ,| |flex→|flexDirection: '',| |h→|height: ,| |w→|width: ,| |l→|left: '',| |mar→|marginHorizontal: '',| |max→|maxWidth: ,| |min→|minWidth: ,| |over→|overflow: ,| |padding→|paddingHorizontal: ,| |pos→|position: ,| |ri→|right: ,| |z→|zIndex: ,| |di→|direction: ,| |back→|backgroundColor: ,| |sha→|shadowColor: ,| |op→|opacity: ,| |e→|elevation: ,|

React

|Prefix|Method|

|imr→|import React from 'react';| |imrc→|import React, { Component } from 'react';| |imrcp→|import React, { Component } from 'react' & import PropTypes from 'prop-types';| |imrpc→|import React, { PureComponent } from 'react';| |imrpcp→|import React, { PureComponent } from 'react' & import PropTypes from 'prop-types';| |redux→|import { connect } from 'react-redux';| |rconst→|constructor(props) with this.state| |rconc→|constructor(props, context) with this.state| |est→|this.state = { };| |cwm→|componentWillMount = () => { };| |cdm→|componentDidMount = () => { };| |cwr→|componentWillReceiveProps = (nextProps) => { };| |scu→|shouldComponentUpdate = (nextProps, nextState) => { };| |cwup→|componentWillUpdate = (nextProps, nextState) => { };| |cdup→|componentDidUpdate = (prevProps, prevState) => { };| |cwun→|componentWillUnmount = () => { };| |ren→|render() { return( ) };| |sst→|this.setState({ })| |ssf→|this.setState((state, props) => return { })| |props→|this.props.propName| |state→|this.state.stateName|

Redux

|Prefix|Method|

|rx→|import { connect } from 'react-redux';| |rxaction→|redux action template| |rxconst→|export const $1 = '$1';| |rxmap→|mapping to props template| |rxreducer→|redux reducer template| |rxselect→|redux selector template|

PropTypes

|Prefix|Method|

|ipt→|import PropTypes from 'prop-types';| |pt→|Component.PropTypes = {};| |dfp→|Component.defaultProps = {};| |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(name)| |ptir→|PropTypes.instanceOf(name).isRequired| |pte→|PropTypes.oneOf([name])| |pter→|PropTypes.oneOf([name]).isRequired| |ptet→|PropTypes.oneOfType([name])| |ptetr→|PropTypes.oneOfType([name]).isRequired| |ptao→|PropTypes.arrayOf(name)| |ptaor→|PropTypes.arrayOf(name).isRequired| |ptoo→|PropTypes.objectOf(name)| |ptoor→|PropTypes.objectOf(name).isRequired| |ptsh→|PropTypes.shape({ })| |ptshr→|PropTypes.shape({ }).isRequired|

GraphQL

|graphql→|import { compose, graphql } from 'react-apollo';|

expgql

Console

|Prefix|Method|

|clg→|console.log(object)| |cas→|console.assert(expression,object)| |ccl→|console.clear()| |cco→|console.count(label)| |cdi→|console.dir| |cer→|console.error(object)| |cgr→|console.group(label)| |cge→|console.groupEnd()| |ctr→|console.trace(object)| |cwa→|console.warn| |cin→|console.info|

React Native Components

rnc

rnce

rnpc

rnpce

rncsl

Typescript React Native

tsrnc

tsrnc

tsrnpc

tsrncsl

Others

cmmb

desc

test

tit

stest

sjtest

sntest

hocredux

hoc

Lorem Ipsum

|Prefix|Method|

li1→

li2→

li4→

li5→

Description from the VS Code Marketplace listing.