MXSCOMP-62 - [SPIKE] React Stylesheet support

[grzegorzdec]

Determine the scope of effort for adding React Native Styling to Components. The goal is to determine the effort needed to add Styles to Lumin, iOS, Andriod

[grzegorzdec]

Preparetion before implementing React-Native StyleSheet

• In the beginning, we should rename our properties to match with React-Native StyleSheet eg:
  • In ButtonNode
    • textColor should be color
    • textSize should be fontSize etc..
• We should create list of properties that need renaming

Implementation

• From the mobile site, it should be straight forward, we can just add the following function in platform-factory.js

  _processStyles(properties) {
      if(properties.style) {
          const styles = properties.style
          Object.keys(styles).forEach(key => {
              const value = styles[key];
              properties = { ...properties, ...{ [key]: value } };
          })
      }
      
      return properties
  }

• It should be called before color parsing function
• this function is the only POC and still need some improvements
• I hope it can be implemented in a similar way for the lumin (like colors)

[grzegorzdec]

Button

Current Name	StyleSheet Name
roundness	borderRadius
iconColor	tintColor
textColor	color
textSize	fontSize

DropdownList

Current Name	StyleSheet Name
iconColor	tintColor
listMaxHeight*	maxHeight*
listTextSize*	fontSize*

Image

Current Name	StyleSheet Name
opaque	opacity

Text

Current Name	StyleSheet Name
style	fontStyle
weight	fontWeight
charSpacing	letterSpacing
lineSpacing	lineHeight
textColor	color
textSize	fontSize

TextEdit

Current Name	StyleSheet Name
charSpacing	letterSpacing
style	fontStyle
weight	fontWeight
lineSpacing	lineHeight
textColor	color
textSize	fontSize

Extra

Current Name	StyleSheet Name	Description
padding	padding, paddingBottom, paddingHorizontal, paddingLeft, paddingRight, paddingTop, paddingVertical	Nice to have and easy to implement
scale	scaleX, scaleY	Nice to have and easy to implement

Not implemented:

• alignContent
• alignItems
• alignSelf
• aspectRatio
• backfaceVisibility
• backgroundColor
• borderBottomColor
• borderBottomLeftRadius
• borderBottomRightRadius
• borderBottomWidth
• borderColor
• borderLeftColor
• borderLeftWidth
• borderRightColor
• borderRightWidth
• borderStyle
• borderTopColor
• borderTopLeftRadius
• borderTopRightRadius
• borderTopWidth
• borderWidth
• bottom
• decomposedMatrix
• direction
• display
• elevation
• flex
• flexBasis
• flexDirection
• flexGrow
• flexShrink
• flexWrap
• fontFamily
• fontVariant
• includeFontPadding
• justifyContent
• left
• margin
• marginBottom
• marginHorizontal
• marginLeft
• marginRight
• marginTop
• marginVertical
• maxHeight
• maxWidth
• minHeight
• minWidth
• overflow
• overlayColor
• paddingBottom
• paddingHorizontal
• paddingLeft
• paddingRight
• paddingTop
• paddingVertical
• position
• resizeMode
• right
• scaleX
• scaleY
• shadowColor
• shadowOffset
• shadowOpacity
• shadowRadius
• textAlign
• textAlignVertical
• textDecorationColor
• textDecorationLine
• textDecorationStyle
• textShadowColor
• textShadowOffset
• textShadowRadius
• tintColor
• top
• transform
• transformMatrix
• translateX
• translateY
• writingDirection
• zIndex