0.8.2

dist/components/common-components/Modal/Modal.jsx

@@ -14,27 +14,20 @@ exports.default = (0, react_misc_1.memo)("Modal", ({ animated = true, backdropSt
     const { height, width } = (0, hooks_with_contexts_1.useWindowDimensions)();
     const { colors } = (0, contexts_1.useThemeExtended)();
     const keyboardHeight = (0, contexts_1.useAnimatedKeyboard)();
-    const opacity = (0, react_native_reanimated_1.useSharedValue)(animated ? 0 : 1);
     const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         return {
-            opacity: opacity.value,
             transform: [
                 { translateY: -keyboardHeightFactor * keyboardHeight.value }
             ]
         };
-    }, [keyboardHeight, keyboardHeightFactor, opacity]);
-    // Back handler
+    }, [keyboardHeight, keyboardHeightFactor]);
     (0, hooks_1.useBackHandler)(() => {
         onClose();
         return true;
     });
-    // Fade in
-    (0, react_misc_1.useRealEffect)(() => {
-        if (animated)
-            opacity.value = (0, react_native_reanimated_1.withTiming)(1);
-    }, []);
     return (<react_misc_1.RenderTimeLogger name={name}>
         <react_native_reanimated_1.default.View {...typescript_misc_1.o.removeUndefinedKeys({
+        entering: animated ? react_native_reanimated_1.FadeIn : undefined,
         exiting: animated ? react_native_reanimated_1.FadeOut : undefined,
         style: animatedStyle
     })}>

es/components/common-components/Modal/Modal.jsx

@@ -1,37 +1,30 @@
 import { AlignItems, JustifyContent, Position } from "../../../types";
 import { ParentKeyboardHeightFactorProvider, useAnimatedKeyboard, useThemeExtended } from "../../../contexts";
 import { Pressable, View } from "react-native";
-import { RenderTimeLogger, memo, useRealEffect } from "react-misc";
+import { RenderTimeLogger, memo } from "react-misc";
 import { fn, o } from "typescript-misc";
-import Animated, { FadeOut, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import Animated, { FadeIn, FadeOut, useAnimatedStyle } from "react-native-reanimated";
 import React from "react";
 import { useBackHandler } from "../../../hooks";
 import { useWindowDimensions } from "../../../hooks-with-contexts";
 export default memo("Modal", ({ animated = true, backdropStyle, children, containerStyle, keyboardHeightFactor = 0.5, name, onClose = fn.noop, overlayStyle }) => {
     const { height, width } = useWindowDimensions();
     const { colors } = useThemeExtended();
     const keyboardHeight = useAnimatedKeyboard();
-    const opacity = useSharedValue(animated ? 0 : 1);
     const animatedStyle = useAnimatedStyle(() => {
         return {
-            opacity: opacity.value,
             transform: [
                 { translateY: -keyboardHeightFactor * keyboardHeight.value }
             ]
         };
-    }, [keyboardHeight, keyboardHeightFactor, opacity]);
-    // Back handler
+    }, [keyboardHeight, keyboardHeightFactor]);
     useBackHandler(() => {
         onClose();
         return true;
     });
-    // Fade in
-    useRealEffect(() => {
-        if (animated)
-            opacity.value = withTiming(1);
-    }, []);
     return (<RenderTimeLogger name={name}>
         <Animated.View {...o.removeUndefinedKeys({
+        entering: animated ? FadeIn : undefined,
         exiting: animated ? FadeOut : undefined,
         style: animatedStyle
     })}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-misc",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": false,
   "description": "React Native library",
   "keywords": [