feat: add dark mode theme

2024-11-23 23:01:00 +01:00 · 2023-02-08 00:06:05 +09:00 · 2023-02-08 00:06:05 +09:00 · 03af6b4b2c
commit 03af6b4b2c
parent 379c9ea5c9
10 changed files with 451 additions and 253 deletions
--- a/App.tsx
+++ b/App.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';

 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@ -7,6 +7,11 @@ import MainScreen from './src/screens/MainScreen';
 import { Card } from './src/types';
 import CardEditScreen from './src/screens/CardEditScreen';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { StatusBar, useColorScheme } from 'react-native';
+import { ThemeProvider } from 'styled-components/native';
+
+import LightTheme from './src/themes/lightTheme';
+import DarkTheme from './src/themes/darkTheme';

 export type RootStackParams = {
  Main: undefined;
@ -18,39 +23,53 @@ const queryClient = new QueryClient();
 const Stack = createNativeStackNavigator<RootStackParams>();

 const App = () => {
+  const colorScheme = useColorScheme();
+  const theme = useMemo(
+    () => (colorScheme === 'dark' ? DarkTheme : LightTheme),
+    [colorScheme],
+  );
+
  return (
    <QueryClientProvider client={queryClient}>
-      <NavigationContainer>
-        <Stack.Navigator
-          screenOptions={{
-            headerStyle: {
-              backgroundColor: '#fff',
-            },
-            headerTintColor: '#000',
-            headerTitleStyle: {
-              fontWeight: 'bold',
-            },
-          }}
-        >
-          <Stack.Screen
-            name={'Main'}
-            component={MainScreen}
-            options={{
-              title: '홈',
+      <ThemeProvider theme={theme}>
+        <NavigationContainer>
+          <StatusBar
+            backgroundColor={'transparent'}
+            barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
+            translucent
+          />
+          <Stack.Navigator
+            screenOptions={{
+              headerStyle: {
+                backgroundColor: theme.colors.header,
+              },
+              headerTintColor: theme.colors.text,
+              headerTitleStyle: {
+                color: theme.colors.text,
+                fontWeight: 'bold',
+              },
            }}
-          />
-          <Stack.Screen
-            name={'Add'}
-            component={CardEditScreen}
-            options={{ title: '카드 추가' }}
-          />
-          <Stack.Screen
-            name={'Edit'}
-            component={CardEditScreen}
-            options={{ title: '카드 편집' }}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
+          >
+            <Stack.Screen
+              name={'Main'}
+              component={MainScreen}
+              options={{
+                title: '홈',
+              }}
+            />
+            <Stack.Screen
+              name={'Add'}
+              component={CardEditScreen}
+              options={{ title: '카드 추가' }}
+            />
+            <Stack.Screen
+              name={'Edit'}
+              component={CardEditScreen}
+              options={{ title: '카드 편집' }}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </ThemeProvider>
    </QueryClientProvider>
  );
 };
--- a/package.json
+++ b/package.json
@ -21,7 +21,8 @@
    "react-native-shadow-2": "^7.0.6",
    "react-native-svg": "^13.8.0",
    "react-native-vector-icons": "^9.2.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "styled-components": "^5.3.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
@ -33,6 +34,8 @@
    "@types/react": "^18.0.24",
    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@types/styled-components-react-native": "^5.2.1",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@ -1,9 +1,10 @@
 import React, { useMemo, useCallback } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TextProps, TouchableOpacity, View } from 'react-native';
 import { useQuery } from 'react-query';
 import { Shadow } from 'react-native-shadow-2';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import Clipboard from '@react-native-clipboard/clipboard';
+import styled from 'styled-components/native';

 import CardConv from '../modules/CardConv';
 import { Card } from '../types';
@ -19,6 +20,46 @@ interface CardViewProps {
  onDelete?: (index: number) => unknown;
 }

+const Background = styled.View`
+  flex: 1;
+  border-radius: 8px;
+  justify-content: center;
+  background-color: ${props => props.theme.colors.primary};
+`;
+
+const CardName = styled.Text.attrs<TextProps>({
+  numberOfLines: 1,
+  ellipsizeMode: 'tail',
+})`
+  font-size: 16px;
+  font-weight: bold;
+  color: ${props => props.theme.colors.white};
+`;
+
+const CardNumber = styled.Text`
+  color: ${props => props.theme.colors.gray200};
+  font-size: 14px;
+`;
+
+const CopyIcon = styled(FontAwesome5).attrs({ name: 'copy' })`
+  color: ${props => props.theme.colors.gray200};
+  font-size: 10px;
+  padding-left: 4px;
+`;
+
+const ActivateButtonText = styled.Text`
+  text-align: center;
+  align-self: center;
+  font-size: 24px;
+  font-weight: 500;
+  color: ${props => props.theme.colors.white};
+`;
+
+const BottomButtonText = styled.Text`
+  font-size: 14px;
+  color: ${props => props.theme.colors.white};
+`;
+
 const CardView = (props: CardViewProps) => {
  const { card, index, onPress: onPressFromProps, onEdit, onDelete } = props;

@ -61,7 +102,7 @@ const CardView = (props: CardViewProps) => {
        distance={4}
        offset={[0, 2]}
      >
-        <View style={styles.background}>
+        <Background>
          <TouchableOpacity
            style={styles.activateButton}
            onPress={onPress}
@ -69,24 +110,15 @@ const CardView = (props: CardViewProps) => {
          >
            <View style={styles.topLeftArea}>
              <TouchableOpacity onPress={copyUid}>
-                <Text
-                  style={styles.cardNameText}
-                  numberOfLines={1}
-                  ellipsizeMode={'tail'}
-                >
-                  {card.name}
-                </Text>
+                <CardName>{card.name}</CardName>
                <View style={styles.cardNumberContainer}>
-                  <Text style={styles.cardNumberText}>{styledUid}</Text>
-                  <FontAwesome5
-                    name={'copy'}
-                    style={[styles.cardNumberCopyIcon]}
-                  />
+                  <CardNumber>{styledUid}</CardNumber>
+                  <CopyIcon />
                </View>
              </TouchableOpacity>
            </View>

-            <Text style={styles.enableText}>{props.mainText}</Text>
+            <ActivateButtonText>{props.mainText}</ActivateButtonText>

            {props.hideBottomMenu !== true && (
              <View style={styles.bottomMenuContainer}>
@ -94,18 +126,18 @@ const CardView = (props: CardViewProps) => {
                  style={styles.bottomMenuButton}
                  onPress={onPressEdit}
                >
-                  <Text style={styles.bottomMenuButtonText}>편집</Text>
+                  <BottomButtonText>편집</BottomButtonText>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.bottomMenuButton}
                  onPress={onPressDelete}
                >
-                  <Text style={styles.bottomMenuButtonText}>삭제</Text>
+                  <BottomButtonText>삭제</BottomButtonText>
                </TouchableOpacity>
              </View>
            )}
          </TouchableOpacity>
-        </View>
+        </Background>
      </Shadow>
    </>
  );
@ -120,18 +152,11 @@ const styles = StyleSheet.create({
    flex: 1,
    alignSelf: 'stretch',
  },
-  background: {
-    flex: 1,
-    borderRadius: 8,
-    justifyContent: 'center',
-    resizeMode: 'contain',
-    backgroundColor: 'skyblue',
-  },
  activateButton: {
    flex: 1,
    justifyContent: 'center',
    borderRadius: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
  },
  topLeftArea: {
    position: 'absolute',
@ -141,33 +166,10 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
-  cardNameText: {
-    padding: 0,
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#ffffff',
-  },
  cardNumberContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
-  cardNumberText: {
-    alignSelf: 'center',
-    color: '#f1f1f1',
-    fontSize: 14,
-  },
-  cardNumberCopyIcon: {
-    color: '#f1f1f1',
-    fontSize: 10,
-    paddingLeft: 4,
-  },
-  enableText: {
-    textAlign: 'center',
-    alignSelf: 'center',
-    fontSize: 24,
-    color: '#FAFAFA',
-    fontWeight: '500',
-  },
  bottomMenuContainer: {
    position: 'absolute',
    left: 0,
@ -181,10 +183,6 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
  },
-  bottomMenuButtonText: {
-    fontSize: 14,
-    color: '#FAFAFA',
-  },
 });

 export default CardView;
--- a/src/screens/CardEditScreen.tsx
+++ b/src/screens/CardEditScreen.tsx
@ -3,23 +3,22 @@ import {
  View,
  Text,
  ScrollView,
-  TouchableOpacity,
  StyleSheet,
-  KeyboardAvoidingView,
-  TextInput,
  TextInputProps,
  ViewStyle,
  TextInputFocusEventData,
  NativeSyntheticEvent,
-  TextStyle,
+  TouchableOpacityProps,
 } from 'react-native';
-import CardConv from '../modules/CardConv';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { RootStackParams } from '../../App';
 import { Shadow } from 'react-native-shadow-2';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import styled from 'styled-components/native';
+
+import CardConv from '../modules/CardConv';
+import { RootStackParams } from '../../App';
 import CardView from '../components/Card';
 import { addCard, updateCard } from '../data/cards';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { Card } from '../types';

 type TextFieldProps = TextInputProps & {
@ -38,9 +37,69 @@ const generateRandomCardNumber = () => {
  return `02FE${getRandom4Byte()}${getRandom4Byte()}${getRandom4Byte()}`;
 };

-const FieldTitle = (props: { title: string; style?: TextStyle }) => {
+const Container = styled.KeyboardAvoidingView`
+  flex: 1;
+  background-color: ${props => props.theme.colors.background};
+`;
+
+const FieldTitle = styled(Text)<{ focused: boolean }>`
+  font-size: 14px;
+  font-weight: bold;
+  color: ${props =>
+    props.focused
+      ? props.theme.colors.primary
+      : props.theme.colors.placeholder};
+`;
+
+const FieldBottomBorder = styled.View<{ focused: boolean }>`
+  padding-top: 2px;
+  background-color: ${props =>
+    props.focused
+      ? props.theme.colors.primary
+      : props.theme.colors.placeholder};
+  height: ${props => (props.focused ? 2 : 1)}px;
+`;
+
+const StyledTextInput = styled.TextInput`
+  font-size: 16px;
+  padding-top: 4px;
+  color: ${props =>
+    props.editable !== false
+      ? props.theme.colors.text
+      : props.theme.colors.disabled};
+`;
+
+const ButtonContainer = styled.TouchableOpacity`
+  height: 48px;
+  background-color: ${props => props.theme.colors.primary};
+  justify-content: center;
+  align-items: center;
+`;
+
+const ButtonText = styled.Text`
+  font-size: 16px;
+  color: ${props => props.theme.colors.white};
+`;
+
+type ButtonProps = {
+  text: string;
+  containerStyle: ViewStyle;
+} & TouchableOpacityProps;
+
+const Button = (props: ButtonProps) => {
+  const { text, containerStyle, ...touchableProps } = props;
+
  return (
-    <Text style={[styles.textInputTitle, props.style]}>{props.title}</Text>
+    <Shadow
+      style={styles.buttonShadowStyle}
+      containerStyle={containerStyle}
+      distance={4}
+    >
+      {/* shadow가 정상적으로 적용되지 않는 버그가 있어서 borderRadius 스타일을 분리 */}
+      <ButtonContainer {...touchableProps} style={styles.buttonBorderRadius}>
+        <ButtonText>{text}</ButtonText>
+      </ButtonContainer>
+    </Shadow>
  );
 };

@ -66,25 +125,13 @@ const TextField = (props: TextFieldProps) => {

  return (
    <View style={containerStyle}>
-      <FieldTitle
-        title={title}
-        style={isFocused ? styles.textInputTitleFocused : {}}
-      />
-      <TextInput
-        style={[
-          styles.textInput,
-          textInputProps.editable === false ? styles.textInputDisabled : {},
-        ]}
+      <FieldTitle focused={isFocused}>{title}</FieldTitle>
+      <StyledTextInput
        onFocus={onFocusCallback}
        onBlur={onBlurCallback}
        {...textInputProps}
      />
-      <View
-        style={[
-          styles.textInputBottomBorder,
-          isFocused ? styles.textInputBottomBorderFocused : {},
-        ]}
-      />
+      <FieldBottomBorder focused={isFocused} />
    </View>
  );
 };
@ -171,25 +218,23 @@ const CardEditScreen = (props: CardAddScreenProps | CardEditScreenProps) => {
  ]);

  return (
-    <KeyboardAvoidingView style={styles.screen}>
+    <Container>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        keyboardShouldPersistTaps="handled"
      >
-        <View style={styles.cardPreviewContainer}>
-          <CardView
-            card={{
-              sid: cardNumber,
-              name: cardName,
-            }}
-            mainText={'카드 미리보기'}
-            index={0 /* dummy index */}
-            disabledMainButton={true}
-            hideBottomMenu={true}
-          />
-        </View>
+        <CardView
+          card={{
+            sid: cardNumber,
+            name: cardName,
+          }}
+          mainText={'카드 미리보기'}
+          index={0 /* dummy index */}
+          disabledMainButton={true}
+          hideBottomMenu={true}
+        />

-        <View style={[styles.fieldItemContainer, { paddingTop: 0 }]}>
+        <View style={[styles.fieldItemContainer]}>
          <TextField
            title={'카드 이름'}
            value={cardName}
@ -199,35 +244,21 @@ const CardEditScreen = (props: CardAddScreenProps | CardEditScreenProps) => {

        <View style={styles.fieldItemContainer}>
          <TextField title={'카드 번호'} value={styledUid} editable={false} />
-          <Shadow
-            style={styles.buttonShadowStyle}
+          <Button
            containerStyle={styles.cardNumberChangeButton}
-            distance={4}
-          >
-            <TouchableOpacity
-              style={[styles.button]}
-              onPress={changeCardNumber}
-              disabled={!uid.isSuccess}
-            >
-              <Text style={styles.buttonText}>카드 번호 변경</Text>
-            </TouchableOpacity>
-          </Shadow>
+            onPress={changeCardNumber}
+            disabled={!uid.isSuccess}
+            text={'카드 번호 변경'}
+          />
        </View>

-        <Shadow
-          style={styles.buttonShadowStyle}
-          containerStyle={[
-            styles.cardNumberChangeButton,
-            styles.saveButtonContainerStyle,
-          ]}
-          distance={4}
-        >
-          <TouchableOpacity style={[styles.button]} onPress={save}>
-            <Text style={styles.buttonText}>저장</Text>
-          </TouchableOpacity>
-        </Shadow>
+        <Button
+          onPress={save}
+          containerStyle={styles.saveButton}
+          text={'저장'}
+        />
      </ScrollView>
-    </KeyboardAvoidingView>
+    </Container>
  );
 };

@ -238,59 +269,21 @@ const styles = StyleSheet.create({
  scrollView: {
    padding: 16,
  },
-  cardPreviewContainer: {
-    paddingBottom: 32,
-  },
  fieldItemContainer: {
-    paddingTop: 24,
-  },
-  textInput: {
-    fontSize: 16,
-    paddingTop: 4,
-    color: 'black',
-  },
-  textInputDisabled: {
-    color: 'rgba(0, 0, 0, 0.5)',
-  },
-  textInputTitle: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    color: '#9e9e9e',
-  },
-  textInputTitleFocused: {
-    color: 'skyblue',
-  },
-  textInputBottomBorder: {
-    paddingTop: 2,
-    backgroundColor: '#9e9e9e',
-    height: 1,
-  },
-  textInputBottomBorderFocused: {
-    backgroundColor: 'skyblue',
-    height: 2,
-  },
-  button: {
-    height: 48,
-    borderRadius: 8,
-    backgroundColor: 'skyblue',
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingTop: 32,
  },
  buttonShadowStyle: {
    width: '100%',
  },
-  saveButtonContainerStyle: {
+  buttonBorderRadius: {
+    borderRadius: 8,
+  },
+  saveButton: {
    marginTop: 32,
  },
  cardNumberChangeButton: {
    marginTop: 16,
  },
-  cardImageSelectButton: {
-    marginTop: 8,
-  },
-  buttonText: {
-    color: 'white',
-  },
 });

 export default CardEditScreen;
--- a/src/screens/MainScreen.tsx
+++ b/src/screens/MainScreen.tsx
@ -1,9 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import {
  View,
-  Text,
-  StatusBar,
-  TouchableOpacity,
  Alert,
  StyleSheet,
  FlatList,
@ -16,15 +13,43 @@ import {
  NativeStackNavigationProp,
  NativeStackScreenProps,
 } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
+import styled from 'styled-components/native';

 import Hcef from '../modules/Hcef';
 import CardView from '../components/Card';
 import { Card } from '../types';
 import { getCards, removeCard } from '../data/cards';
 import { RootStackParams } from '../../App';
-import { useNavigation } from '@react-navigation/native';

-const ListSeparator = () => <View style={styles.separator} />;
+const Container = styled(View)`
+  flex: 1;
+  background-color: ${props => props.theme.colors.background};
+  justify-content: center;
+  align-items: center;
+`;
+
+const PlaceholderText = styled.Text`
+  font-size: 14px;
+  color: ${props => props.theme.colors.placeholder};
+`;
+
+const AddButton = styled.TouchableOpacity`
+  background-color: ${props => props.theme.colors.card};
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+`;
+
+const AddButtonIcon = styled(FontAwesome5).attrs({ name: 'plus' })`
+  color: ${props => props.theme.colors.primary};
+  font-size: 24px;
+`;
+
+const ListSeparator = styled.View`
+  height: 16px;
+`;

 const CardList = (props: { cards: Card[] }) => {
  const navigation =
@ -85,6 +110,7 @@ const CardList = (props: { cards: Card[] }) => {
  if (cards.length > 0) {
    return (
      <FlatList
+        style={styles.cardList}
        data={cards}
        contentContainerStyle={styles.cardListContainer}
        renderItem={card => (
@ -109,26 +135,12 @@ const CardList = (props: { cards: Card[] }) => {
  } else {
    return (
      <View style={styles.placeholderContainer}>
-        <Text style={styles.placeholderText}>카드를 추가해 주세요.</Text>
+        <PlaceholderText>카드를 추가해 주세요.</PlaceholderText>
      </View>
    );
  }
 };

-const AddButton = (props: { onPress?: () => unknown }) => {
-  return (
-    <Shadow
-      containerStyle={styles.addButtonContainer}
-      distance={4}
-      offset={[0, 2]}
-    >
-      <TouchableOpacity style={styles.addButton} onPress={props.onPress}>
-        <FontAwesome5 name={'plus'} style={styles.addButtonIcon} />
-      </TouchableOpacity>
-    </Shadow>
-  );
-};
-
 type MainScreenProps = NativeStackScreenProps<RootStackParams, 'Main'>;

 const MainScreen = (props: MainScreenProps) => {
@ -173,62 +185,48 @@ const MainScreen = (props: MainScreenProps) => {
  }, [navigation]);

  return (
-    <View style={styles.container}>
-      <StatusBar
-        backgroundColor={'transparent'}
-        barStyle={'dark-content'}
-        translucent
-      />
+    <Container>
      {cardsQuery.isSuccess ? (
        <>
          <CardList cards={cardsQuery.data} />
-          <AddButton onPress={goToAdd} />
+
+          <Shadow
+            containerStyle={styles.addButtonContainer}
+            distance={4}
+            offset={[0, 2]}
+          >
+            {/* shadow가 정상적으로 적용되지 않는 버그가 있어서 borderRadius 스타일을 분리 */}
+            <AddButton onPress={goToAdd} style={styles.addButtonRadius}>
+              <AddButtonIcon />
+            </AddButton>
+          </Shadow>
        </>
      ) : (
        <View>
          <ActivityIndicator size={'large'} />
        </View>
      )}
-    </View>
+    </Container>
  );
 };

 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
-    alignItems: 'stretch',
+  cardList: {
+    alignSelf: 'stretch',
  },
  cardListContainer: {
    paddingHorizontal: 16,
  },
-  separator: {
-    height: 16,
-  },
  placeholderContainer: {
    alignItems: 'center',
  },
-  placeholderText: {
-    fontSize: 16,
-    color: '#9E9E9E',
-  },
  addButtonContainer: {
    position: 'absolute',
    right: 24,
    bottom: 24,
  },
-  addButton: {
-    width: 64,
-    height: 64,
+  addButtonRadius: {
    borderRadius: 64,
-    backgroundColor: '#f9f9f9',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  addButtonIcon: {
-    color: 'skyblue',
-    fontSize: 24,
  },
 });

--- a/src/themes/darkTheme.ts
+++ b/src/themes/darkTheme.ts
@ -0,0 +1,22 @@
+const DarkTheme = {
+  colors: {
+    primary: '#0277BD',
+    header: '#212121',
+    background: 'black',
+    card: '#323232',
+
+    text: 'white',
+    placeholder: '#bdbdbd',
+
+    black: 'black',
+    white: 'white',
+
+    gray50: '#FAFAFA',
+    gray100: '#F5F5F5',
+    gray200: '#EEEEEE',
+
+    disabled: 'rgba(255, 255, 255, 0.5)',
+  },
+};
+
+export default DarkTheme;
--- a/src/themes/lightTheme.ts
+++ b/src/themes/lightTheme.ts
@ -0,0 +1,22 @@
+const LightTheme = {
+  colors: {
+    primary: 'skyblue',
+    header: 'white',
+    background: '#f5f5f5',
+    card: '#fafafa',
+
+    text: 'black',
+    placeholder: '#9e9e9e',
+
+    black: 'black',
+    white: 'white',
+
+    gray50: '#FAFAFA',
+    gray100: '#F5F5F5',
+    gray200: '#EEEEEE',
+
+    disabled: 'rgba(0, 0, 0, 0.5)',
+  },
+};
+
+export default LightTheme;
--- a/src/themes/theme.d.ts
+++ b/src/themes/theme.d.ts
@ -0,0 +1,24 @@
+import 'styled-components/native';
+
+declare module 'styled-components/native' {
+  export interface DefaultTheme {
+    colors: {
+      primary: string;
+      header: string;
+      background: string;
+      card: string;
+
+      text: string;
+      placeholder: string;
+
+      black: string;
+      white: string;
+
+      gray50: string;
+      gray100: string;
+      gray200: string;
+
+      disabled: string;
+    };
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,6 @@
 {
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "types": ["@types/styled-components-react-native"]
+  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -78,7 +78,7 @@
    lodash "^4.17.13"
    source-map "^0.5.0"

-"@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@ -255,7 +255,7 @@
  dependencies:
    "@babel/types" "^7.8.3"

-"@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@ -1468,7 +1468,7 @@
    "@babel/parser" "^7.20.7"
    "@babel/types" "^7.20.7"

-"@babel/traverse@^7.20.0", "@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.13", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4":
+"@babel/traverse@^7.20.0", "@babel/traverse@^7.20.10", "@babel/traverse@^7.20.12", "@babel/traverse@^7.20.13", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4":
  version "7.20.13"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.13.tgz#817c1ba13d11accca89478bd5481b2d168d07473"
  integrity sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==
@ -1522,6 +1522,28 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^1.4.1":
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
@ -2221,6 +2243,14 @@
  dependencies:
    "@types/node" "*"

+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@ -2319,6 +2349,24 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==

+"@types/styled-components-react-native@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@types/styled-components-react-native/-/styled-components-react-native-5.2.1.tgz#08cba1f638c7a3a0b7017954d6e59baef36fb022"
+  integrity sha512-XI/SWDSLSe7IjZXA9jS0vv4WPpV2B+nQhefUqk00usNHxhErlzPtTGdhjMZgrH0uYz5R0hLLIandhmhDTLkKBg==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "^0.70"
+    "@types/styled-components" "*"
+
+"@types/styled-components@*", "@types/styled-components@^5.1.26":
+  version "5.1.26"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af"
+  integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/yargs-parser@*":
  version "15.0.0"
  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@ -2736,6 +2784,22 @@ babel-plugin-polyfill-regenerator@^0.4.1:
  dependencies:
    "@babel/helper-define-polyfill-provider" "^0.3.3"

+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
  version "7.0.0-beta.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@ -2984,6 +3048,11 @@ camelcase@^6.0.0, camelcase@^6.2.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==

+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-lite@^1.0.30001449:
  version "1.0.30001450"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz#022225b91200589196b814b51b1bbe45144cf74f"
@ -3270,6 +3339,11 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
    shebang-command "^2.0.0"
    which "^2.0.1"

+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-select@^5.1.0:
  version "5.1.0"
  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
@ -3281,6 +3355,15 @@ css-select@^5.1.0:
    domutils "^3.0.1"
    nth-check "^2.0.1"

+css-to-react-native@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.1.0.tgz#e783474149997608986afcff614405714a8fe1ac"
+  integrity sha512-AryfkFA29b4I3vG7N4kxFboq15DxwSXzhXM37XNEjwJMgjYIc8BcqfiprpAqX0zadI5PMByEIwAMzXxk5Vcc4g==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@ -4389,6 +4472,13 @@ hermes-profile-transformer@^0.0.6:
  dependencies:
    source-map "^0.7.3"

+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 html-escaper@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.0.tgz#71e87f931de3fe09e56661ab9a29aadec707b491"
@ -5466,16 +5556,16 @@ lodash.throttle@^4.1.1:
  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=

+lodash@^4.17.11, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 lodash@^4.17.13:
  version "4.17.15"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==

-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 log-symbols@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
@ -6423,7 +6513,7 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -6457,6 +6547,11 @@ posix-character-classes@^0.1.0:
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=

+postcss-value-parser@^4.0.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@ -6590,7 +6685,7 @@ react-freeze@^1.0.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

-react-is@^16.13.0, react-is@^16.13.1, react-is@^16.8.1:
+react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -7114,6 +7209,11 @@ shallow-clone@^3.0.0:
  dependencies:
    kind-of "^6.0.2"

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@ -7448,12 +7548,28 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

+styled-components@^5.3.6:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
+  integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 sudo-prompt@^9.0.0:
  version "9.1.1"
  resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.1.1.tgz#73853d729770392caec029e2470db9c221754db0"
  integrity sha512-es33J1g2HjMpyAhz8lOR+ICmXXAqTuKbuXuUWLhOLew20oN9oUCgCJx615U/v7aioZg7IX5lIh9x34vwneu4pA==

-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==