On Android, the layout and style for types are broken

[shettayyy]

Describe the bug
On Android, the layout and styles are broken. I have added the screenshot for better clarity. This issue doesn't persist on iOS.

Steps to reproduce
Steps to reproduce the behavior:

1. Install the latest version of react-native-toast-message
2. Place the <Toast /> in the root after NavigationContainer as mentioned in the doc.
3. Call toast.show({ type: 'success', text1: 'OOPS!', text2: 'Grave mistake' , position: 'bottom', autoHide: true }) as shown in the documentation

Expected behavior
The layout and style for all types seen on iOS should match with Android.

Screenshots

Code sample
Please refer to Steps to reproduce

Environment (please complete the following information):

• OS: Android - Nexus One API 28
• react-native-toast-message version: 2.1.1
• react-native version 0.66.4

Additional context
This occurs only on Android

[EIrwin]

Seeing the same issue, however it is not happening on all devices, and doesn't happen on emulators

[shettayyy]

@EIrwin The screenshot I have posted is of a emulator on which I was testing.

[JavaScriptJohn]

This is happening to me on a physical iPhone 8. Any update?

[JavaScriptJohn]

This is fixed by changing the width from 340 to 300 or 90% in BaseToast.styles.js. Is there a way to adjust this without changing the source code (config options maybe)?

[calintamas]

Hi @JavaScriptJohn, that's a good insight, I'll mark it as a bug indeed.

In the meantime, it can be adjusted like this

import Toast, { BaseToast, ErrorToast } from 'react-native-toast-message';

const toastConfig = {
  success: (props) => (
    <BaseToast
      {...props}
      style={{ width: '90%' }}
    />
  )
};

// Pass the config as prop to the Toast component instance
export function App(props) {
  return (
    <>
      {...}
      <Toast config={toastConfig} />
    </>
  );
}

[JavaScriptJohn]

Very helpful, thank you.

[afilp]

Is this fixed within the library itself? Thanks.