Problem accessing navigation parameters in consuming component - react-native

Question

I am having difficulty of accessing parameters passed from component named NewsPageScreen.js. the parameters are passed to BrowserScreen.js. My app has Main Navigator component called MainTabNavigator.js that displays Bottom Tabs. The 'News' tab is connected to NewsPageScreen.js and this is where I am passing the the parameter to BrowserScreen.js but for some reason I am unable to access the parameters BrowserScreen.js, Can anyone help me see what I am getting wrong because it is giving me undefined. All my files are shown below:
MainTabNavigator.js
import React from 'react';
import { Ionicons } from '#expo/vector-icons';
import { TabBarBottom } from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import NewsPageScreen from '../screens/NewsPageScreen';
import FavouriteScreen from '../screens/FavouriteScreen';
import SettingScreen from '../screens/SettingScreen';
import BrowserScreen from '../screens/BrowserScreen';
const Colors = {
tabIconDefault: '#ccc',
tabIconSelected: '#2f95dc'
}
const tabNavigator = createBottomTabNavigator({
News: createStackNavigator({
News: NewsPageScreen,
navigationOptions: ({ navigation }) => ({
title: 'News'
}),
}),
Favourite: createStackNavigator({
Favourite: FavouriteScreen,
navigationOptions: ({ navigation }) => ({
title: 'Favourite'
}),
}),
Setting: createStackNavigator({
Setting: SettingScreen,
navigationOptions: ({ navigation }) => ({
title: 'Setting'
}),
}),
Browser: createStackNavigator({
Browser: BrowserScreen,
navigationOptions: ({ navigation }) => ({
title: navigation.state.params.title
}),
}),
}, {
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons ;
let iconName;
switch (routeName) {
case 'News':
//iconName = `ios-information-circle`;
iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'
break;
case 'Favourite':
iconName = `ios-link`;
break;
case 'Setting':
iconName = `ios-options`;
}
return
<IconComponent
name={iconName}
size={28}
style={{marginBottom: -3}}
//color={tintColor}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
},
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
});
const MainTabNavigator = createAppContainer(tabNavigator)
export default MainTabNavigator;
NewsPageScreen.js
import React, { Component } from 'react'
import { TouchableOpacity, View,StyleSheet,Text,SafeAreaView,} from 'react-native';
export default class NewsPageScreen extends Component {
state = {
links: [
{
title: 'Smashing Magazine',
url: 'https://www.smashingmagazine.com/articles/'
},
{
title: 'CSS Tricks',
url: 'https://css-tricks.com/'
},
],
};
handleButtonPress = (button) => {
const { url, title } = button;
this.props.navigation.navigate('BrowserScreen', { url, title });
}
renderButton = (button, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => this.handleButtonPress(button)}
style={styles.button}
>
<Text style={styles.text}>{button.title}</Text>
</TouchableOpacity>
);
}
render() {
return (
<SafeAreaView style={styles.container}>
<View>
<Text style={styles.newsTitle}>Scan The Somali world News</Text>
</View>
<View style={styles.buttonList}>
{this.state.links.map(this.renderButton)}
</View>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
buttonList: {
flex: 1,
justifyContent: 'center',
},
button: {
margin: 10,
backgroundColor: '#c0392b',
borderRadius: 3,
padding: 10,
paddingRight: 30,
paddingLeft: 30,
},
text: {
color: '#fff',
textAlign: 'center',
},
newsTitle: {
color:'#000',
textAlign: 'center',
marginTop: 20
}
});
BrowserScreen.js
import React, { Component } from 'react'
import { WebView } from 'react-native-webview';
export default class BrowserScreen extends Component {
render() {
//console.log(navigation)
const { params } = this.props.navigation.state;
console.log(params)
return (
/**
* use the webview here to display the webpage
*/
<WebView source={{ uri: url }} />
)
}
}
App.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import AppIntroSlider from "react-native-app-intro-slider";
import MainTabNavigatorp from './src/navigation/MainTabNavigator';
export default function App() {
return (
<View style={{flex: 1}}>
<MainTabNavigator />
</View>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: 20,
alignItems: 'center',
justifyContent: 'center',
padding: 20
},
slide: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue',
},
image: {
width: 220,
height: 220,
marginVertical: 32,
},
description: {
color: 'rgba(255, 255, 255, 0.8)',
textAlign: 'center',
paddingLeft: 10,
paddingRight: 10,
fontSize: 18,
},
title: {
fontSize: 25,
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
});