I started using Mobx as state management for my react native app.
I noticed that few components render method is being called more than once. I understand its because one of the observable is modified or computed value is used. Mobx documentation mentions whyrun method to get a hint of why a particular method was run when the observable state is modified. However I did not find any reference to how to use it in react-native to find why the component render was triggered?
Did anyone use whyrun feature in react-native with Mobx?
You can import whyRun with import { whyRun } from 'mobx' and use it like you would use in a normal web project. Here are all the exports from MobX that shows the whyRun export:
MobX Exports
Hope that helps!
Related
I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList and InfiniteHits components there is a parameter: refine. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine() method would look like?
Please help me with some resources. An explanation of this refine() method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext.
The documented InfiniteHits example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits data and logic. You can read more about the connectInfiniteHits connector in the documentation.
The provided refineNext function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached callback of React Native's FlatList component, whenever the hasMore provided prop is true. This allows loading more results once when the scroll position gets within onEndReachedThreshold of the rendered content.
I am building application on Vue and want to use Mobx State Tree as a store management library. I trying and finally made something working, but seems to it isn't work properly.
First, I have Changer component that change store via action. Works perfectly.
Second, I have Test component that tryes to react on store changes via passed props. Works fine only if I return prop via method.
Third, I have BlindTest component that tryes to react on store changes via this.$store itself and via state prop. Works fine only if I provide immutable snapshot as a state via function.
This is incorrect and strange behavior. Components updates only if props was changed, not if state was changed. Why?
Also I used mobx-vue library from official mobxjs repository for bindings between mobx and vue.
There is sandbox with demo application: https://codesandbox.io/embed/vue-template-ouq7r
Is there any way to connect MST and Vue properly?
You can use the official library: https://github.com/mobxjs/mobx-vue
Note, before reading I have already looked at the following:
JestJS -> Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)"
ReactJs/Redux Invariant Violation: Could not find "store" in either the context or props of "Connect(LoginContainer)"
Could not find "store" in either the context or props of "Connect(App)" In an react-redux app
Also, I followed the tutorial shown here: https://www.youtube.com/watch?v=9mlwjZL3Fmw
The major difference is that I used create-react-native-app to initialize my project where the video creator does not.
I want to know if it's possible to get the connect to recognize all the components while keeping the App component in App.js as a js const.
The previous solutions offered work when I switch to using a javascript class instead:
class App extends React.Component { etc..
The code is available here: https://github.com/qxh5696/first-react-native-app
I'd like to find the root cause as to why the "store" is not being recognized. Call it stubbornness but I am curious to know if anyone has found a solution to this problem.
The root cause of the error is when we put together a react-redux application we should expect to see a structure where at the top we have the Provider tag which has an instance of a redux store.
That Provider tag then renders your parent component, lets call it the App component which in turn renders every other component inside the application.
Here is the key part, when we wrap a component with the connect() function, that connect() function expects to see some parent component within the hierarchy that has the Provider tag.
So the instance you put the connect() function in there, it will look up the hierarchy and try to find the Provider.
Thats what you want to have happen, but in your test environment that flow is breaking down.
import
import {connect} from "react-redux";
instead of
import connect from "react-redux/es/connect/connect";
At the top of my new react native app some boilerplate code is created
export default class App extends Component < {} > {
render() {
...
}
}
Within the Learn the Basics webpage of the React Native Documentation there is a section on Component. Within this section it mentions
A component can be pretty simple - the only thing that's required is a
render function...
I can't see in the API list an entry for Component. I presume this Component has the same idea as Object in Java as the base class for everything.
Java's Object class provides some methods such as toString().
I would like to know :
Is my presumption correct?
Is there a weblink to documentation somewhere that details the full
api for Component?
What else provided by react native, that isn't my own custom code, can be put inside my App
class?
You can read about React Components here. React-Native utilizes React architecture.
Component is a module of your app that has a particular functionality. On the left sidebar here you can see a section called "Components" These are the default React-Native components. You can create other components, needed in your app by using those components. Examples of how the components could look or be created are components of Expo SDK and React-Native-Elements component library.
Through this link you can view all of React-Native and Expo components on your device using Expo app: https://expo.io/#community/native-component-list
Your custom components / components of other libraries that you would like to render (put them in return statement, wrapped with parenthesis, like return (<Text>Hello World</Text>);.
Plus anything that is related to rendering your screen could also be put inside the render method, but outside the return statement. For example, state / props destructuring, conditional rendering (if something is true - show this view, else show this view) and so forth.
I am working on swipeListView in react native and they have line which state
If you are using the standalone you can just keep a ref to the component and call closeRow() on that ref.
But how do I create a ref and and how do I call it.
and also react native claims not to use the ref much and why is it so.
Not sure about React Native but here's how you create ref's in a React component.
<Component
ref={instance => {
this.componentReference = instance;
}}
/>
//Once you create a ref, you can access it in any of your function using this.ref (Like here it would be this.componentReference).
To answer your 2nd question, refs are considered a bad practice because they are nothing but a workaround to directly access your DOM element. React wants you to avoid direct DOM manipulations since you essentially loose the benefits and speed of React virtual DOM and your state gets cluttered since you directly manipulate your DOM.