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…