I am developing a library consisting of React Native components and this library is used by a React Native application. I have a problem where I want to avoid rendering WebViews during transitions since it is causing crashes on Android. My problem occurs when the application switches to a new screen and renders a component from this component library. The component adds listeners for transitionEnd and beforeRemove. And the problem is that the transitionEnd listener doesn't always seem to get initialised soon enough for me to be able to recognise that the transition has ended and I am not able to determine if I can safely render a WebView.
Do you see a solution that already exists in react-navigation or is this perhaps a feature that should exist?
Related
Everytime I add a new component such as text or any view component the things that are already on the screen keep moving. Is there a way to strictly keep all components locked in one place?
I have a react native app that we are implementing the react native web version using: React native web, the app uses the latests react native navigation library.
So far, mostly everything is working except for modals, the problem that i have is that when i open a modal, the URL path on web updates (I.E: from /signup if i open a modal it switch to /legalAgreementModal?QUERY_PARAMS....), so if i refresh the page the modal works but i can't close the modal anymore. I thought about adding a conditional on the modal to goBack if there is anything to go back to, but the problem is that i have too many modals that can go back to different screens so it will be a huge change if i have to add that logic to every modal.
My question is, is there a way to avoid modals to update my path? So if user refresh they lost the modal but they are on the original screen? Perhaps another workaround that you guys may know could help also!.
Thanks!
I tried adding a conditional on modal close action, adding empty string as the modal path.
My app is wrapped in both Context and Navigation. The issue is that, everytime the context gets updated, the navigated component unmounts and remounts. This causes the keyboard to dismiss and other unwanted side effects.
Ah, the tutorial I used had me putting the imported file components inside a local function in my App class instead of linking them directly to the Stack.Screen. Working now.
I am writing a custom component for a Windows 8.1 tablet application our team are mostly developing in React Native.
I've realised that some of the custom code we need doesn't naturally belong to any specific UI element. For example, we want a button to trigger the native Camera UI dialog (as in this CameraUICapture element sample). However, there's no reason this would necessarily be triggered from a button. It could be a callback from something else, it could be a click event on an image. I don't want to lock the function calls to a specific UI piece.
All the tutorials and demos I have managed to find so far for React Custom Components are explicitly for UI pieces, and require implementing a React View manager subclass to interact with React when the piece is loaded. Is this the only way to write native code accessible from a React page? Do I need at least a dummy UI element even to hook into functional code in the native layer, or is there another way?
It turns out the phrase I'm yearning for is "Native Modules".
iOS:
https://facebook.github.io/react-native/docs/native-modules-ios.html
Android:
https://facebook.github.io/react-native/docs/native-modules-android.html
Windows:
https://github.com/Microsoft/react-native-windows/blob/master/docs/NativeModulesWindows.md
Is it possible to use React Native only for one view within the project?
I've successfully added React view for particular iOS app screen (using instructions from "Integration with existing iOS project" docs), but i don't know how to get data from that screen and call other (objective-c) code. For example I want to replace old storyboard-based Search Form to React view and then call storyboard-based screens when user clicks "Search".
Or it is intended to make all views in React and convert existing non-React views into 'native' components (very huge work for big apps)?
This is easily accomplished via the Native Module concept which is described here - https://facebook.github.io/react-native/docs/nativemodulesios.html
You can export obj-c methods to JS via a single call.
I've solved my issue in following way:
Create Native Module wrapper around NSNotificationCenter, so
javascript code could publish iOS events.
Subscribe for that event within ReactController-wrapper around React-Native code.
Raise event when user clicked «Search» (when we need to give control back to objective-c) with needed data to pass as dictionary.
Catch event, process data, open other controllers/etc