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 🤔

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

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.

Had to add this otherwise every single line would error out for me.

I think gap was added relatively recently and I support older RN versions as well, so it's better to use paddings/margins to make sure all library users have consistent experience 😊

Makes sense! I remove the gap and added marginRight: 2.5 and marginLeft: 2.5 on the arrowUp/down containers respectively. I also made it so the arrowContainer is a base container and the arrowUp/down add styles to the base container instead of the down container adding styles to the up container.

Why it's needed now? 🤔

Ah you are right, thats not needed.

With a new approach arrow both done/arrows will have a horizontal padding, right?

I think with a previous approach only arrows had paddingRight and theoretically long content could overlap with "Done" button (since Done buttong didn't have any margin/padding from left). I think a new approach makes sense 👍

yes with this approach both containers will have the exact amount of horizontal padding.

I tested it with long content (a custom toolbar) and there is no overlapping in this approach with or without the arrows/done button!