text color not applying after updating some packages

[bj97301]

Describe the bug I use a dark background on my toast messages and need the text to be white but it doesn't seem to be applying correctly after i updated my packages. I updated from node 16 to node 20. Not a whole lot else changed when the text colors started not updating besides the node version. Later i tried to update the toast version all the way up to the beta from this version: ^2.1.6. Every version has the same issue even before any updates to the toast package version(^2.1.6). I have now updated to expo 50 from 49 but still no luck. Has anyone else experienced this?

Steps to reproduce Steps to reproduce the behavior:

1. Update node from 16 to 20
2. Change text color to white in the config
3. see a toast

Expected behavior Text color should be white not dark.

Screenshots before: after:

Code sample

import * as theme from './theme'
import {ErrorToast, InfoToast, SuccessToast} from 'react-native-toast-message'

let toastConfigs = {
  success: props => (
    <SuccessToast
      text1Props={{allowFontScaling: false}}
      text2Props={{allowFontScaling: false}}
      className="mt-2 bg-gray-900"
      text1Style={{
        backgroundColor: '#111827',
        color: 'white',
      }}
      text2Style={{
        color: 'white',
      }}
      style={{borderLeftColor: '#22c55e'}}
      contentContainerStyle={{paddingHorizontal: 15}}
      {...props}
      text2NumberOfLines={0}></SuccessToast>
  ),
  error: props => (
    <ErrorToast
      text1Props={{allowFontScaling: false}}
      text2Props={{allowFontScaling: false}}
      className="mt-2 bg-gray-900"
      text1Style={{
        backgroundColor: '#111827',
        color: 'white',
      }}
      text2Style={{
        color: 'white',
      }}
      style={{borderLeftColor: '#ef4444'}}
      {...props}
      contentContainerStyle={{outerWidth: '100'}}
      text2NumberOfLines={0}></ErrorToast>
  ),
  info: props => (
    <InfoToast
      text1Props={{allowFontScaling: false}}
      text2Props={{allowFontScaling: false}}
      className="mt-2 bg-gray-900"
      text1Style={{
        backgroundColor: '#111827',
        color: 'white',
      }}
      text2Style={{
        color: 'white',
      }}
      style={{borderLeftColor: theme.colors.secondary}}
      maxFontSizeMultiplier={1}
      contentContainerStyle={{paddingHorizontal: 15}}
      {...props}
      text2NumberOfLines={0}></InfoToast>
  ),
}
export default toastConfigs

Note that this issue still occurs with plane CSS. I remove the tailwind className and put it as the style but still same issue.

Environment (please complete the following information):

• OS: ios and droid
• react-native-toast-message version:^2.1.6-3 beta
• react-native version: "react-native": "0.73.6",

Additional context Seemed to happen after updating my node and basically nothing else though I did update expo while i was at it so now i am on 50 not 49.

[bj97301]

If you were wondering if it had anything to do with tailwind, I tried this as well:

  <SuccessToast
      text1Props={{allowFontScaling: false}}
      text2Props={{allowFontScaling: false}}
      text1Style={{
        color: '#0f0',
      }}
      text2Style={{
        color: 'red',
      }}
      style={{
        borderLeftColor: '#22c55e',
        backgroundColor: '#111827',
        marginTop: 2,
        color: '#00f',
      }}
      contentContainerStyle={{paddingHorizontal: 15}}
      {...props}
      text2NumberOfLines={0}></SuccessToast>
  ),

cant get the text color to change only the background color.

[bj97301]

Doing some debugging, seems like text1Style in BaseToast.js is null when i pass it in as a prop. Let me see if i can open a pr to fix that.

[bj97301]

well... ive narrowed it down to this, the props passed into the toast config contains a text1Style of null that is overwriteing my text1Style. It seems as though I was including the props override after setting my own text1Style. I moved it to the top and alls good now.