How TabNavigator Implement in React Native - react-native

Question

I want to implement tab navigator in react native.The link from which i get the code is
https://reactnavigation.org/docs/navigators/tab
The Problem is that when i run the code i get the error 500 type i also at the end attach the picture of the error.Plz resolve the issue if any one know about it the code is....
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
AppRegistry.registerComponent('TabNavigator', () => MyApp);
when i run this code i get the error
Even i use the simple stack navigator on that time i also get the same error
the code of stack navigator i get from this link
https://reactnavigation.org/docs/intro/

Answer 1

The error tells you that a local image can not be found.
There are two options:
Create a chats-icon.png and a notif-icon.png and place them both in the directory where the file you copied the content from is at.
Replace source={require('./chats-icon.png')} and source={require('./chats-icon.png')} with source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} to use an example remote image.
This should eliminate the 500 error and let you continue working.