Invalid YGPositionType 'top'. should be one of

Question

While using react-native-toast-message I get the following error on the iOS emulator and iOS.

// Toast.tsx

import React, {FC} from 'react';
import {Platform, StyleSheet, Text} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import Toast, {
  ToastConfig,
  ToastConfigParams,
} from 'react-native-toast-message';
import {Color} from '../../types/Color';
import Typography from './Typography';

interface ToastProps extends ToastConfigParams<any> {
  /**
   * Emoji which is being shown
   */
  text2?: string;
}

const Toaster: FC<ToastProps> = ({text1, text2, ...props}) => {
  return (
    <SafeAreaView
      {...props}
      style={[styles.container]}
      accessibilityRole="alert">
      {text2 && <Text style={styles.emoji}>{text2}</Text>}
      <Typography style={styles.text} variant="h6">
        {text1}
      </Typography>
    </SafeAreaView>
  );
};

const ToastContainer: FC = () => {
  const toastConfig: ToastConfig = {
    success: props => <Toaster {...props} />,
    error: props => <Toaster {...props} />,
    warning: props => <Toaster {...props} />,
    info: props => <Toaster {...props} />,
  };

  if (Platform.OS === 'android') return null;
  return <Toast config={toastConfig} />;
};

export default ToastContainer;

const styles = StyleSheet.create({});

// App.tsx

import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import ToastContainer from './components/atoms/Toast';
import Routes from './routes/Routes';

const App = () => {
  return (
    <NavigationContainer>
      <Routes />
      <ToastContainer />
    </NavigationContainer>
  );
};

export default App;

error

Invalid YGPositionType 'top'. should be one of: (
    absolute,
    relative,
    static
)

RCTConvertEnumValue
    RCTConvert.m:282
+[RCTConvert YGPositionType:]
__49-[RCTComponentData createPropBlock:isShadowView:]_block_invoke_6
__49-[RCTComponentData createPropBlock:isShadowView:]_block_invoke_2.114
__49-[RCTComponentData propBlockForKey:isShadowView:]_block_invoke_2
RCTPerformBlockWithLogFunction
RCTPerformBlockWithLogPrefix
__49-[RCTComponentData propBlockForKey:isShadowView:]_block_invoke
__43-[RCTComponentData setProps:forShadowView:]_block_invoke
__NSDICTIONARY_IS_CALLING_OUT_TO_A_BLOCK__
-[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:]
-[RCTComponentData setProps:forShadowView:]
-[RCTUIManager createView:viewName:rootTag:props:]
__invoking___
-[NSInvocation invoke]
-[NSInvocation invokeWithTarget:]
-[RCTModuleMethod invokeWithBridge:module:arguments:]
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&, int, (anonymous namespace)::SchedulingContext)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_lane_serial_drain
_dispatch_lane_invoke
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread

package.json

  "dependencies": {
    "@klarna/react-native-vector-drawable": "^0.3.0",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-onboarding-swiper": "^1.2.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-toast-message": "^2.1.5",
    "react-native-vector-image": "^0.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.67.3",
    "@types/react-native-onboarding-swiper": "^1.1.4",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.17.0",
    "@typescript-eslint/parser": "^5.17.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.4.4"
  },

Answer 1

I noticed I was spreading ToastConfigParams props in Toasts.tsx on a SafeAreaView.

removing {...props} from SafeAreaView did the trick.