Drawer.Screen not showing on android but works perfectly on iOS - react-native

Question

I'm not sure what happened, but I had to clean/rebuild gradle from a version issue with react-native-screens, and when I finally got everything back and working, the screens don't show on Android, but they work exactly as they did before with the issue. I'm not even sure how or where to look. I know it's the Drawer Navigator because if I pass a view instead it will show. Keep in mind - before I had the gradle issue, EVERYTHING worked - which is why I'm so stumped.
Here is my code:
App.tsx
import 'react-native-gesture-handler';
import React, { useEffect, useRef, useState } from 'react';
import { NavigationContainer, DefaultTheme, DarkTheme, LinkingOptions, NavigatorScreenParams, useNavigationContainerRef } from '#react-navigation/native';
import { createNativeStackNavigator, NativeStackHeaderProps } from '#react-navigation/native-stack';
import { Platform, StatusBar, View } from 'react-native';
import { enableScreens } from 'react-native-screens';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import Orientation from 'react-native-orientation-locker';
import OneSignal from 'react-native-onesignal';
import analytics from '#react-native-firebase/analytics';
import {
StyleSheet
} from 'react-native';
import MenuButton from './src/components/layout/MenuButton';
// Import pages and components
import { colors } from './src/styles/colorPalette';
import MainHeader from './src/components/headers/MainHeader';
import DrawerNavigator from './src/navigators/DrawerNavigator';
import ThemeContextProvider, { useTheme } from './src/contexts/ThemeContext';
import AuthContextProvider from './src/contexts/AuthContext'
import { useAuth } from './src/contexts/AuthContext';
import LoginRegister from './src/components/LoginRegister';
import EmailPhoneCollector from './src/components/EmailPhoneCollector';
import Search from './src/components/Search';
import SearchHeader from './src/components/headers/SearchHeader'
import DetailView from './src/components/DetailView';
import FullScreenLoader from './src/components/FullScreenLoading';
// Import theme and styling files
import { testAppDefaultTheme, testAppDefaultDarkTheme } from './src/styles/theme';
import Home from './src/pages/home';
// Globals (fonts, etc)
const sequel100Wide = Platform.OS == 'ios' ? 'Sequel100Wide-65' : 'Sequel100Wide-85'
type DrawerParamsList = {
Home: undefined
Videos: undefined
News: undefined
Podcasts: undefined
}
type RootStackParamList = {
Drawer: NavigatorScreenParams<DrawerParamsList>
DetailView: undefined
Search: undefined
config?: undefined
}
const Stack = createNativeStackNavigator()
enableScreens()
export default function App(props: any) {
// To override login functionality
const bypassLogin = false
const clearOnRestart = false
const CustomApp = () => {
const { clearID, logout, user, emailSMSId, timeExceeded } = useAuth()
const { darkMode, showNavBar } = useTheme()
const navigationRef = useNavigationContainerRef()
const routeNameRef = useRef<string | undefined>('')
// Where we display pre-prompt on login and iOS platform
const checkIosSoftPrompt = async () => {
const deviceState = await OneSignal.getDeviceState()
if (!deviceState?.isSubscribed) {
OneSignal.addTrigger('ios_prompt', 'true')
}
}
const linking: LinkingOptions<RootStackParamList> = {
prefixes: ['testApp://', 'https://testApp.com', 'https://*.testApp.com'],
config: {
screens: {
Drawer: {
initialRouteName: 'Home',
screens: {
Videos: 'tv',
News: 'news',
Podcasts: 'podcasts',
Home: ''
}
},
DetailView: {
path: ':category?/:type/:slug',
},
Search: {
path: 'search',
}
}
},
}
const HeaderComponent = (props: any) => <MainHeader {...props} />
useEffect(() => {
if (bypassLogin && user) logout()
/* if ((bypassLogin || (user || emailSMSId)) && Platform.OS == 'ios') {
checkIosSoftPrompt()
} */
// More aggressive targeting for Pre-Prompt message
if (Platform.OS === 'ios' && (emailSMSId)) checkIosSoftPrompt();
}, [bypassLogin, user, emailSMSId])
useEffect(() => {
if (clearOnRestart) clearID()
}, [])
const checkRoutes = async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current?.getCurrentRoute()?.name ?? '';
if (previousRouteName !== currentRouteName) {
await analytics().logScreenView({ screen_name: currentRouteName });
}
// Save the current route name for later comparison
routeNameRef.current = currentRouteName;
}
const setRefs = () => {
routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
}
return(
<SafeAreaProvider>
<StatusBar translucent barStyle={darkMode ? 'light-content' : 'dark-content'} backgroundColor="transparent" />
<NavigationContainer
ref={navigationRef}
onReady={ setRefs }
onStateChange={ checkRoutes }
theme={darkMode ? testAppDefaultDarkTheme : testAppDefaultTheme}
linking={linking}
fallback={<FullScreenLoader message='Loading...'/>}
>
{ bypassLogin || !!user || emailSMSId || (timeExceeded != null && !timeExceeded ) ?
<Stack.Navigator
screenOptions={{ header: HeaderComponent, contentStyle:{ backgroundColor: darkMode ? colors.background.darkHeaderBg : colors.background.lightSubdued } }}
>
<Stack.Screen name="Drawer" component={DrawerNavigator} options={{ headerShown: false }} />
{ /* Common screens outside flow of Drawer Navigator */}
<Stack.Screen name="Search" component={Search}
options={{
header: SearchHeader,
headerShown: false,
animation: 'fade_from_bottom',
headerTitle: '',
headerStyle: {
backgroundColor: darkMode ? colors.primary.blue7 : '#fff',
},
contentStyle: {
backgroundColor: darkMode ? colors.primary.blue7 : '#fff',
}
}}
/>
<Stack.Screen name="DetailView" component={DetailView}
options={{
presentation: 'containedModal',
headerShown: false,
contentStyle: {
backgroundColor: darkMode
? colors.primary.blue7
: '#fff',
},
orientation:
Platform.OS === 'ios' ? 'portrait_up' : undefined,
headerBackButtonMenuEnabled: false,
headerBackVisible: false,
headerTitle: ''
}}
/>
</Stack.Navigator>
:
<EmailPhoneCollector />
}
</NavigationContainer>
</SafeAreaProvider>
)
}
// Main app useEffect hook
useEffect(() => {
// Lock orientation with Orientation (rather than React Navigation)
Orientation.lockToPortrait()
// OneSignal initializer
OneSignal.setLogLevel(6, 0);
OneSignal.setAppId("99a9aeab-f82e-49e8-bc40-8f471c7bf1f9");
/* //Prompt for push on iOS
OneSignal.promptForPushNotificationsWithUserResponse((response: any) => { // Replace this for pre-prompt flow
console.log("Prompt response:", response);
}); */
//Method for handling notifications received while app in foreground
OneSignal.setNotificationWillShowInForegroundHandler(notificationReceivedEvent => {
console.log("OneSignal: notification will show in foreground:", notificationReceivedEvent);
let notification = notificationReceivedEvent.getNotification();
console.log("notification: ", notification);
const data = notification.additionalData
console.log("additionalData: ", data);
// Complete with null means don't show a notification.
notificationReceivedEvent.complete(notification);
});
//Method for handling notifications opened
OneSignal.setNotificationOpenedHandler((notification) => {
// console.log("OneSignal: notification opened:", notification);
});
}, [])
return (
<AuthContextProvider>
<ThemeContextProvider>
<CustomApp />
</ThemeContextProvider>
</AuthContextProvider>
);
}
const styles = StyleSheet.create({
drawerIcon: {
width: 30,
height: 30,
}
})
DrawerNavigator:
import React, { useEffect, useState } from 'react';
import { Linking, View, TouchableOpacity, Platform } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { SafeAreaView } from 'react-native-safe-area-context';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { Divider, Switch } from 'react-native-elements';
import { DrawerContentScrollView, DrawerItem, DrawerItemList } from '#react-navigation/drawer';
import { colors } from '../../styles/colorPalette';
import { useTheme } from '../../contexts/ThemeContext';
import HomeLogo from './HomeLogo';
import { Button } from 'react-native-elements/dist/buttons/Button';
import Text from '../TextComponents'
// Contexts
import { useAuth } from '../../contexts/AuthContext'
import VersionCheck from 'react-native-version-check';
// Globals (fonts, etc)
const sequel100Wide6585 = Platform.OS == 'ios' ? 'Sequel100Wide-65' : 'Sequel100Wide-85'
export default function DrawerWrapper(props: any) {
const darkMode = useTheme().darkMode;
const { navigation, route, state } = props;
const { appInfo, user, logout } = useAuth();
const goToStore = async () => {
if (Platform.OS == 'ios') {
VersionCheck.getAppStoreUrl({ appID: "1609502829" })
.then(res => {
if (res) {
Linking.canOpenURL(res)
.then(supported => {
console.log('the link: ', res)
supported && Linking.openURL(res)
},
(err) => console.log('Error opening link: ', err)
)
}
})
}
else if (Platform.OS == 'android') {
VersionCheck.getPlayStoreUrl({ packageName: "com.testAppmobile.testApp" })
.then(res => {
if (res) {
Linking.canOpenURL(res)
.then(supported => {
console.log('the link: ', res)
supported && Linking.openURL(res)
},
(err) => console.log('Error opening link: ', err)
)
}
})
}
}
return (
<SafeAreaView style={{flex: 1}} edges={[]}>
<View style={{ flexDirection: "row", padding: 20, alignItems: 'center', alignContent: 'center', marginTop: Platform.OS == 'android' ? 20 : 0 }}>
<TouchableOpacity onPress={() => navigation.closeDrawer()}>
<Icon name="md-close" size={40} color={darkMode ? colors.primary.blue2 : 'black'}/>
</TouchableOpacity>
<HomeLogo />
<TouchableOpacity style={{flexGrow: 1, display: 'none'}}>
<FontAwesome style={{textAlign: 'right'}} name="cog" size={40} color={darkMode ? colors.primary.blue2 : 'black'} />
</TouchableOpacity>
</View>
{ user && <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', paddingHorizontal: 20, paddingBottom: 10}}>
<Text style={{marginRight: 20}}>{user?.username ?? user?.name ?? user?.email}</Text>
<Button title="Logout" titleStyle={{fontSize: 12, textTransform: 'uppercase'}} style={{backgroundColor: 'red'}} onPress={() => logout()}/>
</View>}
<Divider />
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} labelStyle={{fontFamily: sequel100Wide6585}}/>
<DrawerItem
onPress={() => Linking.openURL('https://testApp.com')}
activeBackgroundColor={darkMode ? colors.primary.blue5 : colors.primary.blue1} {...props}
label="testApp.com"
labelStyle={{fontFamily: sequel100Wide6585,
fontWeight: 'normal',
fontSize: 13,
paddingVertical: 15,
color: darkMode ? colors.primary.blue2 : '#000'}} icon={({focused, size, color}) => <FontAwesome size={30} style={{color: darkMode ? '#98D4FF' : "#000", marginLeft: -5}} name="external-link-square"/>}
/>
</DrawerContentScrollView>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{ !!appInfo?.appVersion && <Text variant="h5" style={{ color: darkMode ? '#fff' : '#000', paddingLeft: 10 }}>{`v${appInfo.appVersion}`}</Text> }
{ !!appInfo?.needsUpdate && <Button onPress={goToStore} buttonStyle={{borderRadius: 10, backgroundColor: 'green', marginLeft: 10}} title={<Text variant="h5" style={{color: '#fff'}}>Update Available</Text>} />}
</View>
</SafeAreaView>
)
}
My Home Stack:
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { ActivityIndicator, FlatList, Platform, RefreshControl, RefreshControlProps, StyleSheet, TouchableOpacity, View } from 'react-native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { useHeaderHeight } from '#react-navigation/elements';
import PostCard from '../../components/PostCard';
import FullScreenLoader from '../../components/FullScreenLoading';
import { colors } from '../../styles/colorPalette';
import { useTheme } from '../../contexts/ThemeContext';
import LiveVideoCard from '../../components/LiveVideoCard';
import HorizontalCarousel from '../../components/HorizontalCarousel';
import { KeyboardAwareFlatList, KeyboardAwareFlatListProps } from 'react-native-keyboard-aware-scroll-view';
import FooterStack from '../../components/layout/FooterStack';
import PersonDetails from '../../components/PersonDetails';
import Text from '../../components/TextComponents';
import NoResults from '../../components/NoResults';
import Animated, { enableLayoutAnimations, FadeIn, Layout } from 'react-native-reanimated';
const Home = (props: any) => {
const { navigation } = props;
const darkMode = useTheme().darkMode;
const headerHeight = useHeaderHeight();
const Stack = createNativeStackNavigator();
const styles = StyleSheet.create({
button: {
backgroundColor: 'transparent',
borderRadius: 50,
flex: 1,
width: 120,
height: 40,
marginHorizontal: 10,
},
container: {
flexGrow: 1,
flex: 1,
},
image: {
height: 300,
resizeMode: 'contain',
},
logo: {
height: 100,
width: '100%',
resizeMode: 'contain',
},
posts: {
borderStyle: 'solid',
borderWidth: 5,
borderColor: 'red',
},
subtitle: {
fontSize: 12,
marginTop: 3,
color: '#777777',
flex: 1,
},
title: {
fontSize: 24,
fontWeight: 'bold',
flex: 1,
},
videoContainer: {
position: 'relative',
height: 300,
marginVertical: 25,
flex: 1,
},
watchMore: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
borderStyle: 'solid',
borderColor: 'rgba(0,0,0,0.25)',
},
});
const HomeHeader = React.memo(() => {
const darkMode = useTheme().darkMode
return (
<>
<LiveVideoCard />
<View>
<View style={[styles.watchMore, { backgroundColor: darkMode ? colors.background.darkBg : '#fff' }]}>
<Text style={{color: darkMode ? '#fff' : '#000', fontSize: 15, fontWeight: 'bold'}}>
Watch
</Text>
<TouchableOpacity onPress={() => navigation.navigate('Videos')}>
<Text style={{color: darkMode ? colors.primary.blue2 : colors.primary.blueMain, fontWeight: 'bold', fontSize: 14}}>
Watch More
</Text>
</TouchableOpacity>
</View>
<HorizontalCarousel />
</View>
</>
)
}, (prev, next) => {
return true
})
const FooterItem = React.memo(() => {
const darkMode = useTheme().darkMode
return(
<View style={{paddingBottom: 100}}>
<Text variant="h6" style={{alignSelf: 'center', color: darkMode ? '#fff' : '#000'}}>Loading more posts...</Text>
<ActivityIndicator size={'large'} color={darkMode ? '#fff' : '#777'} style={{ paddingVertical: 20 }} />
</View>
)}, () => true)
const renderItem = useCallback((props: any) => {
return (
<PostCard data={props.item.node} categoryOverlay="Home" index={props.index} navigation={navigation} />
)
}, [])
const CustomRefreshControl = (props: RefreshControlProps) => {
const darkMode = useTheme().darkMode
return <RefreshControl
progressViewOffset={headerHeight}
refreshing={props.refreshing}
onRefresh={props.onRefresh}
tintColor={darkMode ? '#fff' : '#000'}
titleColor={darkMode ? '#fff' : '#000'}
/>
}
const HomeComponent = useCallback(() => {
const [data, setData] = useState([]);
const flatlistRef = useRef<FlatList>(null)
const onEndReachedCalledDuringMomentum = useRef(false)
const [loading, setLoading] = useState(true);
const [pageNum, setPageNum] = useState(0);
const [refreshing, setRefreshing] = useState(false);
const controller = new AbortController()
const fetchData = async (newPageNum?: number) => {
if (newPageNum !== 0 && newPageNum == pageNum) return console.log("They're the same")
const timer = setTimeout(() => {
controller?.abort()
}, 10000)
try {
// Here is where we try to fetch data
const videos = await fetch(
`https://home.testApp.com/m/shows/latest?page=${newPageNum ?? pageNum}`,
{
method: 'GET',
mode: 'cors',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'User-Agent': 'testApp/2.0'
},
signal: controller.signal
}
);
const json = await videos
.json()
.catch((e: any) =>
console.log('this is an error in the json output: ', e),
);
clearTimeout(timer)
setData(data.concat(json.nodes));
if (!!newPageNum) setPageNum(newPageNum)
} catch (e) {
// Manage the errors here
console.log('Error returning from testApp videos: ', e);
} finally {
if (newPageNum === 0 || !!loading) setLoading(false)
if (!!refreshing) setRefreshing(false)
controller?.abort()
}
};
const keyExtractor = (item: any, idx: number) => {
return `${item.node.nid}-${idx}`
};
const handleLoadMore = async (props: any) => {
if (onEndReachedCalledDuringMomentum.current === true) return console.log('momentum blocked')
fetchData(pageNum + 1)
onEndReachedCalledDuringMomentum.current = true
}
const handleRefresh = async () => {
setRefreshing(true);
setLoading(true);
setData([]);
fetchData(0);
setRefreshing(false)
}
const _onMomentumScrollBegin = () => {
onEndReachedCalledDuringMomentum.current = false
}
useEffect(() => {
// This is where we fetch the data from the website
if (loading) fetchData();
// Pass ref to navigation object for scrollTo logic
navigation.setOptions({
homeScrollRef: flatlistRef
})
return () => controller?.abort()
}, []);
if (!!loading) return <FullScreenLoader message={'Loading Home posts'} />
return (
<FlatList
ref={flatlistRef}
contentContainerStyle={{marginTop: headerHeight ?? undefined }}
style={{flex: 1 }}
scrollIndicatorInsets={{ right: 1 }}
showsVerticalScrollIndicator={false}
initialNumToRender={5}
maxToRenderPerBatch={15}
windowSize={15}
data={data}
keyExtractor={keyExtractor}
ListEmptyComponent={<NoResults />}
ListHeaderComponent={HomeHeader}
ListFooterComponent={FooterItem}
renderItem={renderItem}
onEndReached={handleLoadMore}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={_onMomentumScrollBegin}
scrollEventThrottle={16}
refreshControl={<CustomRefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
/>}
/>
)
}, [])
return (
<Stack.Navigator screenOptions={{ orientation: Platform.OS === 'ios' ? 'portrait_up' : 'portrait_up', headerShown: false, contentStyle: { backgroundColor: darkMode ? colors.background.darkHeaderBg : colors.background.lightSubdued }}}>
<Stack.Screen name="HomeView" options={{title: 'Home' }} component={HomeComponent} />
<Stack.Screen name="FooterLinks" component={FooterStack} />
</Stack.Navigator>
);
}
export default Home

Answer 1

try disable animation on android
import { enableLayoutAnimations } from "react-native-reanimated";
if (Platform.OS === 'android') {
enableLayoutAnimations(false);
}