Merge pull request #3 from gotnoklu/revert-2-fix/remove-default-props

Revert "Remove default props in `ToastableWrapper` to prevent warning"

Author: gotnoklu

src/components/ToastableWrapper.tsx

@@ -19,6 +19,20 @@ import type {
 } from '../types';
 import { useConstructor } from '../hooks';
 
+const defaultProps: ToastableWrapperProps = {
+  animationInTiming: 600,
+  animationOutTiming: 600,
+  useNativeDriver: false,
+  isVisible: false,
+  panResponderThreshold: 4,
+  swipeThreshold: 100,
+  onToasterHide: () => null,
+  onToasterWillHide: () => null,
+  swipeDirection: ['right', 'left', 'up'],
+  onSwipeComplete: () => null,
+  onSwipeStart: () => null,
+};
+
 type ToastableWrapperProps = {
   animationInTiming: number;
   animationOutTiming: number;
@@ -222,21 +236,11 @@ const ANIMATION_MAP: Record<SwipeDirection, AnimatableViewAnimation> = {
 };
 
 export const ToastableWrapper = ({
-  animationInTiming = 600,
-  animationOutTiming = 600,
-  isVisible = false,
-  panResponderThreshold = 4,
-  swipeThreshold = 100,
-  onToasterHide = () => null,
-  onToasterWillHide = () => null,
-  swipeDirection = ['right', 'left', 'up'],
-  onSwipeComplete = () => null,
-  onSwipeStart = () => null,
   ...props
 }: PropsWithChildren<ToastableWrapperProps>) => {
-  const isSwipeable = !!swipeDirection;
+  const isSwipeable = !!props.swipeDirection;
 
-  const [isShown, setIsShown] = useState(isVisible);
+  const [isVisible, setIsVisible] = useState(props.isVisible);
   const pan = useRef(new Animated.ValueXY()).current;
   const contentRef = useRef<AnimatableViewRef>(null);
 
@@ -260,15 +264,15 @@ export const ToastableWrapper = ({
     if (interactionHandle == null) {
       interactionHandle = InteractionManager.createInteractionHandle();
     }
-    content.animate('slideInDown', animationInTiming).then(() => {
+    content.animate('slideInDown', props.animationInTiming).then(() => {
       isTransitioning = false;
 
       if (interactionHandle) {
         InteractionManager.clearInteractionHandle(interactionHandle);
         interactionHandle = null;
       }
 
-      if (!isVisible) {
+      if (!props.isVisible) {
         close();
       }
     });
@@ -287,14 +291,14 @@ export const ToastableWrapper = ({
       return;
     }
 
-    onToasterWillHide?.();
+    props.onToasterWillHide?.();
 
     if (interactionHandle == null) {
       interactionHandle = InteractionManager.createInteractionHandle();
     }
 
     content
-      .animate(ANIMATION_MAP[currentSwipingDirection], animationOutTiming)
+      .animate(ANIMATION_MAP[currentSwipingDirection], props.animationOutTiming)
       .then(() => {
         isTransitioning = false;
 
@@ -303,9 +307,9 @@ export const ToastableWrapper = ({
           interactionHandle = null;
         }
 
-        if (!isVisible) {
-          setIsShown(false);
-          onToasterHide();
+        if (!props.isVisible) {
+          setIsVisible(false);
+          props.onToasterHide();
           return;
         }
 
@@ -315,21 +319,21 @@ export const ToastableWrapper = ({
 
   useConstructor(() => {
     buildPanResponder({
-      onSwipeComplete: onSwipeComplete,
-      onSwipeStart: onSwipeStart,
+      onSwipeComplete: props.onSwipeComplete,
+      onSwipeStart: props.onSwipeStart,
       pan,
-      panResponderThreshold: panResponderThreshold,
-      swipeDirection: swipeDirection,
-      swipeThreshold: swipeThreshold,
+      panResponderThreshold: props.panResponderThreshold,
+      swipeDirection: props.swipeDirection,
+      swipeThreshold: props.swipeThreshold,
     });
   });
 
   useEffect(() => {
-    if (isShown) {
+    if (isVisible) {
       open();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isShown]);
+  }, [isVisible]);
 
   useEffect(() => {
     return () => {
@@ -345,16 +349,12 @@ export const ToastableWrapper = ({
   useEffect(() => {
     const wasVisible = prevIsVisibleRef.current;
 
-    if (isVisible !== wasVisible) {
-      if (isVisible) {
-        open();
-      } else {
-        close();
-      }
-      prevIsVisibleRef.current = isVisible;
+    if (props.isVisible !== wasVisible) {
+      props.isVisible ? open() : close();
+      prevIsVisibleRef.current = props.isVisible;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isVisible]);
+  }, [props.isVisible]);
 
   // FIXME: this should be placed in the render method, but it causes a bug
   // if (!isVisible) {
@@ -375,6 +375,8 @@ export const ToastableWrapper = ({
   );
 };
 
+ToastableWrapper.defaultProps = defaultProps;
+
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,