Skip to content

Instantly share code, notes, and snippets.

@saugatmaharjan
Last active August 11, 2024 01:01
Show Gist options
  • Save saugatmaharjan/493ab5eaaf1a29eaba1b3e73119df1c4 to your computer and use it in GitHub Desktop.
Save saugatmaharjan/493ab5eaaf1a29eaba1b3e73119df1c4 to your computer and use it in GitHub Desktop.
{
"create": {
"create": "const styles = StyleSheet.create({})"
},
"Platform_Select": {
"pselect": "...Platform.select({ ios: {}, android: {}})"
},
"Shadow_Properties": {
"sdw": "...Platform.select({ ios: { ...shadowProperties }, android: { elevation }}),"
},
"View": {
"v": "<View style={{}}></View>"
},
"Text": {
"te": "<Text style={{}}></Text>"
},
"View_And_Text": {
"v>te": "<View><Text></Text></View>"
},
"Image": {
"img": "<Image source={{}} style={{}} />"
},
"FlatList": {
"fl": "<FlatList data={} renderItem={} />"
},
"SectionList": {
"sl": "<SectionList data={} renderItem={} />"
},
"ScrollView": {
"sv": "<ScrollView></ScrollView>"
},
"TextInput": {
"ti": "<TextInput value={} placeholder='' underlineColorAndroid={false} onChange={} />"
},
"Modal": {
"mdl": "<Modal visible={} animation='slide'></Modal>"
},
"TouchableOpacity": {
"to": "<TouchableOpacity style={} onPress={}></TouchableOpacity>"
},
"TouchableWithoutFeedback": {
"twf": "<TouchableWidthoutFeedback style={} onPress={}></TouchableWidthoutFeedback>"
},
"TouchableHighlight": {
"th": "<TouchableHighlight style={{}} onPress={}></TouchableHighlight>"
},
"TouchableWithNativeFeedback": {
"twnf": "<TouchableWithNativeFeedback style={} onPress={}></TouchableWithNativeFeedback>"
},
"ActivityIndicator": {
"actind": "<ActivityIndicator color='#00ff00' />"
},
"Button": {
"btn": "<Button color='#00ff00' title='button' onPress={} />"
},
"Position": {
"pos": "position: 'absolute',"
},
"Position_Absolute": {
"pos:a": "position: 'absolute',"
},
"Position_Relative": {
"pos:r": "position: 'relative',"
},
"Top": {
"t": "top: 0,"
},
"Top_Auto": {
"t:a": "top: 'auto',"
},
"Right": {
"r": "right: 0,"
},
"Right_Auto": {
"r:a": "right: 'auto',"
},
"Bottom": {
"b": "bottom: 0,"
},
"Bottom_Auto": {
"b:a": "bottom: 'auto',"
},
"Left": {
"l": "left: 0,"
},
"Left_Auto": {
"l:a": "left: 'auto',"
},
"ZIndex": {
"z": "zIndex: 2,"
},
"Overflow": {
"ov": "overflow: 'hidden',"
},
"Overflow_Visible": {
"ov:v": "overflow: 'visible',"
},
"Oveflow_Hidden": {
"ov:h": "overflow: 'hidden',"
},
"Margin": {
"m": "margin: 4,"
},
"Margin_Auto": {
"m:a": "margin: 'auto',"
},
"Margin_Top": {
"mt": "marginTop: 4,"
},
"Margin_Top_Auto": {
"mt:a": "marginTop: 'auto',"
},
"Margin_Right": {
"mr": "marginRight: 4,"
},
"Margin_Right_Auto": {
"mr:a": "marginRight: 'auto',"
},
"Margin_Bottom": {
"mb": "marginBottom: 4,"
},
"Margin_Bottom_Auto": {
"mb:a": "marginBottom: 'auto',"
},
"Margin_Left": {
"ml": "marginLeft: 4,"
},
"Margin_Left_Auto": {
"ml:a": "marginLeft: 'auto',"
},
"Padding": {
"p": "padding: 4,"
},
"Padding_Top": {
"pt": "paddingTop: 4,"
},
"Padding_Right": {
"pr": "paddingRight: 4,"
},
"Padding_Bottom": {
"pb": "paddingBottom: 4,"
},
"Padding_Left": {
"pl": "paddingLeft: 4,"
},
"Width": {
"w": "width: 120,"
},
"Width_Auto": {
"w:a": "width: 'auto',"
},
"Height": {
"h": "height: 120,"
},
"Height_Auto": {
"h:a": "height: 'auto',"
},
"Max_Width": {
"maxw": "maxWidth: 120,"
},
"Max_Height": {
"maxh": "maxHeight: 120,"
},
"Min_Width": {
"minw": "minWidth: 120,"
},
"Min_Height": {
"minh": "minHeight: 120,"
},
"Border_Colors": {
"bc": "borderColor: #000,"
},
"Border_Color_Transparent": {
"bc:t": "borderColor: 'transparent',"
},
"Border_Width": {
"bw": "borderWidth: 1,"
},
"Border_Top_Width": {
"btw": "borderTopWidth: 1,"
},
"Border_Right_Width": {
"brw": "borderRightWidth: 1,"
},
"Border_Bottom_Width": {
"bbw": "borderBottomWidth: 1,"
},
"Border_Left_Width": {
"blw": "borderLeftWidth: 1,"
},
"Border_Top_Color": {
"btc": "borderTopColor: '#000',"
},
"Border_Top_Color_Transparent": {
"btc:t": "borderTopColor: 'transparent',"
},
"Border_Right_Color": {
"brc": "borderRightColor: '#000',"
},
"Border_Right_Color_Transparent": {
"brc:t": "borderRightColor: 'transparent',"
},
"Border_Bottom_Color": {
"prefix": "bbc",
"bbc": "borderBottomColor: '#000',"
},
"Border_Bottom_Color_Transparent": {
"bbc:t": "borderBottomColor: 'transparent',"
},
"Border_Left_Color": {
"blc": "borderLeftColor: '#000',"
},
"Border_Left_Color_Transparent": {
"blc:t": "borderLeftColor: 'transparent',"
},
"Border_Radius": {
"br": "borderRadius: 4,"
},
"Background_Color": {
"bgc": "backgroundColor: '#fff',"
},
"BackgroundColor_Transparent": {
"bgc:t": "backgroundColor: 'transparent',"
},
"Color": {
"c": "color: '#333',"
},
"Color_RGB": {
"c:r": "color: 'rgb(0, 0, 0)',"
},
"Color_RGBA": {
"c:ra": "color: 'rgba(0, 0, 0, 0.5)',"
},
"Text_Align": {
"ta": "textAlign: 'center',"
},
"Text_Align_Left": {
"ta:l": "textAlign: 'left',"
},
"Text_Align_Center": {
"ta:c": "textAlign: 'center',"
},
"Text_Align_Right": {
"ta:r": "textAlign: 'right',"
},
"Text_Align_Right_Justify": {
"ta:j": "textAlign: 'justify',"
},
"Text_Decoration": {
"td": "textDecoration: 'underline',"
},
"Transform_Scale": {
"t:s": "transform: { scale: 1.2 }"
},
"Transform_Scale_X": {
"t:sx": "transform: { scaleX: 1.2 }"
},
"Transform_Scale_Y": {
"t:sy": "transform: { scaleY: 1.2 }"
},
"Transform_Rotate": {
"t:r": "transform: { rotate: '90deg' }"
},
"Transform_Rotate_X": {
"t:rx": "transform: { rotateX: '90deg' }"
},
"Transform_Rotate_Y": {
"t:ry": "transform: { rotateY: '90deg' }"
},
"Transform_Rotate_Z": {
"t:rz": "transform: { rotateZ: '90deg' }"
},
"Transform_Translate_X": {
"t:tx": "transform: { translateX: x }"
},
"Transform_Translate_Y": {
"t:ty": "transform: { translateY: y }"
},
"Line_Height": {
"lh": "lineHeight: 24,"
},
"Letter_Spacing": {
"ls": "letterSpacing: 1,"
},
"Font_Weight": {
"fw": "fontWeight: 600,"
},
"Font_Weight_Bold": {
"fw:b": "fontWeight: 'bold',"
},
"Font_Style": {
"fst": "fontStyle: 'italic',"
},
"Font_Style_Italic": {
"fst:i": "fontStyle: 'italic',"
},
"Font_Size": {
"fs": "fontSize: 14,"
},
"Font_Family": {
"ff": "fontFamily: 'Roboto'},"
},
"Opacity": {
"prefix": "o",
"o": "opacity: 0.5,"
},
"Flex_Direction": {
"fd": "flexDirection: 'row',"
},
"Flex_Direction_Row": {
"fd:r": "flexDirection: 'row',"
},
"Flex_Direction_Row_Reverse": {
"fd:rr": "flexDirection: 'row-reverse',"
},
"Flex_Direction_Column": {
"fd:c": "flexDirection: 'column',"
},
"Flex_Direction_Column_Reverse": {
"fd:cr": "flexDirection: 'column-reverse',"
},
"Flex_Wrap": {
"fwrap": "flexWrap: 'wrap',"
},
"Flex_Wrap_Nowrap": {
"fwrap:n": "flexWrap: 'nowrap',"
},
"Flex_Wrap_Wrap": {
"fwrap:w": "flexWrap: 'wrap',"
},
"Justify_Content": {
"jc": "justifyContent: 'center',"
},
"Justify_Content_Flex_Start": {
"jc:fs": "justifyContent: 'flex-start',"
},
"Justify_Content_Flex_End": {
"jc:fe": "justifyContent: 'flex-end',"
},
"Justify_Content_Flex_Center": {
"jc:c": "justifyContent: 'center',"
},
"Justify_Content_Flex_Space_Evenly": {
"jc:se": "justifyContent: 'center',"
},
"Justify_Content_Flex_Space_Between": {
"jc:sb": "justifyContent: 'space-between',"
},
"Justify_Content_Flex_Space_Arround": {
"jc:sa": "justifyContent: 'space-around',"
},
"Aligin_Items": {
"ai": "alignItems: 'center"
},
"Align_Items_Flex_Start": {
"ai:fs": "alignItems: 'flex-start',"
},
"Align_Items_Flex_End": {
"ai:fe": "alignItems: 'flex-end',"
},
"Align_Items_Center": {
"ai:c": "alignItems: 'center',"
},
"Align_Items_Stretch": {
"ai:s": "alignItems: 'stretch',"
},
"Flex": {
"f": "flex: 1,"
},
"Align_Self": {
"as": "alignSelf: 'center',"
},
"Margin_Horizontal": {
"mh": "marginHorizontal: 16,"
},
"Margin_Vertical": {
"mv": "marginVertical: 16,"
},
"Backface_Visibility": {
"bfv:v": "backfaceVisibility: 'visible',"
},
"Border_Bottom_Left_Radius": {
"bblr": "borderBottomLeftRadius: 4,"
},
"Border_Bottom_Right_Radius": {
"bbrr": "borderBottomRightRadius: 4,"
},
"Border_Top_Left_Radius": {
"btlr": "borderTopLeftRadius: 4,"
},
"Border_Top_Right_Radius": {
"btrr": "borderTopRightRadius: 4,"
},
"Resize_Mode": {
"prefix": "rm",
"rm": "resizeMode: 'cover',"
},
"Overlay_Color": {
"ovclr": "overlayColor: '#fff',"
},
"Border_Style": {
"bs": "borderStyle: 'dashed',"
},
"Elevation": {
"elv": "elevation: 4"
},
"Text_Shadow_Color": {
"tsc": "textShadowColor: '#000',"
},
"Text_Shadow_Offset": {
"tso": "textShadowOffset: { width: 0, height: 4 },"
},
"Text_Shadow_Radius": {
"prefix": "tsr",
"tsr": "textShadowRadius: 2,"
},
"Text_Align_Vertical": {
"tav": "textAlignVertical: 'center',"
}
}
@rjsnh1522
Copy link

Reall good but give option to enable disable style in tags. sometimes I dont want style prop in the tag. and i delete it. so its better if we can do something to have a style prop or no style prop settings too,

@Renik07
Copy link

Renik07 commented Jul 24, 2023

Reall good but give option to enable disable style in tags. sometimes I dont want style prop in the tag. and i delete it. so its better if we can do something to have a style prop or no style prop settings too,

Yeah. Maybe add v! or !v for this

@rasul3d
Copy link

rasul3d commented Aug 15, 2023

The best feature would be to create View component starting with "." (dot) as html emmet does.
You just type name of the style and it creates View with the style name you type. And would be fabulous if it will create empty style for the created View.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment