Toast renders under keyboard

[arnnis]

Toast renders under keyboard

[lukeramsden]

I did suspect that android would work as it handles keyboard spacing differently. I’ll look in to it.

[lukeramsden]

Yes, wrapping it in a KeyboardAvoidingView does solve the issue for me. Is it worth me making a PR to implement this in the library proper or is it just better as documentation?

How I'm using the library is below in case anyone else stumbles across this.

import React, {FC, useContext, useEffect, useRef, useState} from 'react';
import Toast from 'react-native-fast-toast';
import {Icon, useTheme} from '@ui-kitten/components';
import tw from '@utils/theme';
import {KeyboardAvoidingView, Platform} from 'react-native';

type ToastCtx = React.RefObject<Toast>['current'];

const ToastContext = React.createContext(null as ToastCtx);

const ToastProvider: FC = ({children}) => {
  const theme = useTheme();
  const toastRef = useRef(null);
  const [refState, setRefState] = useState(null);

  useEffect(() => {
    setRefState(toastRef.current);
  }, []);

  return (
    <ToastContext.Provider value={refState}>
      {children}
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'position' : undefined}>
        <Toast
          ref={toastRef}
          duration={5000}
          placement="bottom"
          offset={60}
          type="normal"
          successColor={theme['color-success-500']}
          successIcon={
            <Icon
              style={tw('w-6 h-6')}
              name="checkmark-circle-outline"
              fill={theme['text-alternate-color']}
            />
          }
          warningColor={theme['color-warning-500']}
          warningIcon={
            <Icon
              style={tw('w-6 h-6')}
              name="alert-triangle-outline"
              fill={theme['text-alternate-color']}
            />
          }
          dangerColor={theme['color-danger-500']}
          dangerIcon={
            <Icon
              style={tw('w-6 h-6')}
              name="close-circle-outline"
              fill={theme['text-alternate-color']}
            />
          }
        />
      </KeyboardAvoidingView>
    </ToastContext.Provider>
  );
};

const useToast = () => useContext(ToastContext);

export {ToastProvider, useToast};