Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Call Functional Component Statically from another component

$
0
0

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 :)


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>