인프런 커뮤니티 질문&답변

김용민님의 프로필 이미지
김용민

작성한 질문수

맛집 지도앱 만들기 (React Native + NestJS)

[8-8] 앱 아이콘 적용하기

colors[theme]을 못읽는 이유

해결된 질문

작성

·

210

·

수정됨

0

import React, {ReactNode} from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  PressableProps,
  Dimensions,
  View,
  StyleProp,
  ViewStyle,
  TextStyle,
} from 'react-native';
import {colors} from '../../constants';
import useThemeStore from '@/store/useThemeStore';
import {ThemeMode} from '@/types/common';

interface CustomButtonProps extends PressableProps {
  label: string;
  variant?: 'filled' | 'outlined';
  size?: 'large' | 'medium';
  inValid?: boolean;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  icon?: ReactNode;
}

const deviceHeight = Dimensions.get('screen').height;

function CustomButton({
  label,
  variant = 'filled',
  size = 'large',
  inValid = false,
  style = null,
  textStyle = null,
  icon = null,
  ...props
}: CustomButtonProps) {
  const {theme} = useThemeStore();
  const styles = styling(theme);

  // 여기서는 제대로 출력이 됩니다. 값이 제대로 읽힙니다.
  console.log(colors[theme].PINK_700);
  return (
    <Pressable
      disabled={inValid}
      style={({pressed}) => [
        styles.container,
        pressed ? styles[`${variant}Pressed`] : styles[variant],
        inValid && styles.inValid,
        style,
      ]}
      {...props}>
      <View style={styles[size]}>
        {icon}
        <Text style={[styles.text, styles[`${variant}Text`], textStyle]}>
          {label}
        </Text>
      </View>
    </Pressable>
  );
}

const styling = (theme: ThemeMode) =>
  StyleSheet.create({
    container: {
      borderRadius: 3,
      justifyContent: 'center',
      flexDirection: 'row',
    },
    inValid: {
      opacity: 0.5,
    },
    filled: {
      backgroundColor: colors[theme].PINK_700,
    },
    outlined: {
      borderColor: colors[theme].PINK_700,
      borderWidth: 1,
    },
    filledPressed: {
      backgroundColor: colors[theme].PINK_500,
    },
    outlinedPressed: {
      borderColor: colors[theme].PINK_700,
      borderWidth: 1,
      opacity: 0.5,
    },
    large: {
      width: '100%',
      paddingVertical: deviceHeight > 700 ? 15 : 10,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
      gap: 5,
    },
    medium: {
      width: '50%',
      paddingVertical: deviceHeight > 700 ? 12 : 8,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
      gap: 5,
    },
    text: {
      fontSize: 16,
      fontWeight: '700',
    },
    filledText: {
      color: colors[theme].WHITE,
    },
    outlinedText: {
      color: colors[theme].PINK_700,
    },
  });

export default CustomButton;

console.log(colors[theme].PINK_700); 이렇게 출력할 경우, 제대로 아래와 같이 출력이 됩니다만 스타일은 제대로 읽어오지 않습니다. 이 부분에 대해서 알고 싶습니다.

 BUNDLE  ./index.js 

 LOG  Running "MatzipApp" with {"rootTag":171,"initialProps":{"concurrentRoot":false}}
 LOG  light
 LOG  #C63B64
 LOG  #C63B64
 LOG  #C63B64
 ERROR  TypeError: Cannot read property 'PINK_700' of undefined

This error is located at:
    in CustomButton (created by ErrorBoundary)
    in RCTView (created by View)
    in View (created by ErrorBoundary)
    in ErrorBoundary (created by RetryErrorBoundary)
    in RetryErrorBoundary (created by RootNavigator)
    in RootNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in _QueryClientProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MatzipApp(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'WHITE' of undefined

This error is located at:
    in RetryErrorBoundary (created by RootNavigator)
    in RootNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in _QueryClientProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MatzipApp(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'WHITE' of undefined

This error is located at:
    in RetryErrorBoundary (created by RootNavigator)
    in RootNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in _QueryClientProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MatzipApp(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'WHITE' of undefined


https://github.com/dydals3440/MatZip
좀더 정확히 판단을 위하여 제가 커밋한 레포 남겨드립니다!!!

답변 2

0

김용민님의 프로필 이미지
김용민
질문자

동일하게 에러가 발생합니다!!

0

Kyo님의 프로필 이미지
Kyo
지식공유자

앱삭제하고 캐시도 지우고 실행해보시겠어요?

npx react-native start --reset-cache

김용민님의 프로필 이미지
김용민

작성한 질문수

질문하기