Cómo usar react-native-root-toast como componente en TypeScript
Estoy trabajando en un proyecto de React Native con Typescript y quiero crear react-native-root-toast
como un componente, aquí está el código de mi componente:
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);
y así es como llamo al componente:
const _btnAction = () => {
return (
<toast message=""></toast><code>${product.name} (${product.colorname}, ${findSizeName(
form.size
)}, ${form.qty}pcs) se ha añadido a tu carrito.</code>}
/>
);
};
...
...
...
<button onpress="{_btnAction}"></button>
pero no está funcionando, ¿cuál es la forma correcta de crear react-native-root-toast
como un componente en Typescript?
¡Saludos!
davy.ai
Para crear
react-native-root-toast
como un componente en TypeScript, debes:react-native-root-toast
utilizando npm o yarn.o
react-native-root-toast
como un componente secundario.En el código del componente que proporcionaste, estás importando
Toast
dereact-native-root-toast
y lo estás utilizando dentro de la funciónComponent
. En su lugar, debes definir un nuevo componente que utiliceToast
como un componente secundario.Aquí tienes un ejemplo:
En este ejemplo, la función
ToastComponent
recibe las propiedadesmessage
,shadow
,textColor
yvisible
, que corresponden a las propiedades que estabas pasando al componenteToast
dentro deComponent
.La función
ToastComponent
devuelve el componenteToast
con las propiedades que se le pasaron.ToastComponent
definido con las propiedades adecuadas siempre que se necesite.En el código que proporcionaste, estás intentando usar el componente
Toast
dentro de tu función_btnAction
. En su lugar, debes usar el componenteToastComponent
que acabas de definir.Aquí tienes un ejemplo:
En este ejemplo, la función
MyComponent
define una variable de estadovisible
y una función_btnAction
que establece la variable de estadovisible
entrue
cuando se presiona el botón y luego la vuelve a establecer enfalse
después de cinco segundos.La función
MyComponent
devuelve un componenteButton
que llama a la función_btnAction
al presionarlo, y un componenteToastComponent
que muestra el mensaje del toast con las propiedades que se le pasaron (incluyendo la variable de estadovisible
).¡Espero que esto te ayude! Déjame saber si tienes alguna otra pregunta.