React Native Custom Swipeable Toast With Reanimated From Scratch

[@rakhawibowo]

If you want to use it with React Navigation, to keep the Toast showing for all screens you can place the Toast component inside a NavigationContainer. here's an example I made with Expo Snack
snack.expo.dev/@rakha112/06d68f

[@remziogultum6697]

really nice tutorial

[@rakhawibowo]

Thank you for watching this video, I really appreciate it

[@rishujaryalls8325]

How to display these toast over
In this case it opens behind the modal not over the modal

[@emanuelmejia4525]

Wow, I need to try it in my project, thank you (:
works on expo?

[@rakhawibowo]

Hey, hope this video can help you, yes it can work with expo too

[@rakhawibowo]

Fix withTiming finish callback, change this code
withTiming(-100, finish => {
if (finish) {
runOnJS(setShowing)(false);
}
})
To this
withTiming(-100, null, finish => {
if (finish) {
runOnJS(setShowing)(false);
}
})

[@ThanHtutZaw3]

16:27 are you using color extension or it is build in ?

[@rakhawibowo]

It is a Color Highlight extension in VS Code

[@ThanHtutZaw3]

@@rakhawibowo cool , it is useful for non - css file

[@parttimecoder7901]

It's working great thanks for the tutorials but in typescript it's giving an error. it would be great if you use typescript instead of java script

[@rakhawibowo]

Hi thanks for watching the video, i really appreciate it, can you tell me about the error ?

[@parttimecoder7901]

@@rakhawibowo Type '(finish: any) => void' has no properties in common with type 'WithTimingConfig'.

[@amannarola9280]

Hi it gives
@deprecated
useAnimatedGestureHandler is an old API which is no longer supported.
When i am using with reanimated version 3.
And because of this,behaviour of close toast on gesture is not working in android.

[@rakhawibowo]

hey I've updated the code with the new Gesture API, you can see it in my github repo

[@amannarola9280]

@@rakhawibowo Ok thanks

[@amannarola9280]

Hi Is it working with react native reanimated latest version 3 ?

[@rakhawibowo]

Yes it's working with reanimated 3

[@thimothy1213]

I know js and basics of React.js. How can i start with React Native ?

[@rakhawibowo]

I think you should first read the documentation to understand the core components used in React Native, here is the link reactnative.dev/docs/getting-started

[@thimothy1213]

@@rakhawibowo Thanks, i will start from today

[@tuan1842]

tôi thấy rằng thông báo chỉ hoạt động ở cấp độ màn hình, bạn có cách nào làm cho nó hoạt động ở tất cả màn hình không?
ví dụ: tôi muốn dùng nó để thông báo trạng thái đăng nhập thành công, tôi muốn khi đăng nhập thành công thì toast vẫn ở đó vài giây dù có có chuyển sang màn hình khác rồi

[@rakhawibowo]

Hello, you can place the toast component inside the NavigationContainer, here is the Expo Snack that I made as an example of using it with react navigation
snack.expo.dev/@rakha112/06d68f

[@tuan1842]

@@rakhawibowo Thật tuyệt vời, cảm ơn bạn đã giúp đỡ tôi tìm ra giải pháp cho vấn đề này, chúc bạn có thật nhiều sức khoẻ để ra nhiều video bổ ích như thế này

[@rakhawibowo]

@@tuan1842 Thank you, I'm glad if this video can help you...