Welcome to react-native-toast-message Discussions!

[calintamas]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

[aarthigovardhanan88]

Props that can be set on the Toast instance. They act as defaults for all Toasts that are shown
How to do this?
I need to add it to the toast instance in App.ts so that I need not repeat it in all the other Toast.show()
Is there a way to do it?

[aarthigovardhanan88]

Ho wto pass the props directly to the Toast instance?

[calintamas]

@aarthigovardhanan88 These are the props that are available on the Toast instance - https://github.com/calintamas/react-native-toast-message#props

You can pass them like this

import Toast from 'react-native-toast-message';

function App(props) {
  return (
    <>
      {/* ... */}
      <Toast ref={(ref) => Toast.setRef(ref)} position='bottom' />
    </>
  );
}

export default App;

[StefanBratanov]

Love the library, i recently migrated to v2. I think a sweet addition to the documentation would be to give an example of how to show icons centered as v1. It is not super straightforward. I managed to do it like this:

<SuccessToast
    {...props}
    contentContainerStyle={{ paddingHorizontal: 12.5 }}
    renderLeadingIcon={() => {
       return (
          <View style={{ justifyContent: 'center', marginLeft: 12.5 }}>
             <Icon name="check-circle-outline" size={20} color="#69C779" />
          </View>
       )
    }}
/>

[ShivamJoker]

You should make a PR for the update

[nik098]

How to customize the color and size of the close button (the X)? On black background color cannot see that button.
If not possible to do so then how to add a custom button here to close this on user action only?

[calintamas]

How to customize the color and size of the close button (the X)? On black background color cannot see that button.

If not possible to do so then how to add a custom button here to close this on user action only?

On v2 there is no more default close button icon.

You can render anything you need using 'renderTrailingIcon' prop on 'BaseToast'. See more in the docs - Custom layouts

[amsabots]

Is there any way i can show long text without it getting truncated and showing one line only

[calintamas]

You can create a custom Toast type based on <BaseToast /> component. There are props available to control number of lines for both texts: https://github.com/calintamas/react-native-toast-message/blob/main/src/types/index.ts#L95-L100

[ying8599]

Default Toast is unable to configure the number of lines
BaseToast, SuccessToast, and ErrorToast can configure the number of lines but cannot configure the position of the Toast'

Any way to configure the number of lines for Text 1 and Text 2 and also the Toast position?

[StephaneHo]

Hi

Thanks a lot for the component, it is really helpful,
Is it possible to add a handler for a close Button (in the case of customize config) ?