Replace react-native-toast-view with custom toast#1204
Merged
Conversation
Contributor
|
The after vid certainly looks better to me! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rusty reported an issue on Android with Expo 56 that the expired forecast toast doesn't seem to respond to taps and the animation is laggy. The new architecture for React Native introduced a new UI rendering framework, Fabric, that changes how RN views are translated to native and these differ between iOS and Android. Since
react-native-toast-viewhasn't been updated in a year I decided to create our own custom toast view that mimics what we had and addressing these issues.The two big design descisions with the toast is that it used
React Native Gesture Handlerinstead ofRespondersso that it captures touches better without blocking other touches, and it does not usereact-native-reanimated. The reason being is that Reanimated commits the animation to Android's ShadowTree and on the JS thread instead of the main UI thread like the legacyAnimatedlibrary from React Native does.I also changed the
ForecastScreento lazily load the tabs so that it feels more responsive on Android, with the tradeoff that the weather tab and observations tab need to fetch their information on the first load so users will see a loading spinner. Pushing and popping on the nav stack on Android is more expensive than on iOS so this greatly helps performance. However, there's an argument to be made that we only do this on Android.Before video:
https://github.com/user-attachments/assets/2b06fb15-d2d3-486e-a393-18ae54542378
After video:
https://github.com/user-attachments/assets/ec83afc6-565f-4e98-a950-f39176152d06