how to get symbol(child_state) value in react-navigation 6? - react-native

The logic was developed using the route.state.index value in the existing code.
After upgrading to 6, "state" went into Symbol(CHILD_STATE), but I don't know how to access it.
The value I want is an index with a numeric value of 2

React navigation provides "useNavigationState"
https://reactnavigation.org/docs/use-navigation-state/
In the above link, we see the detail about the hook.
So, I can solve to use this hook.
const noRenderLocation = useNavigationState(state => state);
//.routes[0].state.index <-- This 'index' is that I want to contract !

Related

Component doesn't pick up changes from vuex store

https://codepen.io/bohdanafanasyev/pen/ZgqPWv?editors=1010
Above is the example of the issue I am facing now with the following logic:
1. Load records from firebase
2. Populate state with them
3. Render component that displays state
At this point, all work as expected.
4, Add a new product to the firebase
4.1 On success add product to the state
In a console, we can see that commit has added the product, but the component itself doesn't pick up the change.
Can somebody please suggest what is missing in the logic above.
P.S: I will also appreciate if someone could leave their opinion on a better way to restore the namespaced module state rather then.
Object.assign(state, newState)
Two changes here to make the cart reactive:
Declare cart property in cart/state, so that in your store you have state: {cart: {}};
In your addProduct mutation, change state.cart[productName] = "" to
Vue.set(state.cart, productName, "").
The takeaway is
always declare the property to make it reactive;
if you can't declare the property before hand, use Vue.set to add the property;
For more on reactivity.

Which way is better when i want to filter a list?

I fetch an api to get the data with react-redux to show my list. If i want to add a filter function which way is better ?
A:
Still use react-redux to change reducer . May be add a boolean call filter , if it is true then the reducer filter the data to re-render my component.
B:
Just use this.setState to change my component. If i choose this way i have to save the data to this.state when i call the api data first.
I want to know which way is more efficient and easier.
Any suggestions would be appreciated. Thanks in advance.
According to bntzio suggestion:
My filter will be activated by user in my case, if i choose B:
I already have a loading flag for react-redux somthing like
if(this.props.loading) { return <Loading /> }
, if i use this.state that i have to add another loading flag like this.state.loading right ?
Will it become more complicated ?

Change react-native-router-flux scene using a variable

I am using react-native-router-flux for the navigation in my react-native mobile app.
I want to call Actions.sceneKey() from drawer using a variable sceneKey which will be based on the store state.
Let's say, there are 3 menus in drawer:
menu1
menu2
menu3
I just want to call Actions.{{ selectedMenu }}, is this somehow possible?
You can use bracket notation, see property accessors.
Here is a example of how you can use it:
const selectedMenu = 'menu1'; //menus values coming from your store
Actions[selectedMenu]();
Make sure the variable is of type string and matches one of your defined routes.

React Native: Updating ListView issue

I need to update Listview when in textinput typed > 2 symbols. I get data from API, and every new symbol after 2 chars must update suggested variants (new datasource). Can't find my mistake. Will be very grateful for solution :)
Source code:
https://rnplay.org/apps/msxitg
The mistake is on row 54:
API_RESPONSE_ARRAY = responseJSON.result.items.name;
responseJSON.result.items is list of objects that have name key. You have to change this to following and it will work:
API_RESPONSE_ARRAY = responseJSON.result.items.map((item) => item.name);
Forked version that works can be found from here https://rnplay.org/apps/WDXSHw
ps. maybe you know it but as it is you don't need the componentWillReceiveProps function and it's not called at all currently.

React Native | Controlling Parameters Passed to a ListView's renderRow Function

According to the React Native Docs for ListView the signature for the renderRow function has the following signature:
(rowData, sectionID, rowID, highlightRow) => renderable
However, in the ScheduleView component in the F8App app by Facebook, PureListView which renders a ListView uses a renderRow function with this signature:
renderRow(session: Session, day: number)
How is this? What am I overlooking?
Because f8 app uses flow. See https://flowtype.org/
Ok, what I didn't realize was that it's the same row data and section ID that are being passed. I thought that it was completely customized data being passed instead but upon examination of the actual data it's now clear that the data is simply grouped by time (even though the param name is day) which really is just the section ID.
Then, as agent_hunt pointed out, they are typed using flow.