title: Undefined is not an object (evaluating 's.colors.red')
body: <p>I'm new at react-native and try to build an app. When I run my code I'm getting this error:
  <a href="https://i.stack.imgur.com/FGCwO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FGCwO.jpg" alt="enter image description here" /></a></p>
  <p>Also colors code is here..........................................................................................................................................................</p>
  <pre><code>const NAMED_COLORS = {
    white: '#FFFFFF',
    grey: '#e5e5e5',
    gray_10: '#9f9f9f',
    black: '#2a2a2a',
    black_10: '#030303',
  
    red: '#cf2026',
    blue: '#3b5998',
    orange: '#ff9a00',
  };
  
  const THEME_COLORS = {
    ...NAMED_COLORS,
  
    text: NAMED_COLORS.black,
  };
  
  function colorWithAlpha(name: string = 'blue', opacity: number = 1) {
    if (!THEME_COLORS[name]) {
      name = 'blue';
    }
  
    return THEME_COLORS[name].split(', 1)').join(`, ${opacity})`);
  }
  
  export default {
    ...THEME_COLORS,
    colorWithAlpha,
  };
  </code></pre>
  <p>The code I use 'color.red':</p>
  <pre><code>import React, { PureComponent } from 'react';
  import { StyleSheet, View, Image } from 'react-native';
  
  import TabBarItem from '../../components/TabBarItem/TabBarItem';
  import { SearchIcon, VisionIcon, FashTagIcon } from '../../components/Icons/Icons';
  
  import { DUYGU_PROFILE } from '../../constants/imagesCostants';
  import { TABS } from '../../constants/navigationContants';
  import { colors } from '../../theme/colors';
  import { isIphoneX } from '../../utils/isIphoneX';
  
  function ProfileIcon() {
    return (
      &lt;View style={styles.avatarWrapper}&gt;
        &lt;Image source={DUYGU_PROFILE} style={styles.avatar} /&gt;
      &lt;/View&gt;
    );
  }
  
  const TABBAR_ICONS = {
    [TABS.HOME]: FashTagIcon,
    [TABS.BLOG]: VisionIcon,
    [TABS.GET_PAID]: VisionIcon,
    [TABS.SEARCH]: SearchIcon,
    [TABS.PROFILE]: ProfileIcon,
  };
  
  class MainTabBar extends PureComponent {
    render() {
      const { navigation } = this.props;
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;View&gt;
            &lt;View style={styles.wrapper}&gt;
              {navigation.state.routes.map((tab, index) =&gt; {
                const tabName = tab.routeName;
                const active = navigation.state.index === index;
                const IconComponent = TABBAR_ICONS[tabName];
  
                return (
                  &lt;TabBarItem
                    active={active}
                    key={tab.key}
                    tabName={tabName}
                    titleId={tabName}
                    icon={
                      &lt;IconComponent
                        width={30}
                        height={30}
                        color={active ? colors.red : colors.gray_10}
                      /&gt;
                    }
                    onNavigate={() =&gt; navigation.navigate(tabName)}
                    navigation={navigation}
                  /&gt;
                );
              })}
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default MainTabBar;
  
  const styles = StyleSheet.create({
    container: {
      bottom: isIphoneX ? 50 : 30,
      position: 'absolute',
      width: '100%',
      zIndex: 999,
      height: 50,
    },
    wrapper: {
      flexDirection: 'row',
      height: 50,
      backgroundColor: colors.white,
      borderRadius: 10,
      alignItems: 'center',
      marginHorizontal: 10,
      zIndex: 9,
      shadowColor: colors.gray_10,
      shadowOffset: {
        width: 0,
        height: 45,
      },
      shadowOpacity: 0.7,
      shadowRadius: 16.0,
  
      elevation: 24,
    },
    avatarWrapper: {
      alignItems: 'center',
    },
    avatar: {
      width: 40,
      height: 40,
      borderRadius: 30,
      borderWidth: 2,
      borderColor: '#ccc',
    },
  });
  </code></pre>
  <p>What should I do?</p>