feat: 💄 atom used rn-size-matters

#99

components/atoms/Button.tsx

@@ -2,6 +2,7 @@ import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from "react-n
 import ThemedGradient from "./ThemedGradient"
 import { useTheme } from "hooks"
 import { TouchableOpacity } from "react-native-gesture-handler"
+import { s } from "react-native-size-matters"
 
 type Mode = "gradient" | "fill" | "gradient_border"
 
@@ -56,26 +57,26 @@ export default ({
 
 const styles = StyleSheet.create({
 	container: {
-		borderRadius: 50,
+		borderRadius: s(50),
 		overflow: "hidden",
 	},
 	content: {
-		paddingVertical: 9,
-		paddingHorizontal: 24,
+		paddingVertical: s(9),
+		paddingHorizontal: s(24),
 		justifyContent: "center",
 		alignItems: "center",
 		flexDirection: "row",
-		borderRadius: 50,
+		borderRadius: s(50),
 	},
 	border: {
-		padding: 2,
+		padding: s(2),
 	},
 	text: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 11,
-		lineHeight: 14,
+		fontSize: s(11),
+		// lineHeight: 14,
 	},
 	disable: {
 		opacity: 0.5,

components/atoms/ButtonBack.tsx

@@ -10,6 +10,7 @@ import {
 import { useTheme } from "hooks"
 import Icon2 from "./Icon2"
 import { COLOR } from "utils"
+import { s } from "react-native-size-matters"
 
 type ButtonProps = {
 	onPress?(): void
@@ -44,8 +45,8 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 16,
-		lineHeight: 20,
-		marginLeft: 4,
+		fontSize: s(16),
+		lineHeight: s(20),
+		marginLeft: s(4),
 	},
 })

components/atoms/Footer.tsx

@@ -1,4 +1,5 @@
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native"
+import { s, vs } from "react-native-size-matters"
 
 type Props = {
 	Right?: JSX.Element | boolean
@@ -15,12 +16,12 @@ export default ({ Center, Left, Right, style }: Props) => (
 	</View>
 )
 
-export const FOOTER_HEIGHT = 56
+export const FOOTER_HEIGHT = vs(56)
 
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: "row",
-		marginHorizontal: 30,
+		marginHorizontal: s(30), // TODO: Standart Wrapper, need constant
 		height: FOOTER_HEIGHT,
 		alignItems: "center",
 		justifyContent: "space-between",

components/atoms/Icon2.tsx

@@ -1,5 +1,7 @@
+import { memo } from "react"
 import { StyleSheet, View } from "react-native"
 import { SvgCss, XmlProps } from "react-native-svg"
+import { s } from "react-native-size-matters"
 import Icons from "assets/svg2/icons"
 import { COLOR } from "utils"
 
@@ -11,10 +13,10 @@ type Props = Omit<XmlProps, "xml" | "fill"> & {
 	name: IconName
 }
 
-export default ({ size = 14, name, ...props }: Props) => {
+export default memo(({ size = 14, name, ...props }: Props) => {
 	const style = {
-		width: props.style?.width || size,
-		height: props.style?.height || size,
+		width: props.style?.width || s(size),
+		height: props.style?.height || s(size),
 	}
 
 	const Icon = Icons[name]
@@ -23,7 +25,7 @@ export default ({ size = 14, name, ...props }: Props) => {
 		return <SvgCss {...props} {...style} xml={Icon} style={[style, props.style]} />
 	}
 	return <View style={[styles.fake, style, props.style]} />
-}
+})
 
 const styles = StyleSheet.create({
 	fake: {

components/atoms/Word.tsx

@@ -8,6 +8,7 @@ import {
 	View,
 	ViewStyle,
 } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR, hexAlpha } from "utils"
 
 type Props = {
@@ -50,10 +51,10 @@ const styles = StyleSheet.create({
 		backgroundColor: COLOR.Dark3,
 		flexDirection: "row",
 		alignItems: "center",
-		paddingHorizontal: 20, // 22 -
-		paddingVertical: 11,
-		borderRadius: 50,
-		borderWidth: 2,
+		paddingHorizontal: s(20),
+		paddingVertical: s(11),
+		borderRadius: s(50),
+		borderWidth: s(2),
 		borderColor: COLOR.Dark2,
 	},
 	containerHidden: {
@@ -67,16 +68,16 @@ const styles = StyleSheet.create({
 		color: hexAlpha(COLOR.White, 40),
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 18,
-		lineHeight: 23,
-		marginRight: 6,
+		fontSize: s(18),
+		lineHeight: s(23),
+		marginRight: s(6),
 	},
 	text: {
 		fontFamily: "CircularStd",
 		color: COLOR.White,
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 16,
-		lineHeight: 20,
+		fontSize: s(16),
+		lineHeight: s(20),
 	},
 })