No back animations on iOS, instant transitions only

Workaround found:

The problem was I was using use_frameworks! in my Podfile. The exact line I had was use_frameworks! :linkage => :static This was because the new react-native-firebase libraries (15.x.x) required this (all react-native-firebase > 14.x.x). For some reason this also made back animations stopped working.

I fixed this by downgrading react-native-firebase to 14.11.1 and removing use_frameworks! from my Podfile. Then I deleted the pods folder and reinstalled. Everything now works.

Description

UPDATE:

• To fully replicate you must copy over the Podfile

UDPATE:

• Appears to have something to do with using an Animated.View SplashScreen component, using a regular View doesn’t interfere with the transitions

I updated to react native 0.69.1 and then I found that I no longer get back animations, the view in front disappears instantly.

• I’ve tried using both useNavigation() and ({navigation}) in the screens arguments to trigger goBack(). There’s still no transition animation either way
• Swiping the page off works fine
• If I enable headerShown: true then using the native back button on iOS plays the animations as normal
• I’ve downgraded back to react native 0.68 and I’ve still go the same issue

It’s the same issue as https://github.com/software-mansion/react-native-screens/issues/1356

Screenshots

https://user-images.githubusercontent.com/21344181/179496474-6fa6c511-49ea-443e-9be7-33a027597716.MP4

Steps To Reproduce

1. Go back using goBack() (as opposed to a native back button).

Expected behavior

The transition should just play as normal

Actual behavior

There is no back animation when using goBack()

Reproduction

UPDATE: Reproduce this issue with the following code:

App.tsx

import * as React from 'react';
import {useEffect, useState} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import Animated, {FadeOut} from 'react-native-reanimated';

const MainStack = createNativeStackNavigator();

function App() {
  const [userLoading, setUserLoading] = useState(true);

  useEffect(() => {
    setUserLoading(false);
  }, []);

  // Just show a splashscreen if either are loading
  if (userLoading) {
    return <SplashScreen />;
  }

  return (
    <NavigationContainer>
      <MainStack.Navigator>
        <MainStack.Screen name={'FirstScreen'} component={FirstScreen} />
        <MainStack.Screen name='SecondScreen' component={SecondScreen} />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}

const FirstScreen = ({navigation}: any) => {
  return (
    <View style={{flex: 1, alignContent: 'center', justifyContent: 'center'}}>
      <TouchableOpacity
        style={{backgroundColor: 'cyan', padding: 20}}
        onPress={() => navigation.navigate('SecondScreen')}
      >
        <Text>Go forward</Text>
      </TouchableOpacity>
    </View>
  );
};

const SecondScreen = ({navigation}: any) => {
  return (
    <View style={{flex: 1, alignContent: 'center', justifyContent: 'center'}}>
      <TouchableOpacity
        style={{backgroundColor: 'magenta', padding: 20}}
        onPress={() => navigation.goBack()}
      >
        <Text>Go Back</Text>
      </TouchableOpacity>
    </View>
  );
};

const SplashScreen = () => {
  return (
    <Animated.View
      style={{
        backgroundColor: 'black',
        flex: 1,
      }}
      exiting={FadeOut}
    />
  );
};

export default App;

Podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '13.0'
use_frameworks! :linkage => :static

target 'flashingscreens' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => true,
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'flashingscreensTests' do
    inherit! :complete
    # Pods for testing
  end

 post_install do |installer|

    # https://github.com/facebook/react-native/issues/32451
    installer.pods_project.targets.each do |target|
      if target.name == 'RCT-Folly'
        target.build_configurations.each do |config|
          config.build_settings['HEADER_SEARCH_PATHS'] = "$(inherited) ${PODS_ROOT}/fmt/include"
        end
      end
    end
    
end 
end

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Architecture

• Paper
• Fabric

Workflow

• Managed workflow
• Bare workflow

Package versions

“@react-navigation/native”: “^6.0.11”, “@react-navigation/native-stack”: “^6.7.0”,

package	version
react-native	0.69.1
@react-navigation/native	6.0.11
@react-navigation/native-stack	6.7.0
react-native-screens	3.13.1
react-native-safe-area-context	4.3.1
react-native-gesture-handler	2.4.2
react-native-reanimated	2.9.1

I have tried earlier versions of react, react native, reanimated, native-stack

[kkafar]

I’ll try to look into it

[austin43]

This issue is effectively blocking people who use react-native-firebase from upgrading to >= rnfb@15 and subsequently >= rn@0.69. As the firebase-ios-sdk is not planning to remove use_frameworks, the only way forward for folks in this situation is to resolve why use_frameworks causes a break in animations. Can this be re-opened @kkafar?