In my problem, the child does not render when the loading flag changes unless the loading flag is also included in the parent props. The child does get the change and console.logs
even show that it goes to the correct return but the screen does not change.
The only way the child renders on the loading
change is if the parent connect
is like this:
export default connect(state => ({
children: state.children,
loading: state.loading
}))(ParentComponent);
Parent Component
import React from 'react';
import { ScrollView } from 'react-native';
import { connect } from 'react-redux';
import ChildComponent from './ChildComponent';
function ParentComponent({ children }) {
return (
<ScrollView>
{children.map(item => (
<ChildComponent key={item.uid} {...item} />
))}
</ScrollView>
);
}
export default connect(state => ({ children: state.children }))(ParentComponent);
Child Component
import React from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
function ChildComponent({ name, loading }) {
if (loading) {
return (
<View>
<Text>children.name</Text>
</View>
);
}
return false;
}
export default connect(state => ({ loading: state.loading }))(ChildComponent);