typescriptreact-nativeexpoopen-banking

Render Error View config getter callback for component RCTModalHostView must be a function (received 'undefined')

I am working on a mobile application in React native (using Expo [SDK :~51.0.18])

Note : I am using Expo router to handle all routing in my project.

I am attempting to integrate this new SDK (Lean tech) into my app for bank connection (GCC region). This package uses react-native-webview

I have followed all the instructions in the tutorial as such :

import React, {useRef} from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { Button, useTheme} from 'react-native-paper';
// @ts-ignore
import LinkSDK from "lean-react-native";

const Screen: React.FC = () => {
 
  const theme = useTheme();
  const styles = createStyles(theme);
  const Lean = useRef(null)

  return (
      <View style={styles.container}>

          <LinkSDK
              ref={Lean}
              appToken="xxxxxx-6e5e-xxxx-xx58-bx6xd9fxxxxx"
              version="@latest"
              country="ArabEmirates"
              sandbox
          />
          <Button style={styles.button} mode="contained" textColor="#013511"  onPress={() => Lean.current.connect({ customer_id: "xxxxxxx" })}>
              Link Bank Account
          </Button>


      </View>
  );
};

Whenever i click the button to create the connection, I get the following error : Render Error View config getter callback for component RCTModalHostView must be a function (received 'undefined').

I am posting this question to see if the issue is with me using Expo or if i need to do any additional setups (or linking) ? I did not follow the Pod install instruction as i am testing on an android device.

Solution

  • I want to thank everyone who contributed with an answer to help me solve this. I had to dig into the SDK and modify the Modal and webview code as @fengeljardt mentioned. It was a problem with modal host view when it interacts with the webview component and a compatibility issue with Expo.