Fix inconsistent margins for reacted emojis to code-block comments

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js

@@ -18,6 +18,12 @@ const propTypes = {
     /** Press out handler for the code block */
     onPressOut: PropTypes.func,
 
+    /** The position of this React element relative to the parent React element, starting at 0 */
+    renderIndex: PropTypes.number.isRequired,
+
+    /** The total number of elements children of this React element parent */
+    renderLength: PropTypes.number.isRequired,
+
     ...htmlRendererPropTypes,
 };
 
@@ -29,12 +35,13 @@ const defaultProps = {
 const BasePreRenderer = forwardRef((props, ref) => {
     const TDefaultRenderer = props.TDefaultRenderer;
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'onPressIn', 'onPressOut', 'onLongPress']);
+    const isLast = props.renderIndex === props.renderLength - 1;
 
     return (
         <ScrollView
             ref={ref}
             horizontal
-            style={[styles.mv2, styles.overscrollBehaviorXNone]}
+            style={[isLast ? styles.mt2 : styles.mv2, styles.overscrollBehaviorXNone]}
             bounces={false}
             keyboardShouldPersistTaps="always"
         >