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

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
좀더 정확히 판단을 위하여 제가 커밋한 레포 남겨드립니다!!!