Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to add font family in text1Style #551

Open
meakashdash1 opened this issue Aug 21, 2024 · 2 comments
Open

Unable to add font family in text1Style #551

meakashdash1 opened this issue Aug 21, 2024 · 2 comments

Comments

@meakashdash1
Copy link

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):

  • OS: Android
  • react-native-toast-message version: 2.2.0
  • react-native version: 0.73.6

Additional context
The text2Style is working

@maksym-kyryliuk
Copy link

maksym-kyryliuk commented Oct 9, 2024

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

@masarbazi
Copy link

same issue, 1 hour wasted
@maksym-kyryliuk thank you fontWeight: 'normal' did the trick. should be fixed, so annoying😑

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants