How to set text color through function in react native to fit the UI requirement?

Question

I'm currently developing an app wherein I want to set the text color as per the UI's requirement. I want to send the color via a function in fontStyles.jsb ecause for different places in the app, different colors will be used. Here's my fontStyles.js code:

import {
  StyleSheet,
} from 'react-native';
import fonts from './fonts';

export default styles = StyleSheet.create({
    heading1: {
      fontFamily:fonts.Montserrat,  
      fontWeight: 700,
      size: 20,
    },
    heading2: {
      fontFamily:fonts.Montserrat,  
      fontWeight: 700,
      size: 18,
    },
    heading3: {
        fontFamily:fonts.Montserrat,  
        fontWeight: 700,
        size: 16,
    },
    text1: {
        fontFamily:fonts.Montserrat,  
        fontWeight: 500,
        size: 15,
    },
    text2: {
        fontFamily:fonts.Montserrat,  
        fontWeight: 500,
        size: 14,
    },
    text3: {
        fontFamily:fonts.Montserrat,  
        fontWeight: 500,
        size: 13,
    },
    text4: {
        fontFamily:fonts.Montserrat,  
        fontWeight: 500,
        size: 12,
    },
});

Here is my code for colors.js

export default {
  appBackground: '#FBFBFF',
  primary: '#F858A5',
  secondary: '#FEBBDB',
  accent: '#FFE5F2',
  black: '#000000',
  black1: '#0D0D0D',
  black2: '#1A1A1A',
  white: '#FFFFFF',
  white98: '#FAFAFA',
  white96: '#F5F5F5',
  secondaryButtons: '#8FC8E3',
  navBarInactive: '##D7EAF3',
  HeadingText: '##9A9A9A',
};

Now, I want to send the text color from here:

<Text style={fontStyles.text3}>{LoginPage.policy}</Text>

What are the changes that I'll need to make?

Answer 1

First import color

import colors from './colors';

then use an array to add it to the styles. the array is used to apply multiple styles in the same component

<Text style={[fontStyles.text3,{ color: colors. primary }]}>{LoginPage.policy}</Text>