What is the best way to properly place the toasts to screen on IOS and Android ?

[MtyldZ]

Hi, basically I would like to show the toasts at the similar places according to phone screen and platform. Since android does not have unusable spaces unlike IOS, placing toast at the center of the container looks different and bad in my opinion. There is so much space between top of the screen and the toast in android. Setting justifyContent to flex-start does not resolve my problem neither. In both cases toasts look like this, (when justifyContent=center)

(when justifyContent=flex-start)

red block is the container of the Toastable component on my app.tsx I am using the renderContent prop to use custom toast like this,

renderContent={(props) => {
          if (!props.status) return;
          if (toastConfig[props.status]) {
            return (
              toastConfig[props.status](props)
            );
          }
        }}

and my toastConfig object is like this,

export const toastConfig: {[key: string]: (props: ToastableBodyProps) => JSX.Element} = {
  info: (_props) => {
    const {message} = _props;
    return (
      <View style={styles.notificationWrapper}>
        <View style={[styles.notificationContainer, {backgroundColor: '#F0F6FE'}]}>
          <InfoIcon />
          <Text style={[styles.notificationTitle, {color: '#4E80EE'}]}>{message || 'Info'}</Text>
          <NotificationCloseIcon fill="#4E80EE" />
        </View>
      </View>
    );
  },
  ...

In the end, what is the best way to render toasts at similar places and not dependent to screen or platform ?

[MtyldZ]

I have managed to get it working with this, but I believe this is not the best way. Also this feature must be in any toast package.

Using justfiyContent=flex-start and updating the renderContent prop to

renderContent={(props) => {
          if (!props.status) return;
          if (toastConfig[props.status]) {
            return (
              <SafeAreaView style={{marginTop: 12}}>
                {toastConfig[props.status](props)}
              </SafeAreaView>
            );
          }
        }}

[enestatli]

@MtyldZ Thank you for your finding, it's fixed in the current version (0.3.0). Now you need to give offset value to Toastable component. Please refer to https://github.com/rnheroes/react-native-toastable?tab=readme-ov-file#usage