배경이 보이는 모달 화면은 개인적으로 좋아합니다.
이번에는 그 작성 방법을 소개합니다.

사용 라이브러리

@react-navigation/stack

@react-navigation/native

react-native-safe-area-context

react-native-linear-gradient

styled-components

투명한 모달 페이지(외부 테두리) 만들기

const TransparentModalPage: React.FunctionComponent = ({ children }) => {
  const navigation = useNavigation();
  return (
    <LinearGradient
      colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.9)']}
      style={{ flex: 1 }}
    >
      <TouchableWithoutFeedback
        style={{ flex: 1, alignSelf: 'stretch' }}
        onPress={() => navigation.goBack()}
      >
        <View style={{ flex: 1 }} />
      </TouchableWithoutFeedback>

      <View style={{ justifyContent: 'center' }}>{children}</View>
    </LinearGradient>
  );
};

ToucableWithoutFeedback 의 부분에서, 아이 요소의 모달 컨텐츠 ( children ) 이외를 탭했을 경우에, 페이지를 닫도록(듯이) 설정하고 있습니다.

모달 콘텐츠 만들기

const RoundView = styled(View)`
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: 'rgba(255,255,255,1)';
`;

export const ModalCard: React.FunctionComponent = ({ children }) => {
  return (
    <RoundView>
      <View style={{ paddingVertical: 16 }}>
        <View
          style={{
            alignSelf: 'center',
            width: 50,
            borderBottomWidth: 3,
            borderBottomColor: 'rgba(0,0,0,1)',
            borderRadius: 8,
          }}
        />
      </View>

      <View style={{ paddingHorizontal: 32, paddingBottom: 32 }}>
        {children}
      </View>

      {/* To avoid a typescript error. */}
      <SafeAreaView>
        <></>
      </SafeAreaView>
    </RoundView>
  );
};

SafeAreaView 는 모달 부분이 너무 낮게 막히지 않도록 제어합니다.

SafeAreaView 있음/없음

화면 구성 요소 만들기

const ModalScreen = () => (
  <TransparentModalPage>
    <ModalCard>
      <View
        style={{ height: 50, alignItems: 'center', justifyContent: 'center' }}
      >
        <Text>Modal Area</Text>
      </View>
    </ModalCard>
  </TransparentModalPage>
);

만든 TransparentModalPage , ModalCard 에 자식 요소를 설정하기만 하면 됩니다.

네비게이터 화면 만들기

const Stack = createStackNavigator();
const StackNavigator = () => {
  return (
    <Stack.Navigator mode="modal" headerMode="screen">
      ...
      <Stack.Screen
        name="ModalScreen"
        component={ModalScreen}
        options={{
          headerShown: false,
          cardStyle: { backgroundColor: 'transparent', opacity: 1 },
        }}
      />
    </Stack.Navigator>
  );
};

ModalScreen 의 화면 옵션은 cardStyle 에서 배경을 투명하게 설정합니다.
이 설정이 없으면 모달 화면에 그라데이션이 걸리지만 배경이 표시되지 않습니다.

이것으로 설정이 완료됩니다.

결론

여기에서는 소개하지 않았습니다만, Animation 이나 GestureHandler 를 사용하면, 보다 「어플리 같다」거동을 시킬 수 있습니다.
조합에 따라 다양한 모달 화면을 만들 수 있으므로 꼭 시도해보십시오.