react-native-reanimated, pass component as prop with animated close - reactjs

Question

I have a component which uses react-native-reanimated, how can I add hideSheet() to the component I am passing as a prop?
import Animated, { Easing } from "react-native-reanimated";
...
const BottomSheet = ({
children,
...
renderHeader,...
}) => {
const style = useMemo(
() => getStyleObj({ backgroundColor, secondSnapshot }),
[backgroundColor, secondSnapshot]
);
const [alignment] = useState(new Animated.Value(0));
const [alignmentChildren] = useState(new Animated.Value(0));
const [open, setOpen] = useState(true);
const WrapperComponent = tapToOpenEnabled ? Pressable : View;
const openSheet = () => {
Animated.timing(alignment, {
toValue: 1,
duration: 400,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
}).start();
};
const hideSheet = () => {
Animated.timing(alignment, {
toValue: 0,
duration: 400,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
}).start();
};
const toggleOpen = () => {
if (open) {
hideSheet();
setOpen(false);
} else {
openSheet();
setOpen(true);
}
};
I am passing the header component as a prop:
const renderSheetHeader = useCallback(() => {
return (
<View style={styles.headerCont}>
<Text style={styles.headerTXT}>Setup your reminders</Text>
<Icon name="closecircle" size={20} color={colors.GREYONE} *add hideSheet here* />
</View>
);
}, []);
return (
<BottomSheet
...
renderHeader={renderSheetHeader()}
...
>
return (
<WrapperComponent>
...
{renderHeader}

Answer 1

You could pass it as a parameter to your function.
const renderSheetHeader = useCallback((onHide) => {
return (
<View style={styles.headerCont}>
<Text style={styles.headerTXT}>Setup your reminders</Text>
<View style={styles.headerCont}>
<Text style={styles.headerTXT}>Setup your reminders</Text>
<Pressable onPress={() => onHide()}>
<Icon name="closecircle" size={20} color={colors.GREYONE} />
</Pressable>
</View>
</View>
);
}, []);
Then, call it as usual.
<WrapperComponent>
...
{(onHide) => renderHeader(onHide)}
In your WrapperComponent:
renderHeader(hideSheet)
However, if it is not necessary that you define this as a function (and I do not see a reason in your current code), then you should be better of to just create a normale JSX component.
export function SheetHeader(props) {
return (
<View style={styles.headerCont}>
<Text style={styles.headerTXT}>Setup your reminders</Text>
<View style={styles.headerCont}>
<Text style={styles.headerTXT}>Setup your reminders</Text>
<Pressable onPress={() => onHide()}>
<Icon name="closecircle" size={20} color={colors.GREYONE} />
</Pressable>
</View>
</View>
);
}
and call it in your WrapperComponent directly.
<SheetHeader onHide={hideSheet} />