I am currently developing a React Native project using Typescript and I'm attempting to implement react-native-root-toast as a component. Below is the code for my component:
import React, { memo, useEffect, useState } from "react";
import Toast from "react-native-root-toast";
interface Props {
message: string;
shadow?: boolean;
textColor?: string;
}
const Component = ({ message, shadow, textColor }: Props) => {
const [visible, setVisible] = useState(false);
useEffect(() => {
setTimeout(() => setVisible(true), 100);
setTimeout(() => setVisible(false), 5000);
}, []);
return (
<Toast
visible={visible}
position={105}
textColor={textColor || "black"}
shadow={shadow}
animation={false}
hideOnPress
>
{message}
</Toast>
);
};
Component.defaultProps = {
shadow: true,
};
export default memo(Component);
When calling the component, it does not seem to be working properly. Here's how I'm implementing it:
const _btnAction = () => {
return (
<Toast
message={`${product.name} (${product.colorname}, ${findSizeName(
form.size
)}, ${form.qty}pcs) has been added to your cart.`}
/>
);
};
...
...
...
<Button onPress={_btnAction} />
I'm encountering issues with the implementation. Can anyone provide guidance on the correct way to create react-native-root-toast as a component in Typescript?
Thank you!