I am building an app using react starter kit. In past react apps, I had always triggered incremental re-rendering of DOM elements by using react.setState.
What is the best practice to re-render dom elements based on changes in state when using the stateless function component pattern used by this starter kit?
Related
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?
I have a brownfield Android application that has multiple activities, some of which are native and some of them react native.
What I wanted to know is that is there a way I can reuse the same react instance across all of my react native activities?
Right now, whenever we are creating a new activity that uses React Native, we have to initialize a new React Native instance and sync a lot of data along with rehydrating our entire redux store. This process is painfully slow and also consumes a lot of memory.
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
I have started working with flex box on React native, on CSS you should set the display to flex but on RN, this is set by default.
What classifies a container object where you can set alignItems, justifyContent?
Does it only need to be a view? or is every single component a potential container?
In my experience objects that honour flex box are ones you would expect to such as View and ScrollView - whereas views like Text do not and are likened to display: inline-block or <span />.
In the example here, The View within the ScrollView honours it's parents flex properties, and similarly the Text inside the View. However the Text objects do not behave in the same way and if I'm not mistaken, would not appear to change when adjusting it's flex properties.
Container components are those React Native components which have access to the store. These components make API calls, do processing and contain the business logic of the app. Container components shouldn't have the view logic or presentational logic. The job of container components is to compute the values and pass them as props to the presentational components.
Difference between Presentational Components Container Components
Purpose How things look (markup, styles) How things work (data fetching, state updates)
Aware of Redux No Yes
To read data Read data from props Subscribe to Redux state
To change data Invoke callbacks from props Dispatch Redux actions
Are written By hand Usually generated by React Native Redux
In regular React, there is a way to force re-renders of stateless functional components with top-level API ReactDOM.render().
Is there a way to force re-render of a stateless functional component in react-native?
say your component is myComp,
myComp.updater.enqueueForceUpdate(myComp)
it is strongly discouraged to use this in real time application, due to the nature of stateless component are suppose to be 'stateless' and its concerns is solely to one time render its content.