I get the error:
node_modules\react-native\Libraries\Core\ExceptionsManager.js:86 TypeError: Cannot read property 'videos' of undefined
This error is located at:
in Connect(HomeHeader) (at AppNavigator.tsx:116)
in RCTView (at View.js:35)
App.tsx:
const App = () => {
return (
<ImageBackground
source={require('./assets/images/TC_background.jpg')}
style={styles.container}>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<AppNavigator
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</PersistGate>
</Provider>
</ImageBackground>
);
};
AppNavigator.tsx:
const config = {
contentOptions: {
activeTintColor: '#e91e63',
inactiveTintColor: '#ffffff',
itemStyle: {
flexDirection: 'row-reverse',
},
},
drawerWidth: 200,
drawerPosition: 'left',
contentComponent: SideMenu,
drawerBackgroundColor: '#00000020',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1,
},
};
const withHeader = (
screen: Function,
routeName: string,
Header: any,
): StackNavigator =>
createStackNavigator(
{
[routeName]: {
screen,
navigationOptions: ({routeName, props}) => ({
header: props => <Header {...props} />,
}),
},
},
{
initialRoute: 'Home',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1,
},
transitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent',
},
}),
},
);
const routes = {
....
};
const NestedDrawer = createDrawerNavigator(routes, config);
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: ({ props }) => ({
header: (props: any) => <HomeHeader {...props} />,
}),
},
...
},
{
initialRoute: 'Home',
cardStyle: {
backgroundColor: 'transparent',
opacity: 1,
},
},
);
export default createAppContainer(MainStack);
HomeHeader:
class HomeHeader extends Component {
constructor(props) {
super(props);
this.state = { term: "", videos: [] };
this.onSubmitEdit = this.onSubmitEdit.bind(this);
}
componentDidMount() {
this.SearchFilterFunction("");
}
SearchFilterFunction(term) {
const { filteredVideo } = this.props;
filteredVideo(term);
}
onSubmitEdit() {
const {
navigation: { navigate },
initSearch
} = this.props;
navigate("VideoEpisodes");
}
onPress(id) {
const {
navigation,
initSearch,
navigation: { dispatch }
} = this.props;
initSearch();
const resetAction = StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: "VideoPlayer",
params: { id }
})
]
});
dispatch(resetAction);
}
separator = () => <View style={styles.separator} />;
render() {
const {
navigation,
videos,
search: { term },
scene: {
route: { routeName: title }
}
} = this.props;
return (
<..... />
);
}
}
const mapDispatchToProps = dispatch => ({
filteredVideo: data => dispatch(filteredVideo(data)),
initSearch: () => dispatch(initSearch())
});
const mapStateToProps = state => {
return {
videos: state.iaApp.videos,
search: state.iaApp.search
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(HomeHeader);
const styles = StyleSheet.create({
container: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
marginTop: Platform.OS === "ios" ? 20 : 0,
paddingTop: Platform.OS === "ios" ? 20 : 10
},
title: {
color: "#fff",
fontSize: 18
},
separator: {
borderBottomColor: "#d1d0d4",
borderBottomWidth: 1
}
});
HomeScreen:
class HomeScreen extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
componentDidMount() {
const {fetchData} = this.props;
fetchData();
}
render() {
const {videos} = this.props;
return (
<View style={styles.container}>
<HomeMenu {...this.props} />
</View>
);
}
}
const mapDispatchToProps = (dispatch: any) => ({
fetchData: () => dispatch(fetchData()),
});
const mapStateToProps = (state: any) => {
return {
videos: state.IaApp.videos,
};
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(HomeScreen);
