title: Why is my React Native Component not responding to props?
body: <p>I am working on a React Native App that uses a custom text component, that is designed to pass take a font and color prop and then use the props to then render text in one of the five fonts or three font colors used in the project. However, the component I've built does not seem to respond to font or color fonts that I pass in. My component is currently the following:</p>
  <pre><code>import React from 'react'
  
  import {
      Text,
  } from 'react-native'
  
  const defaultFont = { fontFamily: 'Scto Grotesk A Regular' }
  
  const fonts = {
      &quot;Recoleta Regular&quot;:{
          fontFamily: 'Recoleta Regular'
      },
      &quot;Recoleta SemiBold&quot;:{
          fontFamily: 'Recoleta SemiBold'
      },
      &quot;Scto Grotesk A Bold&quot;:{
          fontFamily: 'Scto Grotesk A Bold'
      },
      &quot;Scto Grotesk A Medium&quot;:{
          fontFamily: 'Scto Grotesk A Medium'
      },
      &quot;Scto Grotesk A Regular&quot;:{
          fontFamily: 'Scto Grotesk A Regular'
      },
      }
      
      const colors = {
          white:{
          color:'#ffffff'
          },
          'dark green':{
              color:'#1a3c34'
          },
          gray:{
              color: '#647632'
          }
      }
  
  const AppText = ({ style, font, color, ...props }) =&gt; {
      
      let textFont = {}
      switch(font){
          case 'Recoleta Regular':
              textFont= fonts['Recoleta Regular']
              break;
          case &quot;Recoleta SemiBold&quot;:
              textFont= fonts['Recoleta SemiBold']
              break;
          case &quot;Scto Grotesk A Bold&quot;:
              textFont= fonts['Scto Grotesk A Bold']
              break;
          case &quot;Scto Grotesk A Medium&quot;:
              textFont= fonts['Scto Grotesk A Medium']
              break;
          case &quot;Scto Grotesk A Regular&quot;:
              textFont= fonts['Scto Grotesk A Regular']
              break;
          default:
              textFont= fonts['Scto Grotesk A Regular']
              break;
      }   
  
      let textColor = {}
  switch(props.color){
      case 'white':
      textColor = colors['white']
      break;
      case 'dark green':
          textColor = colors['dark green']
          break;
      case 'gray':
          textColor= colors.gray
          break;
      default:
          textColor = colors['dark green']
          break;
  }
      
      
      return(
      &lt;Text
          style={[textFont, textColor, style]} {...props}
      /&gt;
      )
  }
  
  export default AppText
  </code></pre>
  <p>Currently if I call this component with something like ...</p>
  <pre><code>import { Spacer, Button, DriverSummaryRow, TripSummaryRow, Text } from '../
  ...
  &lt;Text color='white' font=&quot;Recoleta SemiBold&quot;&gt;Test&lt;/Text&gt;
  </code></pre>
  <p>... I will get the text component, but it will not respond to color or font props that I pass into it. What am I doing wrong?</p>