Create v5 youtube tutorial video

[just1and0]

The tutorial video we currently have is for v4. We need to create a video for v5

[just1and0]

@AMUZYZOHO thanks for raising this issue, i will create a new issue for this and we will track it there.

[AMUZYZOHO]

I'm still testing things out though. There might eventually be no need to create a new issue for it yet. But thanks for acknowledging

[AMUZYZOHO]

The payment UI doesn't show up immediately after calling 'payNow' function, it just opens the modal but nothing shows until I then tweak the styles.js, in the lib folder, within the production folder, regardless of whether I add 'width: '100%' " or not. I'm still trying to figure out the issue

[AMUZYZOHO]

@just1and0

THE WEBVIEW TRYING TO RENDER BEFORE THE MODAL OPENS

So I took the issue to CHATGPT with the prompt :
In my expo app, I have a package that uses webview from react-native-webview. I have a function to call to open up the webpage , which is inside a modal from react native. When it opens up, the modal opens, but the view within it does not show until I change a style and then the UI hydrates then it shows up. What happens during react hydration and why doesn't it show first time? How can I solve this issue?.

I got replies stating that the issue is caused by the modal not being ready when webView mounts and it proposed solutions which entail delaying the webView render until after the modal is ready

const [modalVisible, setModalVisible] = useState(false);
const [showWebView, setShowWebView] = useState(false);

const openModal = () => {
  setModalVisible(true);
  // Delay WebView render slightly
  setTimeout(() => {
    setShowWebView(true);
  }, 100); // Try increasing to 200ms if needed
};

Then in the component

 <Modal visible={modalVisible} transparent={false} animationType="slide">
  <View style={{ flex: 1 }}>
    {showWebView && (
      <WebView
        source={{ uri: 'https://example.com' }}
        style={{ flex: 1 }}
      />
    )}
  </View>
</Modal>

It suggested another solution to force layout updates :

<WebView
  source={{ uri: 'https://example.com' }}
  style={{ flex: 1 }}
  onLayout={() => {
    // Sometimes triggers rendering if layout wasn’t complete
    console.log('WebView layout complete');
  }}
/>

I don't know if this helps but I've been stuck on this issue now since yesterday and it's delaying progress