calintamas / react-native-toast-message

Animated toast message component for React Native
MIT License
1.7k stars 261 forks source link

Unable to add font family in text1Style #551

Open meakashdash1 opened 1 month ago

meakashdash1 commented 1 month ago

Describe the bug Whenever i build the custom version of the toast message, while adding the fontFamily field the text1 didn't show the font.

Steps to reproduce Steps to reproduce the behavior:

  1. Go to toastConfig
  2. Use text1Style on any of the success and error type
  3. Add fontFamily field to the desired value in my case Montserrat family
  4. See it didn't change the font family

Expected behavior Given font family should be shown

Screenshots

Screenshot 2024-08-21 at 4 31 55 PM

Code sample

export const toastConfig = {
  /*
    Overwrite 'success' type,
    by modifying the existing `BaseToast` component
  */
  success: (props: any) => (
    <BaseToast
      {...props}
      style={{borderLeftColor: '#B20000'}}
      contentContainerStyle={{
        paddingHorizontal: 15,
        backgroundColor: '#252526',
      }}
      text1Style={{
        fontSize: 15,
        fontFamily: 'Montserrat-Bold',
        color: '#F4F4F4',
      }}
      text2Style={{
        fontSize: 13,
        fontFamily: 'Montserrat-Italic',
        color: '#F4F4F4',
      }}
    />
  ),
  /*
    Overwrite 'error' type,
    by modifying the existing `ErrorToast` componentds
  */
  error: (props: any) => (
    <ErrorToast
      {...props}
      style={{borderLeftColor: '#B20000'}}
      contentContainerStyle={{
        paddingHorizontal: 15,
        backgroundColor: '#252526',
      }}
      text1Style={{
        fontSize: 15,
        fontFamily: 'Montserrat-SemiBoldItalic',
        color: '#F4F4F4',
      }}
      text2Style={{
        fontSize: 13,
        fontFamily: 'Montserrat-Italic',
        color: '#F4F4F4',
      }}
    />
  ),
  /*
    Or create a completely new type - `tomatoToast`,
    building the layout from scratch.

    I can consume any custom `props` I want.
    They will be passed when calling the `show` method (see below)
  */
  tomatoToast: ({text1, props}: any) => (
    <View style={{height: 60, width: '100%', backgroundColor: 'tomato'}}>
      <Text>{text1}</Text>
      <Text>{props.uuid}</Text>
    </View>
  ),
};

i used here

const handleChangeTitle = (text: string) => {
    if(text.length>10){
      Toast.show({
        type: 'error',
        text1: 'Warning',
        text2: 'Title cannot exceed 10 characters',
        position: 'top',
        visibilityTime: 9000,
        topOffset: 20
      });
    }else{
      setTitle(text);
    }
  };

Environment (please complete the following information):

Additional context The text2Style is working

maksym-kyryliuk commented 4 days ago

if you have custom font try to use fontWeight: "normal" or "400" for textStyle1