React native styling #31
Conversation
| @@ -47,7 +47,7 @@ export const AppLayout = () => { | |||
| const styles = StyleSheet.create({ | |||
| mainContainer: { | |||
| flex: 1, | |||
| minHeight: height > 600 ? height : 'calc(100vh - 48px)', // Set minimum height based on screen height | |||
| minHeight: height > 600 ? height : height - 48, // Set minimum height based on screen height | |||
There was a problem hiding this comment.
Gentle optional request: can you leave a comment explaining things like the choice of 600 or 48?
There was a problem hiding this comment.
Yes, 600 is a threshold that was selected by the original developers to set the minimum height of the root container which is either set to all of the available height or to the height less 48 which acts as a buffer.
The thing to note though is that that are very few devices that have less than 600 vertical pixels, it's a rare condition that would rarely be triggered.
The main reason I have changed it is that React Native is a unitless system and doesn't support standard CSS units like rem, em, vw, vh etc. I had to change it for compatibility but I will be removing most of the RN Stylesheets soon.
| @@ -26,7 +26,7 @@ export const WelcomeLayout = () => { | |||
| const styles = StyleSheet.create({ | |||
| mainContainer: { | |||
| flex: 1, | |||
| minHeight: height > 600 ? height : 'calc(100vh - 48px)', // Set minimum height based on screen height | |||
| minHeight: height > 600 ? height : height - 48, // Set minimum height based on screen height | |||
There was a problem hiding this comment.
This is the third time I see this same code. Does it make sense to pull this out into a utility function?
There was a problem hiding this comment.
Yes, I wil be switching most of the RN stylesheets to use Nativewind (Tailwind) utility classes soon.
| if (value.length === 0) { | ||
| inputHeightRef.current = 22 | ||
| setChatInputHeight(22) |
There was a problem hiding this comment.
Is it worth explaining these constants or explaining them?
There was a problem hiding this comment.
Yes, ChatInput wraps RN TextInput and adds some features like the ability to expand the container to multiple lines as th user types more text, 22 is the line height of a single row of text, I can extract it into a constant so it's clearer.
Update styling for public pages
RN styling fixes for the public pages (login, register, forgot password)
Update ChatInput component for RN compatibility, add missing placeholder color attributes
Update the chat input component to support RN mode
RN fixes
Update SVG transform attribute for RN compatibility
Resolve circular references
There are several circular dependency references in the codebase (Component A -> Component B -> Component C -> Component A), these are long standing issues unrelated to the RN updates. Generally bundlers are able to break this cycle but they shouldn’t exist as they can create unpredictable side effects,
Here are some examples:
This commit refactors the code to avoid circular references.
Improve large screen rendering
Introduces a fixed drawer in large screen mode (mimics the original experience) and also resolves an issue Waleed mentioned related to the chat window not utilising all of the available space.
Improve Markdown rendering
This commit focuses on improving markdown rendering, resolves an issue related to header line height that Waleed has raised and also imports the whole markdown style sheet so we can have more control over the layout.