@rific/auto-paper 0.9.4 → 0.9.5

package/dist/index.js

@@ -691,7 +691,9 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
   const onChangeRef = (0, import_react7.useRef)(onChange);
-  onChangeRef.current = onChange;
+  (0, import_react7.useEffect)(() => {
+    onChangeRef.current = onChange;
+  });
   const prevSettings = (0, import_react7.useRef)(settings);
   (0, import_react7.useEffect)(() => {
     if (prevSettings.current !== settings) {
@@ -756,18 +758,20 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const opacity = (0, import_react9.useRef)(new import_react_native5.Animated.Value(visible ? 1 : 0)).current;
+  const [opacity] = (0, import_react9.useState)(() => new import_react_native5.Animated.Value(visible ? 1 : 0));
   const [mounted, setMounted] = (0, import_react9.useState)(visible);
+  if (visible && !mounted) {
+    setMounted(true);
+  }
   (0, import_react9.useEffect)(() => {
     if (visible) {
-      setMounted(true);
       import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
       import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
-  }, [visible]);
+  }, [visible, opacity, scale]);
   (0, import_react9.useEffect)(() => {
     if (!visible) return void 0;
     const onHardwareBackPress = () => {

package/dist/index.mjs

@@ -417,7 +417,7 @@ import { StyleSheet as StyleSheet4, TouchableOpacity, View as View4 } from "reac
 import { Icon, TouchableRipple, useTheme as useTheme4 } from "react-native-paper";
 
 // src/components/Dialog.tsx
-import React, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import React, { useEffect as useEffect3, useState as useState4 } from "react";
 import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Dialog as PaperDialog, Portal, useTheme as useTheme3 } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -609,7 +609,9 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
   const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  useEffect2(() => {
+    onChangeRef.current = onChange;
+  });
   const prevSettings = useRef(settings);
   useEffect2(() => {
     if (prevSettings.current !== settings) {
@@ -674,18 +676,20 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = useSafeAreaInsets();
-  const opacity = useRef2(new Animated.Value(visible ? 1 : 0)).current;
+  const [opacity] = useState4(() => new Animated.Value(visible ? 1 : 0));
   const [mounted, setMounted] = useState4(visible);
+  if (visible && !mounted) {
+    setMounted(true);
+  }
   useEffect3(() => {
     if (visible) {
-      setMounted(true);
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
-  }, [visible]);
+  }, [visible, opacity, scale]);
   useEffect3(() => {
     if (!visible) return void 0;
     const onHardwareBackPress = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -76,6 +76,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-package-json": "^1.0.0",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
     "expo-blur": "^56.0.3",

package/src/ThemeProvider.tsx

@@ -49,7 +49,9 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
   }, [])
 
   const onChangeRef = useRef(onChange)
-  onChangeRef.current = onChange
+  useEffect(() => {
+    onChangeRef.current = onChange
+  })
   const prevSettings = useRef(settings)
   useEffect(() => {
     if (prevSettings.current !== settings) {

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentType, type ReactNode, useEffect, useRef, useState } from 'react'
+import React, { type ComponentType, type ReactNode, useEffect, useState } from 'react'
 import { Animated, BackHandler, Easing, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Dialog as PaperDialog, type DialogActionsProps, type DialogContentProps, type DialogProps as PaperDialogProps, type DialogScrollAreaProps, type DialogTitleProps, Portal, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -46,19 +46,22 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme
   const { scale } = theme.animation
   const { bottom, left, right, top } = useSafeAreaInsets()
-  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
+  const [opacity] = useState(() => new Animated.Value(visible ? 1 : 0))
   const [mounted, setMounted] = useState(visible)
 
+  if (visible && !mounted) {
+    setMounted(true)
+  }
+
   useEffect(() => {
     if (visible) {
-      setMounted(true)
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start()
     } else {
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false)
       })
     }
-  }, [visible])
+  }, [visible, opacity, scale])
 
   useEffect(() => {
     if (!visible) return undefined

package/src/useComputedTheme.ts

@@ -147,6 +147,7 @@ export function useComputedTheme(appearance: ThemeAppearance, color: string | Tr
   }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: first render must stay theme-less (README's onReady/splash-screen contract) and Appearance must not be read during render (SSR/hydration risk)
     computeTheme()
   }, [computeTheme])