React Native Modal shows blank screen when navigating from another Modal in iOS

Question

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

Answer 1

Waitting for answers