I am trying to navigate from one modal to another, navigation happens fine but no content is showing on the second modal on iOS. Please be kind I am new to React Native.
first modal
import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
import { StyleSheet, View, Modal, TouchableOpacity, Text } from 'react-native';
import { useFetchDisclaimer } from 'hooks';
import { showPlanBuild, showWorkoutAnimation } from 'navigation/Actions';
import { PlanSchedule, WorkoutInterface } from 'reduxStore';
import { Disclaimer as DisclaimerDetail } from 'components/Disclaimer';
import { NavBackButton } from 'components/common'
import { isSmallDevice } from 'extra/helpers.extra'
import { kubo_white, BodyText } from '/constants';
import { useHomeWorkoutDisclaimerShown } from 'hooks/homeworkouts';
const renderLarge = !isSmallDevice()
// todo: clean this class, move style to styles
export interface DisclaimerProps {
navigation: any;
schedule: PlanSchedule;
workout: WorkoutInterface;
}
export const Disclaimer: FC<DisclaimerProps> = ({
navigation,
schedule, workout
}) => {
const { data } = useFetchDisclaimer();
const { setHomeWorkoutDiclaimerShown } = useHomeWorkoutDisclaimerShown()
const [isVisible, setIsVisible] = useState<boolean>(true)
useEffect(() => {
navigation.setOptions({
headerShown: schedule !== undefined,
headerTitle: '',
headerLeft: () => {
return (schedule &&
<NavBackButton onPress={() => navigation.goBack()} />)
}
});
}, [])
const planDisclaimer = (
<View style={{ height: '100%', backgroundColor: kubo_white }}>
<DisclaimerDetail data={data!}
onClick={() => { showPlanBuild(navigation, schedule) }} />
</View>
)
const homeWorkoutDisclaimer = (
<Modal transparent={true}
animationType={'slide'}
visible={isVisible}
>
<View style={{ flex: 1, backgroundColor: kubo_white }}>
<TouchableOpacity onPress={() => {
navigation.goBack()
setIsVisible(false)
}}>
<Text style={styles.closeButton}>Close</Text>
</TouchableOpacity>
<DisclaimerDetail data={data!}
onClick={() => {
navigation.pop()
setHomeWorkoutDiclaimerShown(true)
setIsVisible(false)
showWorkoutAnimation(navigation, workout)
}} />
</View>
</Modal>
)
return (
<>{schedule ? planDisclaimer : homeWorkoutDisclaimer}</>
);
};
const styles = StyleSheet.create({
closeButton: {
...BodyText,
marginLeft: 12,
marginTop: renderLarge ? 36 : 20,
paddingHorizontal: 12,
paddingVertical: 12
},
});
second modal
import { HeadingText, InterMedium, border, kubo_white, black_alpha10 } from '/constants';
import React, { FC, useEffect, useState } from 'react'
import { Animated, View, Dimensions, Modal, StyleSheet, ImageBackground, Text, Easing, LayoutAnimation, UIManager, Platform } from 'react-native'
import { ScreenProps } from './types';
const deviceWidth = Dimensions.get('window').width
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
export const WorkoutStartAnimation: FC<ScreenProps> = ({ navigation, route }) => {
const [expanded, setExpanded] = useState(false);
const workout = route?.params?.workout
const spinner = require('../assets/icons/spinner/spinner.png')
const [contentAppearence, setContentAppearence] = useState(new Animated.Value(0))
const [rotate, setRotate] = useState(new Animated.Value(0))
useEffect(() => {
setTimeout(() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
setExpanded(true)
setTimeout(() => {
Animated.timing(contentAppearence, {
toValue: 1,
duration: 400,
useNativeDriver: true
}).start();
startLoadingSpinner()
}, 400)
}, 100)
setTimeout(() => {
/* TODO: navigate to Workout Player */
navigation.goBack() //remove this when Workout player screen is available
// navigation.pop() //uncomment this to prevent back button open this screen from workout player
console.log('setTimeout called')
}, 2000) /* time out to 2 seconds, then navigate to workout player */
}, [])
const startLoadingSpinner = () => {
Animated.loop(
Animated.timing(rotate, {
toValue: 1,
duration: 600,
easing: Easing.linear,
useNativeDriver: true,
})
).start();
};
const loadingSpinner = rotate.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
return (
<Modal animationType='none' transparent={false}>
<ImageBackground
source={{ uri: workout.image }}
resizeMode='cover'
style={expanded ? styles.imageExpanded : [styles.imageDefault,
Platform.OS === 'android' ? { marginTop: 60 } : { marginTop: 90 }]} >
<Animated.View style={[styles.content, { opacity: contentAppearence }]}>
<View style={styles.detail}>
<Text style={styles.title}>{workout.title}</Text>
<Text style={styles.description}>Get ready to work out!</Text>
</View>
<View style={styles.spinner}>
<Animated.Image source={spinner}
style={{ transform: [{ rotate: loadingSpinner }] }} />
</View>
</Animated.View>
</ImageBackground>
</Modal>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
...HeadingText,
fontSize: 28,
color: kubo_white,
marginHorizontal: 24,
textAlign: 'center',
},
description: {
marginTop: 8,
fontFamily: InterMedium,
lineHeight: 24,
letterSpacing: -0.15,
fontSize: 18,
color: border,
},
detail: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 50,
flex: 1
},
spinner: {
flex: 1,
alignSelf: 'center',
position: 'absolute',
bottom: 120,
},
content: {
flex: 1,
justifyContent: 'center',
backgroundColor: black_alpha10,
},
imageDefault: {
width: deviceWidth,
height: 260
},
imageExpanded: {
width: '100%',
height: '100%'
}
});
Any way to fix this?
question from:
https://stackoverflow.com/questions/66055619/react-native-modal-shows-blank-screen-when-navigating-from-another-modal-in-ios