After spending hours to figure out how I can call a function Statically from another functional component in react-native. I Have a component called SnackbarFC and I would like to call it by doing so when the button is pressed:
SnackBar.show({ message: ArabicPlaceholders.Copy, autoHide: true, copyStyle: true, color: '#484848' })
To get there I created an Interface:
type ISnackbar = {show: (options: SnackbarOptions) => void;}
then
type SnackbarOptions = { color?: string onPress?: () => void onLongPress?: () => void message?: string pressable?: boolean copyStyle?: boolean autoHide?: boolean}
After that I do
show(options: SnackbarOptions) { console.log("options", options); return (<SnackbarFC color={options.color} message={options.message} onPress={options.onPress} onLongPress={options.onLongPress} pressable={options.pressable} autoHide={options.autoHide} copyStyle={options.copyStyle} /> ); }}
and finally, this how the component looks like
export const SnackbarFC = (props: SnackbarOptions) => { const animation = useRef(new Animated.Value(0)).current; const fadeIn = () => { Animated.timing(animation, { toValue: 1, duration: 800, useNativeDriver: true }).start(); }.....
I do get the options when i do `console.log("options", options);``but the SnackbarFC is not fired, so if I add a log inside this component nothing happens.
I really appreciate it if anyone could help me to figure out the problem :(
Thanks in advance :)