feat: 💄 components + rn-sm

#99

components/atoms/Dot.tsx

@@ -1,5 +1,6 @@
 import { useSpring, animated } from "@react-spring/native"
 import { StyleProp, StyleSheet, ViewStyle } from "react-native"
+import { s } from "react-native-size-matters"
 import { COLOR } from "utils"
 
 type DotProps = {
@@ -9,7 +10,7 @@ type DotProps = {
 
 export default ({ active, style }: DotProps) => {
 	const isActive = useSpring({
-		width: active ? 19 : 8,
+		width: active ? s(19) : s(8),
 		backgroundColor: active ? COLOR.White : COLOR.Marengo,
 	})
 
@@ -22,7 +23,7 @@ export default ({ active, style }: DotProps) => {
 
 const styles = StyleSheet.create({
 	view: {
-		height: 8,
-		borderRadius: 30,
+		height: s(8),
+		borderRadius: s(30),
 	},
 })

components/moleculs/BottomSheetHeader.tsx

@@ -1,6 +1,7 @@
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native"
 import { observer } from "mobx-react-lite"
 import { useTheme } from "hooks"
+import { s } from "react-native-size-matters"
 
 type Props = {
 	title: string
@@ -33,14 +34,14 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 21,
+		fontSize: s(21),
 	},
 	caption: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "400",
-		fontSize: 16,
-		marginTop: 8,
+		fontSize: s(16),
+		marginTop: s(8),
 	},
 	left: {},
 	right: {},

components/moleculs/Pagination.tsx

@@ -1,22 +1,21 @@
 import { Dot } from "components/atoms"
 import { StyleSheet, View } from "react-native"
+import { s } from "react-native-size-matters"
 
 type PaginationProps = {
 	acitveIndex: number
 	count: number
 }
 
-export default ({ count, acitveIndex }: PaginationProps) => {
-	return (
-		<View style={styles.container}>
-			{new Array(count).fill(null).map((_, index) => (
-				<Dot key={index} active={index === acitveIndex} style={styles.dot} />
-			))}
-		</View>
-	)
-}
+export default ({ count, acitveIndex }: PaginationProps) => (
+	<View style={styles.container}>
+		{new Array(count).fill(null).map((_, index) => (
+			<Dot key={index} active={index === acitveIndex} style={styles.dot} />
+		))}
+	</View>
+)
 
 const styles = StyleSheet.create({
 	container: { flexDirection: "row" },
-	dot: { marginRight: 4 },
+	dot: { marginRight: s(4) },
 })

components/organisms/Validator.tsx

@@ -7,6 +7,7 @@ import { Validator, ValidatorStatus, SignerInfo } from "core/types/coin/cosmos/V
 import { useStore } from "hooks"
 import { validatorIdentity } from "core/rest/keybase"
 import { SupportedCoins } from "constants/Coins"
+import { s } from "react-native-size-matters"
 
 type ValidatorProps = {
 	item: Validator
@@ -42,7 +43,7 @@ export default ({ item, onPressKebab, style }: ValidatorProps) => {
 
 	return (
 		<View style={[styles.container, style]}>
-			<View style={[styles.row, { marginBottom: 14 }]}>
+			<View style={[styles.row, { marginBottom: s(14) }]}>
 				<View style={styles.info}>
 					{source && <Image style={styles.avatar} source={source} />}
 					<Text style={styles.title}>{validator.name}</Text>
@@ -69,10 +70,10 @@ export default ({ item, onPressKebab, style }: ValidatorProps) => {
 
 const styles = StyleSheet.create({
 	container: {
-		height: 160,
-		borderRadius: 20,
+		height: s(160),
+		borderRadius: s(20),
 		backgroundColor: COLOR.Dark2,
-		padding: 24,
+		padding: s(24),
 	},
 	row: {
 		flexDirection: "row",
@@ -88,8 +89,8 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 24,
-		lineHeight: 30,
+		fontSize: s(24),
+		lineHeight: s(30),
 
 		color: COLOR.White,
 	},
@@ -112,29 +113,29 @@ const styles = StyleSheet.create({
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 14,
-		lineHeight: 18,
+		fontSize: s(14),
+		lineHeight: s(18),
 		color: COLOR.Marengo,
 	},
 
 	title: {
 		fontFamily: "CircularStd",
 		fontStyle: "normal",
 		fontWeight: "500",
-		fontSize: 18,
-		lineHeight: 23,
+		fontSize: s(18),
+		lineHeight: s(23),
 		flexShrink: 1,
 
 		color: COLOR.White,
 	},
 
 	avatar: {
-		width: 42,
-		height: 42,
-		borderRadius: 42,
+		width: s(42),
+		height: s(42),
+		borderRadius: s(42),
 		backgroundColor: COLOR.Dark3,
 
-		marginRight: 16,
+		marginRight: s(16),
 	},
 })