Stack navigator not working in release apk - react-native

Question

Here I am trying to implement a nested navigation in which I have
A bottom tab navigator
A couple of other screens.
My app is working fine in debug mode the following pop up is working on debug mode.
But it is not working when I releases the apk. I am using react navigation v5. Nothing happens when I tap on the button in released apk.
Main Navigation
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Dashboard from '../screens/Dashboard';
import BottomTabs from './BottomTab';
import CreateTodo from '../screens/CreateTodo';
import EditTodo from '../screens/EditTodo';
const Stack = createStackNavigator();
const MainNav = () => {
return (
<NavigationContainer>
<Stack.Navigator
mode={'card'}
screenOptions={{
cardStyle: { backgroundColor: 'transparent' },
cardOverlayEnabled: true,
cardStyleInterpolator: ({ current: { progress } }) => ({
cardStyle: {
opacity: progress.interpolate({
inputRange: [0, 0.5, 0.9, 1],
outputRange: [0, 0.25, 0.7, 1],
}),
},
overlayStyle: {
opacity: progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.5],
extrapolate: 'clamp',
}),
},
}),
}}
initialRouteName='BottomTabs'
headerMode={'none'}
// options={{ headerShown: false }}
>
<Stack.Screen name="BottomTabs" component={BottomTabs} />
<Stack.Screen name="CreateTodo" component={CreateTodo} />
<Stack.Screen name="EditTodo" component={EditTodo} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default MainNav;
Bottom Tab Navigation
import * as React from 'react';
import {createMaterialBottomTabNavigator} from '#react-navigation/material-bottom-tabs';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Settings from './../screens/Settings';
import Dashboard from './../screens/Dashboard';
import Profile from './../screens/Profile';
const Tab = createMaterialBottomTabNavigator();
const BottomTabs = () => {
return (
<Tab.Navigator
initialRouteName="Dashboard"
activeColor="white"
shifting={true}
barStyle={{
fontFamily: 'Lato-Black',
}}>
<Tab.Screen
name="Dashboard"
component={Dashboard}
options={{
tabBarLabel: 'Dashboard',
fontFamily: 'Lato-Black',
tabBarColor: '#6C70F4',
tabBarIcon: ({color}) => (
<FontAwesome name="tasks" color={color} size={wp(5.5)} />
),
}}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{
tabBarLabel: 'Settings',
tabBarColor: 'red',
tabBarIcon: ({color}) => (
<Ionicons name="md-settings" color={color} size={wp(5.5)} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Profile',
tabBarColor: 'teal',
tabBarIcon: ({color}) => (
<AntDesign name="profile" color={color} size={wp(5.5)} />
),
}}
/>
</Tab.Navigator>
);
};
export default BottomTabs;
package.json
{
"name": "App Name",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/material-bottom-tabs": "^5.2.7",
"#react-navigation/native": "^5.4.2",
"#react-navigation/stack": "^5.4.2",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-paper": "^3.10.1",
"react-native-reanimated": "^1.8.0",
"react-native-responsive-screen": "^1.4.1",
"react-native-safe-area-context": "^1.0.2",
"react-native-screens": "^2.7.0",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/runtime": "^7.9.6",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.0.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}