Pedipets (React Native Code Snippets)
Create react native Apps, fast & easy
Getting Started
Add this line to your settings after installation to higher Pedipest auto complete suggestions priority.
"editor.snippetSuggestions": "top"
Usage
ECMA Script
| Name |
Snippets |
Output |
| JSX Map State Item |
mapstate |
{ this.state.xxx.map(with callback) } |
| JSX Map Prop Item |
mapprop |
{ this.props.xxx.map(with callback) } |
| JSX Map Item |
mapitem |
{ xxx.map(with callback) } |
| Comment |
j// |
{ /* your comment here*/ } |
| App Registery |
appreg |
AppRegistry.registerComponent(...); |
| Var Require |
varreq |
var name = require ('path'); |
| Import My Module |
myimport |
import {} from ''; |
| Import ReactNative & Components |
imports |
import React,{Component} from 'react';
<import {View,Text} from 'react-native'; |
| Render |
ren |
Generates render function |
| Binded(Arrow Function) Render Function |
renBinded |
Generates binded render arrow function |
| Component |
component |
Creates react native component |
| Export Component |
exportComponent |
Creates component with export option |
| Full Component |
fullComponent |
Creates component with imports, export & constructor |
| Export Module |
exm |
module.exports = name; |
| Set State |
ss |
this.setState({}); |
| Arrow Function |
af |
(params)=>{} |
| Named Arrow Function |
naf |
name = (params)=>{} |
| Async Arrow Function |
aaf |
async(params)=>{} |
| Create Style Sheet |
css |
StyleSheet.create({}); |
| Create Const Style Sheet |
ccss |
const MyStyles = StyleSheet.create( {} ); |
Styles
| Name |
Snippets |
Output |
| Flex 1 |
f1 |
flex:1 |
| Font Family |
ff |
fontFamily: '- - -' |
| Font Size |
fs |
fontSize: - - - |
| Color |
color |
color: '#---' |
| Align Items Center |
aic |
alignItems: 'center' |
| Justify Content Center |
jcc |
justifyContent: 'center' |
| Center Both |
cboth |
alignItems:'center' , justifyContent:'center' |
| Shadow |
shadow |
shadowOpacity:0.5 , shadowRadius:30 |
| Background Color |
bg |
backgroundColor: '' |
| Border Radius |
br |
borderRadius: - - - |
| Pad Both |
padb |
padding: - - - |
| Padding Vertical |
padv |
paddingVertical : - - - |
| Padding Horizontal |
padh |
paddingHorizontal : - - - |
| Margin Both |
marb |
margin: - - - |
| Margin Vertical |
marv |
marginVertical: - - - |
| Margin Horizontal |
marh |
marginHorizontal: - - - |
| Text Right |
txtr |
textAlign: 'right' |
| Text Left |
txtl |
textAlign: 'left' |
| Text Center |
txtc |
textAlign: 'center' |
| Border |
borders |
borderWidth: 1 , borderColor: 'gray' |
| Center Self |
cself |
alignSelf: 'center' |
Props & Listeners
Note: letter 'p' at the begging of snippets means 'props' & letter 'l' means 'listener'
| Name |
Snippets |
Output |
| Prop Style |
ps |
style={{}} |
| OnPress |
lp |
onPress={} |
| onChangeText |
lct |
onChangeText={(txt)=>{}} |
| onChangeText & setState |
lcts |
onChangeText={(txt)=>{this.setStat(stateName:txt.trim()}} |
| onValueChange |
lvc |
onValueChange={(val)=>{}} |
Component Functions
| Name |
Snippets |
| Constructor |
ccon |
| ComponentDidMount |
cdm |
| ComponentWillMount |
cwm |
| ComponentWillUnmount |
cwum |
| Constructor |
ccon |
Components
| Name |
Snippets |
| View |
v |
| Touchable Opacity |
to |
| Touchable Opacity Row |
tor |
| Touchable Opacity Row Reverse |
torr |
| Touchable Highlight |
thl |
| Touchable Highlight Row |
thlr |
| Touchable Highlight Row Reverse |
thlrr |
| Image Local |
imgLocal |
| Image URL |
imgURL |
| Text |
txt |
| Scroll View |
scrollv |
| Switch |
sw |
| Text Input |
textInp |
View Helpers
| Name |
Snippets |
Output |
| Row |
row |
Creates a view with flexDirection: row & alignItems: Center |
| Row Reverse |
row-reverse |
Creates a view with flexDirection: row-reverse & alignItems: Center |
| Column |
col |
Creates a view with flexDirection: column & flex:1 |
| Column Reverse |
col-reverse |
Creates a view with flexDirection: column-reverse & flex:1 |
| Fix Horizontal Spacer |
fixHSpacer |
<View style={{width:30}}/> |
| Fix Vertical Spacer |
fixVSpacer |
<View style={{height:30}}/> |
| Flex Spacer |
flexSpacer |
<View style={{flex:1}}/> |
Modal Helpers
| Name |
Snippets |
Output |
| Modal |
modal |
Creates modal foundation |
| Modal Dark Background |
modalback |
Creates black transparent background for modal |
| Modal Panel |
modalpanel |
Creates white panel for modal |
React Navigation Library Helpers
Note: install react-navigation library before using these helpers.
| Name |
Snippets |
Output |
| Import Stack Navigator |
importstacknav |
Imports stack navigator library |
| Stack Navigator Setup |
stacknav |
Setups stack navigator |
| Navigation Push |
navpush |
this.props.navigation.navigate('pageName',{dataToPass}); |
| Navigation Back |
navback |
this.props.navigation.goBack(); |
| Navigation Params |
navparam |
this.props.navigation.state.params.name |
Vector Icons Library Helpers
Note: install react-native-vector-icons library before using these helpers.
| Name |
Snippets |
Output |
|
| Import FontAwesome Icons |
importFontAwesomeIcons |
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; |
|
| Font Awesome Icon |
iconFa |
<FontAwesomeIcon name='iconName' size={30} color='#000' /> |
|
| Import Entypo Icons |
importEntypoIcons |
... |
|
| Entypo Icon |
iconEntypo |
... |
|
| Import EvilIcons Icons |
importEvilIcons |
... |
|
| EvilIcons Icon |
iconEvil |
... |
|
| Import Foundation Icons |
importFoundationIcons |
... |
|
| Foundation Icon |
iconFoundation |
... |
|
| Import Ionicons |
importIonicons |
... |
|
| Ionicons Icon |
iconIon |
... |
|
| Import Material Icons |
importMaterialIcons |
... |
|
| Material Icons |
iconMaterial |
... |
|
| Import Zocial Icons |
importZocialIcons |
... |
|
| Zocial Icon |
iconZocial |
|
... |
Please email me your suggestions.
Pedram.Darapanah@gmail.com
| |
