Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After opening any modal after fullscreen modal, views are changed without animation #1819

Open
tboba opened this issue Jul 11, 2023 · 1 comment
Labels
Area: Modal Issue related with iOS modal stack presentation Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@tboba
Copy link
Member

tboba commented Jul 11, 2023

Description

After trying to nest any modal to fullscreen modal, application doesn't display any animation (views are changed immediately).

Nesting.any.modal.to.fullscreen.modal.mov

(in the preview, fullscreen modal is represented as transparent modal)

Steps to reproduce

import React from 'react';
import {Button, View} from 'react-native';
import {NavigationContainer, ParamListBase} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from 'react-native-screens/native-stack';

import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler';

const Stack = createNativeStackNavigator();

function Main({
  navigation,
}: {
  navigation: NativeStackNavigationProp<ParamListBase>;
}) {
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <Button title="Open modal" onPress={() => navigation.navigate('ModalFullscreen')} />
    </ScrollView>
  );
}

function Modal({
  navigation,
}: {
  navigation: NativeStackNavigationProp<ParamListBase>;
}) {
  return (
    <View style={{backgroundColor: 'bisque'}}>
      <Button title="Open modal" onPress={() => navigation.navigate('Modal')} />
      <Button
        title="Open transparent modal"
        onPress={() => navigation.navigate('ModalFullscreen')}
      />
      <Button
        title="Open contained modal"
        onPress={() => navigation.navigate('ModalContained')}
      />
    </View>
  );
}

export default function App() {
  return (
      <GestureHandlerRootView style={{flex: 1}}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            fullScreenSwipeEnabled: true,
            stackAnimation: 'fade_from_bottom',
            customAnimationOnSwipe: true,
            headerLargeTitle: true,
            // headerTranslucent: true,
          }}>
          <Stack.Screen name="Main" component={Main} />
          <Stack.Screen
            name="Modal"
            component={Modal}
            options={{stackPresentation: 'modal'}}
          />
          <Stack.Screen
            name="ModalFullscreen"
            component={Modal}
            options={{stackPresentation: 'fullScreenModal'}}
          />
          <Stack.Screen
            name="ModalContained"
            component={Modal}
            options={{stackPresentation: 'containedModal'}}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
   );
}
  1. Create a screen that opens fullscreen modal.
  2. In this view add an option to open any desired modal (eg. modal / contained modal).
  3. Launch an application and try to open modal inside a fullscreen modal.

Snack or a link to a repository

https://github.com/software-mansion/react-native-screens/blob/%40tboba/issue1819-test/FabricTestExample/src/Test1819.tsx

Screens version

3.22.1

React Native version

0.72.0-rc.5

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 PRo (iOS 16.4)

Acknowledgements

Yes

@github-actions github-actions bot added Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario labels Jul 11, 2023
@github-actions
Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@github-actions github-actions bot added Platform: iOS This issue is specific to iOS and removed Missing info The user didn't precise the problem enough labels Jul 11, 2023
@tboba tboba added Area: Modal Issue related with iOS modal stack presentation Repro provided A reproduction with a snack or repo is provided and removed Missing repro This issue need minimum repro scenario labels Jul 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Modal Issue related with iOS modal stack presentation Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

No branches or pull requests

1 participant