offset is not provided as prop in toast.show(str, {offset: 30})

[maXXCZ1]

Current behaviour

I can't access offset prop in toast.show method.

Expected behaviour

We should be able to access offset (ideally also bottomOffset and topOffset, but that is not mentioned in documentation, so let's focus just on offset).

Documentation example states this:

toast.show("Task finished successfully", {
  type: "normal | success | warning | danger | custom",
  placement: "top | bottom",
  duration: 4000,
  offset: 30  <========== I can't access this.
  animationType: "slide-in | zoom-in",
});

Code sample

Snack example:
https://snack.expo.dev/iidWBs8MB

Screenshots (if applicable)

//

What have you tried

When i set offset (also top and bottom) in provider, it works. But that is global setting i would like to override.

Your Environment

software	version
ios or android	android
react-native	0.64.2
react-native-toast-notifications	3.2.2
node
npm or yarn	yarn

[Lokprakash-babu]

Raised a PR to fix this issue.

[lminar]

Hi, when the fix will be released?

[arnnis]

You can modify offset globally in ToastProvider, It's by intention not modifiable on show() because it can break the stacking feature (Toasts going over each other).

Do you have a use case where overriding ToastProvider isn't be enough?

[lminar]

I use bottom position of toast and on some screens I have my bottom bar with actions . So for these screens I want to set specify (larger offset) to prevent the bottom bar from being covered by the toast.

[lminar]

@arnnis but I understand the reason why it is only globally.. thanks for your time..
I found workaround: I have custom renderType and the element has margin-bottom value .. so the notification is rendered as I want.. I am ok with the stacking feature isssue that you describe

renderType={{
            custom: (toast: any) => <ToastContent {...toast} />,
            ....

const ToastContent = (props) => {
   render (
       <View marginBottom={'50px'} .....>
             <Text>{props.message}</Text>
             ......
      </View>
     );    
}

[arnnis]

We also have a style prop you can use margins there

toast.show("Toast", {
   style: {
       marginBottom: 50
   }
])

[wata-tiendubai]

With workaround solution from @lminar, i can't interact to area below the Toast :(
And solution from @arnnis only work for the non-custom toast, not work for custom toast :(
So the best option is using PR from @Lokprakash-babu. 👍
Thanks everyone! Great Toast Lib!!!