fix(Android): modal insets not applying

[alduzy]

Description

This PR fixes the insets not applying on modal screens.
I brought back the missing logic, that was removed here to InsetsObserverProxy

Note: Without this change the insets are applied correctly after navigating to a screen with presentation: formSheet at least once.

Changes

• removed unused unregister fun from InsetsObserverProxy
• added unregisterOnView that resembles the previously removed logic

Screenshots / GIFs

Before

After

Test code and steps to reproduce

• use Stack Presentation in the Example app
• set headerShown: false for the modal screen
• open the modal screen

Checklist

• Ensured that CI passes

[kkafar]

The changes look promising, however let's make sure we test this change on various stackPresentation & combinations. Also it might be important to test this in bottom-tabs environment.

Please confirm if you have tested these cases.

[alduzy]

@kkafar tested it with Example app's "Stack Presentation" and "Bottom tabs and native stack" + some test cases and can confirm it works as expected.

[kkafar]

I'm still worried, that removing InsetObserverProxy from the decor view might interfere with formSheet presentation.

Imagine case where you have tab navigator, each screen is a native stack, you present formSheet in one of them & open keyboard. I see it not working. I'll try to test it as well before merging.

[alduzy]

@kkafar I prepared a snack that can be used to test that:

snack

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import React from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';

type StackParams = {
  Home: undefined;
  Sheet: undefined;
  Modal: undefined;
  Tab?: undefined;
};

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const InnerStack = createNativeStackNavigator<StackParams>();

function HomeScreen({
  navigation,
}: {
  navigation: NativeStackNavigationProp<StackParams>;
}) {
  return (
    <View style={styles.container}>
      <Button title="Open sheet" onPress={() => navigation.navigate('Sheet')} />
      <Button title="Open modal" onPress={() => navigation.navigate('Modal')} />
    </View>
  );
}

function InputScreen({
  navigation,
}: {
  navigation: NativeStackNavigationProp<StackParams>;
}) {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>This is a screen</Text>
      <TextInput placeholder="Input something" />
      <Button title="Dismiss" onPress={() => navigation.popTo('Home')} />
    </View>
  );
}

function InnerStackNavigator() {
  return (
    <InnerStack.Navigator>
      <InnerStack.Screen name="Home" component={HomeScreen} />
      <InnerStack.Screen
        name="Modal"
        component={InputScreen}
        options={{ presentation: 'modal' }}
      />
      <InnerStack.Screen
        name="Sheet"
        component={InputScreen}
        options={{ presentation: 'formSheet' }}
      />
    </InnerStack.Navigator>
  );
}

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Inner Stack" component={InnerStackNavigator} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tab" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
    marginBottom: 16,
    textAlign: 'center',
  },
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: 'mediumseagreen',
  },
});

[kkafar]

Quickly tested this, did not saw any regression, however this is sensitive code, which I do not understand completely.

We need to do some deeper research on inset management in our apps.