Correctly align sibling component

Hello Conor, first of all: Thank you for this library 😄

I'd like to ask for a light on something: I want to essentialy put small views in between the syntax highlightings, like this:

My idea is to make sibling components, but when I do it, the syntax highlighter always occupy 100% of the width (or the height, if I change the wrapper to flexDirection: row):

Essentially this is producing:

<NativeSyntaxHighlighter>{Code1}</NativeSyntaxHighlighter>
<View style={styles.answerGap}>
     <Text style={styles.textAnswer}>???</Text>
</View>
<NativeSyntaxHighlighter>{Code2}</NativeSyntaxHighlighter>

Do you know if there's a way to accomplish it? I saw there's a bunch of scrollviews inside every Highlighter component and I'm assuming that's the problem. I'm trying to play with the styles but got no solution so far.

Here's the simplest example possible:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import NativeSyntaxHighlighter from 'react-native-syntax-highlighter';

const Code1 = `
  if (`;

const Code2 = `) {
    callSomething();
    return true;
  }
`;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.codeWrapper}>
          <NativeSyntaxHighlighter>{Code1}</NativeSyntaxHighlighter>
          <View style={styles.answerGap}>
            <Text style={styles.textAnswer}>???</Text>
          </View>
          <NativeSyntaxHighlighter>{Code2}</NativeSyntaxHighlighter>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  codeWrapper: {
    backgroundColor: '#bbb',
    flexWrap: 'wrap',
    width: '100%',
  },
  answerGap: {
    backgroundColor: 'purple',
    padding: 3,
  },
  textAnswer: {
    color: 'white',
  },
});

Thank you and have a nice week

conorhastings / react-native-syntax-highlighter

Correctly align sibling component #13