Merge pull request #210 from xmartlabs/mmkv

[Chore] Upgrade MMKV

Author: joaguirrem

example/app/(app)/_layout.tsx

@@ -1,5 +1,3 @@
-import 'react-native-reanimated'
-
 import { Stack } from 'expo-router'
 
 import { useListenLocalStorage } from '@/common/localStorage'
@@ -10,18 +8,16 @@ export default function AppLayout() {
   const ready = useSplashScreen()
   const [accessToken] = useListenLocalStorage('accessToken')
 
-  const isLoggedIn = Boolean(accessToken)
-
   if (!ready) {
     return <Spinner />
   }
 
   return (
     <Stack screenOptions={{ headerShown: false }}>
-      <Stack.Protected guard={isLoggedIn}>
+      <Stack.Protected guard={Boolean(accessToken)}>
         <Stack.Screen name="index" />
       </Stack.Protected>
-      <Stack.Protected guard={!isLoggedIn}>
+      <Stack.Protected guard={!Boolean(accessToken)}>
         <Stack.Screen name="login" />
       </Stack.Protected>
     </Stack>

example/app/(app)/index.tsx

@@ -4,7 +4,7 @@ import Line, {
 } from '@xmartlabs/react-native-line'
 import { useRouter } from 'expo-router'
 import { Fragment, useEffect, useState } from 'react'
-import { Alert, Dimensions, Image, StyleSheet } from 'react-native'
+import { Alert, Dimensions, Image, StyleSheet, View } from 'react-native'
 
 import { LineError } from '@/common/errors'
 import {
@@ -15,6 +15,7 @@ import { ActivityBanner } from '@/components/ActivityBanner'
 import { Bullet } from '@/components/Bullet'
 import { Button } from '@/components/Button'
 import { ThemedView } from '@/components/ThemedView'
+import { Color } from '@/constants/color'
 
 function handleError(error: LineError) {
   const userInfo = JSON.parse(error.userInfo?.message ?? '')
@@ -80,17 +81,15 @@ export default function HomeScreen() {
   return (
     <Fragment>
       <ThemedView style={styles.container}>
-        <ThemedView style={styles.contentContainer}>
+        <View style={styles.contentContainer}>
           <Image source={{ uri: user?.pictureUrl }} style={styles.image} />
-          <Bullet header={strings.name} text={user?.displayName} />
-          <Bullet header={strings.userId} text={user?.userId} />
-          <Bullet header={strings.accessToken} text={token?.accessToken} />
-        </ThemedView>
+          <Bullet body={user?.displayName} header={strings.name} />
+          <Bullet body={user?.userId} header={strings.userId} />
+          <Bullet body={token?.accessToken} header={strings.accessToken} />
+        </View>
+        <Button onPress={verifyAccessToken} text={strings.verifyToken} />
+        <Button onPress={refreshAccessToken} text={strings.refreshToken} />
         <Button onPress={getFriendshipStatus} text={strings.isFriend} />
-        <ThemedView style={styles.row}>
-          <Button onPress={verifyAccessToken} text={strings.verifyToken} />
-          <Button onPress={refreshAccessToken} text={strings.refreshToken} />
-        </ThemedView>
         <Button onPress={logOut} text={strings.logOut} />
       </ThemedView>
       {loading && <ActivityBanner />}
@@ -112,7 +111,6 @@ const strings = {
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
     flex: 1,
     gap: 16,
     justifyContent: 'center',
@@ -126,16 +124,12 @@ const styles = StyleSheet.create({
   },
   image: {
     alignSelf: 'center',
-    backgroundColor: 'black',
-    borderColor: 'gray',
+    backgroundColor: Color.Gray,
+    borderColor: Color.LightGray,
     borderRadius: Dimensions.get('window').width / 1.5,
     borderWidth: 0.5,
     height: Dimensions.get('window').width / 3,
     resizeMode: 'cover',
     width: Dimensions.get('window').width / 3,
   },
-  row: {
-    flexDirection: 'row',
-    gap: 16,
-  },
 })

example/common/localStorage.ts

@@ -1,6 +1,9 @@
-import { MMKV, useMMKVString } from 'react-native-mmkv'
+import { createMMKV, useMMKVString } from 'react-native-mmkv'
 
-const localStorage = new MMKV({ encryptionKey: 'encryptionKey', id: 'default' })
+const localStorage = createMMKV({
+  encryptionKey: 'your-encryption-key',
+  id: 'default',
+})
 
 export function getLocalStorageItem(key: string) {
   return localStorage.getString(key)
@@ -11,7 +14,7 @@ export function setLocalStorageItem(key: string, value: string) {
 }
 
 export function removeLocalStorageItem(key: string) {
-  return localStorage.delete(key)
+  return localStorage.remove(key)
 }
 
 export const useListenLocalStorage = (key: string) =>

example/components/ActivityBanner/index.tsx

@@ -7,7 +7,7 @@ import Animated, {
   ZoomOut,
 } from 'react-native-reanimated'
 
-import { Color } from '@/constants/Colors'
+import { Color } from '@/constants/color'
 
 interface Props {
   backgroundColor?: Color
@@ -19,7 +19,7 @@ export const ActivityBanner: FunctionComponent<Props> = ({
   <Animated.View
     entering={FadeIn}
     exiting={FadeOut}
-    style={[StyleSheet.absoluteFill, styles.container, { backgroundColor }]}>
+    style={[styles.container, { backgroundColor }]}>
     <Animated.View
       entering={ZoomIn}
       exiting={ZoomOut}
@@ -31,6 +31,7 @@ export const ActivityBanner: FunctionComponent<Props> = ({
 
 const styles = StyleSheet.create({
   container: {
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
   },

example/components/Bullet/index.tsx

@@ -1,29 +1,22 @@
 import { FunctionComponent } from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
-import { ThemedView } from '@/components/ThemedView'
+import { ThemedText } from '@/components/ThemedText'
 
 interface Props {
+  body?: string
   header: string
-  text?: string
 }
 
-export const Bullet: FunctionComponent<Props> = ({ header, text }) => (
-  <ThemedView style={styles.container}>
-    <Text style={[styles.bold, styles.text]}>{header}</Text>
-    <Text style={styles.text}>{text}</Text>
-  </ThemedView>
+export const Bullet: FunctionComponent<Props> = ({ body, header }) => (
+  <View style={styles.container}>
+    <ThemedText type="subtitle">{header}</ThemedText>
+    <ThemedText type="default">{body}</ThemedText>
+  </View>
 )
 
 const styles = StyleSheet.create({
-  bold: {
-    fontWeight: 'bold',
-  },
   container: {
     gap: 4,
   },
-  text: {
-    color: 'black',
-    fontSize: 13,
-  },
 })

example/components/Button/index.tsx

@@ -1,27 +1,37 @@
 import { FunctionComponent } from 'react'
-import { PressableProps, StyleSheet, Text } from 'react-native'
+import { PressableProps, StyleSheet } from 'react-native'
 
 import { PressableOpacity } from '@/components/PressableOpacity'
+import { ThemedText } from '@/components/ThemedText'
+import { Color } from '@/constants/color'
+import { useThemeColor } from '@/hooks/useThemeColor'
 
 interface Props extends PressableProps {
   text?: string
 }
 
-export const Button: FunctionComponent<Props> = ({ onPress, text }) => (
-  <PressableOpacity onPress={onPress} style={styles.container}>
-    <Text style={styles.text}>{text}</Text>
-  </PressableOpacity>
-)
+export const Button: FunctionComponent<Props> = ({ onPress, text }) => {
+  const backgroundColor = useThemeColor({}, 'text')
+
+  return (
+    <PressableOpacity
+      onPress={onPress}
+      style={[styles.container, { backgroundColor }]}>
+      <ThemedText
+        darkColor={Color.Black}
+        lightColor={Color.White}
+        type="default">
+        {text}
+      </ThemedText>
+    </PressableOpacity>
+  )
+}
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: 'black',
+    alignItems: 'center',
     borderRadius: 16,
+    justifyContent: 'center',
     padding: 12,
   },
-  text: {
-    color: 'white',
-    fontSize: 13,
-    fontWeight: 'bold',
-  },
 })

example/components/LineButton/index.tsx

@@ -4,7 +4,7 @@ import { Image, StyleSheet, Text } from 'react-native'
 import Line from '@/assets/images/line.png'
 import { PressableOpacity } from '@/components/PressableOpacity'
 import { VerticalDivider } from '@/components/VerticalDivider'
-import { Color } from '@/constants/Colors'
+import { Color } from '@/constants/color'
 
 interface Props {
   disabled?: boolean

example/components/Spinner/index.tsx

@@ -1,6 +1,6 @@
 import { ActivityIndicator, ActivityIndicatorProps } from 'react-native'
 
-import { Color } from '@/constants/Colors'
+import { Color } from '@/constants/color'
 
 export function Spinner(props: ActivityIndicatorProps) {
   return <ActivityIndicator color={Color.Green} {...props} />

example/components/ThemedText.tsx example/components/ThemedText/index.tsxexample/components/ThemedText.tsx renamed to example/components/ThemedText/index.tsx

@@ -9,13 +9,14 @@ export type ThemedTextProps = TextProps & {
 }
 
 export function ThemedText({
-  style,
-  lightColor,
   darkColor,
+  lightColor,
+  style,
   type = 'default',
   ...rest
 }: ThemedTextProps) {
   const color = useThemeColor({ dark: darkColor, light: lightColor }, 'text')
+  const link = useThemeColor({ dark: darkColor, light: lightColor }, 'link')
 
   return (
     <Text
@@ -25,7 +26,7 @@ export function ThemedText({
         type === 'title' ? styles.title : undefined,
         type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
         type === 'subtitle' ? styles.subtitle : undefined,
-        type === 'link' ? styles.link : undefined,
+        type === 'link' ? [styles.link, { color: link }] : undefined,
         style,
       ]}
       {...rest}
@@ -35,25 +36,24 @@ export function ThemedText({
 
 const styles = StyleSheet.create({
   default: {
-    fontSize: 16,
+    fontSize: 14,
     lineHeight: 24,
   },
   defaultSemiBold: {
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: '600',
     lineHeight: 24,
   },
   link: {
-    color: '#0A7EA4',
-    fontSize: 16,
+    fontSize: 14,
     lineHeight: 30,
   },
   subtitle: {
-    fontSize: 20,
+    fontSize: 16,
     fontWeight: 'bold',
   },
   title: {
-    fontSize: 24,
+    fontSize: 18,
     fontWeight: 'bold',
     lineHeight: 32,
   },