Quería encapsular un modal en una función que devuelve un nuevo componente, pasando los elementos secundarios que estarán dentro de este componente como argumento, lo intenté de la siguiente manera, pero no funciona, la función de retorno se reconoce como una función anónima y no es un componente, y no representa a los niños, ¿qué pasa? ¿Hay una mejor manera de hacer esto?

Archivo modal.tsx

 export const useModal = (Chd: any) => ({ }: any) => { const anim = useRef(new Animated.Value(0)).current const [opened, setOpened] = useState(false) useEffect(() => { if (opened) { Animated.timing( anim, { toValue: 1, duration: 2000, useNativeDriver: true } ).start(); } }, [opened]); const open = () => { if (!opened) { setOpened(true); } }; const close = () => { if (!opened) return; Animated.timing( anim, { toValue: 0, duration: 2000, useNativeDriver: true } ).start(() => setOpened(false)); }; var funcs = { open, close, anim }; // open(); // close(); return ( <ModalComponent transparent visible={opened} > <Container> <Chd {...funcs} /> </Container> </ModalComponent> ); }

Archivo Dialog.tsx

 const Dialog = useModal(({ open, close, anim }: any) => { useEffect(() => { open() /*Not Work, Dialog not rendering*/ }, []) return ( <Container> { <Animated.View style={{ transform: [ { scale: anim.interpolate({ inputRange: [0, 0.8, 1], outputRange: [0, 1.2, 1] }) } ] }}> <Center></Center> </Animated.View> } </Container> ); }); export default Dialog;