gridaco/code

`react-native` - more accurate styling convention (Optional unit specification)

softmarshmallow opened this issue · 0 comments

softmarshmallow commented

React Native does not have a unit specification by default. AFAIK, the styled-components/native modules does support explicit unit specification, so we'll need to extend our FrameworkOptions for react-native to specify its behavior.

Screen Shot 2022-03-02 at 4 11 43 PM

Fix1. Current output w/StyleSheet (Wrong)

  1. units must not be specified on rn stylesheet
  2. the property assignment shall start with lowerCamelCase by default.
const styles = StyleSheet.create({
	RootWrapperThumbnail: {
	position: "relative",
	minHeight: "100vh",
	backgroundColor: "rgba(229, 229, 229, 1)"
},
	Thumbnail: {
	display: "flex",
	justifyContent: "flex-start",
	flexDirection: "row",
	alignItems: "flex-start",
	shadowColor: "rgba(0, 0, 0, 0.12)",
	shadowOffset: {
	width: 0,
	height: 1.9185187816619873
},
	elevation: 8,
	backgroundColor: "rgba(255, 255, 255, 1)",
	position: "absolute",
	left: "51px",
	top: "162px",
	width: "921px",
	height: "518px"
},

Fix2. Current output w/StyledComponents (Improvements)

  1. the size should have a unit-less declaration option (without px)
  2. shadow-offset conversion is broken
  3. number rounding across all static values (as global config)
const RootWrapperThumbnail = styled.View`
	position: relative;
	min-height: 100vh;
	background-color: rgba(229, 229, 229, 1);
`;

const Thumbnail = styled.View`
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	align-items: flex-start;
	shadow-color: rgba(0, 0, 0, 0.12);
	shadow-offset: [object Object];
	elevation: 8;
	background-color: rgba(255, 255, 255, 1);
        padding: 9.592594146728516;
	position: absolute;
	left: 51px;
	top: 162px;
	width: 921px;
	height: 518px;
`;

References