The WebView component is not getting re-rendered when we update the React context variable using the postMessage function in react-native-webview. To be more specific, I am trying to accomplish the following:
When the user presses the React Native component, send a message to the WebView via the postMessage function.
When the WebView receives the message, it dispatches the action to toggle the context variable "showDropdown".
After the context variable is updated, the components should be re-rendered.
It's worth noting that updating the context variable and re-rendering components purely on the web app works perfectly fine.
However, I have observed that the WebView does not update its display. To troubleshoot, I added a "window.alert" function to observe the behavior. The dispatch function gets called, and the context variable gets updated, but the WebView does not show the updated view. When I click the same button again, based on the window.alert messages, it appears to use the previous version of the context variable, not the updated one. For example:
The original context variable was false, and I click the React Native component to send the message. The dispatch function gets called, and the context is updated to true. However, the view remains the same.
When I click the same button again, the window.alert messages indicate that the original context variable was false, and then it updated to true.
If I click it again, the same behavior repeats.
Does anyone know why this is happening and what would be the best way to trigger context update re-rendering with the postMessage function?
An additional note: When we trigger the re-rendering with the local state inside the component within the WebView, it works fine. It's only when we try to trigger the update with the postMessage that it doesn't seem to re-render.
To Reproduce:
Sorry for not providing exact code snippet, but you can simply add same logic described above.
Expected behavior:
I believe the webview should re-render when the context gets updated.
Bug description:
The WebView component is not getting re-rendered when we update the React context variable using the postMessage function in react-native-webview. To be more specific, I am trying to accomplish the following:
It's worth noting that updating the context variable and re-rendering components purely on the web app works perfectly fine.
However, I have observed that the WebView does not update its display. To troubleshoot, I added a "window.alert" function to observe the behavior. The dispatch function gets called, and the context variable gets updated, but the WebView does not show the updated view. When I click the same button again, based on the window.alert messages, it appears to use the previous version of the context variable, not the updated one. For example:
false, and I click the React Native component to send the message. The dispatch function gets called, and the context is updated totrue. However, the view remains the same.false, and then it updated totrue.Does anyone know why this is happening and what would be the best way to trigger context update re-rendering with the postMessage function?
An additional note: When we trigger the re-rendering with the local state inside the component within the WebView, it works fine. It's only when we try to trigger the update with the postMessage that it doesn't seem to re-render.
To Reproduce:
Sorry for not providing exact code snippet, but you can simply add same logic described above.
Expected behavior:
I believe the webview should re-render when the context gets updated.
Screenshots/Videos:
Environment: