NativeWind migration #32
Merged
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.
This PR focuses on migrating most of the styling logic from stylesheets to NativeWind along with a series of user improvement updates and bug fixes.
NativeWind migration
NativeWind significantly reduces the amount of code required for designing and styling user experiences which is an essential foundational task as we are aiming to support desktop web, mobile web, Android and iOS apps using the same codebase so reducing this logic to the bare mimimum will help us move faster.
This PR reduces the amount of styling logic by anywhere from 50% to 90%, here is a before and after sample:
Before:
After
NativeWind migration covers the bulk of this PR, additionally, I have made a series of user experience improvements:
Improve input validation handling experience
One of the usability issues with both the login and register pages is that they trigger data validation errors as soon as the user touches the input or starts typing, here is a sample:
This commit delay the Formik the validation process until the user clicks on the submit button.
Improve the drawer user experience
The current drawer experience has a number of issues:
This commit updates the user experience to be mobile compatible, this is a starting point, happy to tweak it as you see fit.
Chat page
Updated the rendering of the thinking section
Improved the rendering experience to reduce the flickering issues, also resolved the automated scrolling issues which were reported in issue #16.
One thing to note is that the web version doesn't currently have a sticky header or footer (when the user scrolls, they will disappear). I have already resolved this issue in the app version, and I will address the web version soon, here is an Android scrolling sample:
Screen_Recording_20250305_183141_Ansari.Chat.mp4