Correctly align sibling component

[stefanoeb]

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]

don't have time to test this right now, but one thing you can try is dropping the scroll views if you don't need with the PreTag and CodeTag props