How do we remove the opacity in animation config (working slide in and out modal example)

[AyoCodess]

i'm trying to rebuild the IOS native modal using this library, so the android app can feel the same as the IOS. The only thing left to do is to remove the opacity transitions as the modal slides in and out, can anyone help?

can anyone help?

function BaseModal({ children }: { children: React.ReactNode }) {
  return (
    <View style={{
      zIndex: 1000,
      backgroundColor: '#ffffff',
      borderTopLeftRadius: 10,
      borderTopRightRadius: 10,
      minHeight: '50%',
      width: '100%',
      height: Dimensions.get('window').height * 0.9,
      marginTop: 'auto',
    }}>
      <View style={{
        width: 36,
        height: 5,
        backgroundColor: '#E0E0E0',
        borderRadius: 3,
        marginTop: 8,
        alignSelf: 'center',
      }} />
      <View style={{
        flex: 1,
        padding: 16,
      }}>
        <View style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          paddingHorizontal: 16,
        }}>
          {children}
        </View>
      </View>
    </View>
  );
}


function TestModal({ modal }: ModalComponentProp<typeof modalOptions>) {
  return (
    <BaseModal>
      <Text style={{
        fontSize: 20,
        fontWeight: '600',
        marginBottom: 12,
      }}>Test Modal</Text>
      <Text style={{
        fontSize: 16,
        textAlign: 'center',
        marginBottom: 24,
        color: '#666',
      }}>This is a test modal with iOS-like appearance</Text>
      <TouchableOpacity
        style={{
          backgroundColor: '#007AFF',
          paddingHorizontal: 24,
          paddingVertical: 12,
          borderRadius: 8,
        }}
        onPress={() => modal.closeModal()}
      >
        <Text style={{
          color: '#ffffff',
          fontSize: 16,
          fontWeight: '600',
        }}>Close Modal</Text>
      </TouchableOpacity>
    </BaseModal>
  )
}


// Modal configuration with iOS-like animations
export const modalOptions = {
  position: 'bottom' as const,
  backdropOpacity: 0.4,
  backdropColor: '#000000',
  disableFlingGesture: false,
  backdropAnimationDuration: 300,

  animateInConfig: {
    easing: Easing.out(Easing.cubic),
    duration: 300,
  },

  animateOutConfig: {
    easing: Easing.in(Easing.cubic),
    duration: 250,
  },

  transitionOptions: (animatedValue: Animated.Value) => ({
    transform: [{
      translateY: animatedValue.interpolate({
        inputRange: [0,1],
        outputRange: [300,0],
      })
    }],
  }),
};

export const ModalConfig = {
  TestModal: TestModal,
  OnboardingMagicRatioModal: OnboardingMagicRatioModal,
  privacyPolicyModal: PrivacyPolicyModal,
};

export const modalStack = createModalStack(ModalConfig,modalOptions);

[LukasMod]

Hi,
I also needed to disable opacity from modals to animate with just slide + opacity backdrop. All I had to do was discard the passed opacity style to the View modal (same opacity controlls both backdrop and modal). I prepared a patch that does this. It would be nice to have such an option appear in the config @CharlesMangwa 🙏

react-native-modalfy+3.5.5.patch

diff --git a/node_modules/react-native-modalfy/src/lib/ModalStack.tsx b/node_modules/react-native-modalfy/src/lib/ModalStack.tsx
index 6eb20bb..7ab059c 100644
--- a/node_modules/react-native-modalfy/src/lib/ModalStack.tsx
+++ b/node_modules/react-native-modalfy/src/lib/ModalStack.tsx
@@ -144,7 +144,7 @@ const ModalStack = <P extends ModalfyParams>(props: Props<P>) => {
     <Animated.View
       style={[
         styles.container,
-        { opacity, transform: [{ translateY }] },
+        {  transform: [{ translateY }] },
         Platform.OS === 'web' && stack.openedItems.size ? styles.containerWeb : null,
       ]}>
       {renderBackdrop()}