I wanted to encapsulate a modal in a function that returns a new component, passing the children that will be inside this component as an argument, I tried this way below, but it's not working, the return function is recognized as an anonymous function, and not a component, and it doesn't render the children, what's wrong? Is there a better way to do this?
Modal.tsx File
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>
);
}
Dialog.tsx File
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;