Incubator.Dialog - Fixed content component being created on every render. (#3231)

* fixed DialogContent component being created on every render and casuing mounts and unmounts

* rename variable

Author: nitzanyiz

src/incubator/Dialog/index.tsx

@@ -127,7 +127,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const {DialogContent, containerProps, containerStyle} = useDialogContent({
+  const {renderDialogContent, containerProps, containerStyle} = useDialogContent({
     showCloseButton,
     close,
     closeButtonProps,
@@ -215,7 +215,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     <GestureDetector gesture={panGesture}>
       {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
-        <DialogContent/>
+        {renderDialogContent()}
       </View>
     </GestureDetector>
   );

src/incubator/Dialog/useDialogContent.tsx

@@ -49,7 +49,7 @@ const useDialogContent = (props: InternalDialogCloseButtonProps) => {
     return showCloseButton ? [propsContainerStyle, styles.transparent] : propsContainerStyle;
   }, [showCloseButton, propsContainerStyle]);
 
-  const DialogContent = () => {
+  const renderDialogContent = () => {
     const DialogContent = (
       <>
         {headerProps && <DialogHeader {...headerProps}/>}
@@ -69,7 +69,7 @@ const useDialogContent = (props: InternalDialogCloseButtonProps) => {
     }
   };
 
-  return {DialogContent, containerStyle, containerProps};
+  return {renderDialogContent, containerStyle, containerProps};
 };
 
 export default useDialogContent;