Skip to content

Removed left padding on KeyboardToolbar when navigation arrows are hidden #851

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
spaansba wants to merge 4 commits into from
Closed

Removed left padding on KeyboardToolbar when navigation arrows are hidden #851

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
db5f835
Removed left padding on KeyboardToolbar when navigation arrows are hi…
spaansba Mar 11, 2025
83d444a
Improve KeyboardToolbar default buttons layout and spacing
spaansba Mar 12, 2025
3e68cd7
removed unnecessary alignItems and justifyContent
spaansba Mar 12, 2025
61350ee
removed gap from KeyboardToolbar
spaansba Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/components/KeyboardToolbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,11 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
styles.toolbar,
{
backgroundColor: `${theme[colorScheme].background}${opacity}`,
paddingLeft: showArrows ? 8 : 0,
paddingRight: 8,
Copy link
Copy Markdown
Owner

@kirillzyusko kirillzyusko Mar 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My current idea was to add View instead of <> for button group and apply a style paddingLeft there.

And accordingly I wanted to remove paddingHorizontal from container and add paddingRight: 8 to doneButtonContainer. In this case we will not need to write additional conditional code 🤔

Copy link
Copy Markdown
Owner

@kirillzyusko kirillzyusko Mar 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you try to make these changes and I'll run CI to see if it passes or not? 👀

Copy link
Copy Markdown
Author

@spaansba spaansba Mar 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was exactly my first idea as well!

What I think might be an even better approach is the following:

  • Remove paddingHorizontal: 8 from toolbar style
  • Add a View instead of <> and give it the following styles:
  arrowsButton: {
    flexDirection: 'row',
    gap: 5,
    paddingHorizontal:8,
  },
  • Remove the done doneButtonContainer styles
  • add paddingHorizonal: 8 to doneButton
  • in Arrow.tsx remove marginHorizontal: 5 from arrowUpContainer

This way both done and arrow buttons have a padding of 8 and the 2 arrow buttons still have the gap of 5 between them. Also with this if the arrow or done button gets removed the whole container is removed as well.

Also in the previous version the done button didnt have padding on the left only on the right (margin). Now it is centered in its container.

},
],
[colorScheme, opacity, theme],
[colorScheme, opacity, theme, showArrows],
);
const offset = useMemo(
() => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
Expand Down Expand Up @@ -222,7 +224,6 @@ const styles = StyleSheet.create({
width: "100%",
flexDirection: "row",
height: KEYBOARD_TOOLBAR_HEIGHT,
paddingHorizontal: 8,
},
doneButton: {
fontWeight: "600",
Expand Down