This just got moved to line 84

I tried using a Flatlist here; however, I wasn't able to get the elements to play nicely with the wrapping. However, I don't believe that we will be hurting performance by using map. Flatlists loads items that are currently visible on the screen and it deletes items as they go off screen, but I believe that in most cases for us, all all of these reactions for a message should always be visible on the screen at the same time so we won't really be able to take advantage of Flatlist's optimizations. Additionally, if you go further up the component tree, you will see that this entire component is part of a Flatlist renderItem in the message list component so the reactions for other messages shouldn't render until that Message component (which contains an InlineEngagement) is visible on the screen

external sources from react native docs and a blog from expo:

https://reactnative.dev/docs/flatlist#:~:text=To%20render%20multiple%20columns%2C%20use%20the%20numColumns%20prop.%20Using%20this%20approach%20instead%20of%20a%20flexWrap%20layout%20can%20prevent%20conflicts%20with%20the%20item%20height%20logic.

https://blog.expo.dev/react-native-flatlist-made-easy-20fca51e0327#:~:text=FlatList%20is%20a%20React%20Native%20component%20that%20only%20loads%20items%20that%20are%20currently%20visible%20on%20the%20screen%20and%20it%20deletes%20items%20as%20they%20go%20off%20screen

The change here is that we change the name from inlineEngagementLeftStyle to inlineEngagementStyle

The change here is that we change the name from inlineEngagementRightStyle to inlineEngagementStyle

We have to explicitly use marginLeft here to override the marginLeft: avatarOffset in the inlineEngagement style