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',"
}
}
@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