React-Native bulleted lists using flex-wrap

Question

I'm trying to create a bulleted list that looks like this:

But I'm ending up with this instead:

React-native doesn't seem to like my use of nested flex boxes. But I'm not sure how to express the need for all 3 line elements (bullet, bolded text and normal text) to be displayed inline and to wrap to the next line when necessary.

Here is my react-native code:

var styles = StyleSheet.create({
    textWrapper: {
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row',
    },
    textBlock: {
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row'
        position: 'absolute',
        left: 10
    },
    boldText: {
        fontWeight: 'bold',
    },
    normalText: {
    }
});

<View style={ styles.textWrapper }>
    <Text>{'\u2022'}</Text>
    <View style={ styles.textBlock }>
        <Text style={ styles.boldText }>{categoryName + ':'}</Text>
        <Text style={ styles.normalText }>{value}</Text>
    </View>
</View>

Answer 1

Here's what I finally came up... I needed to put the bullet and bullet text into separate columns. I'm not sure why I had to specify a width for the column, but leaving width out or using flex: 1 didn't work for me.

Thanks to Nader for suggesting nested Text blocks, which formed part of the solution.

var styles = StyleSheet.create({
    column: {
        flexDirection: 'column',
        alignItems: 'flex-start',
        width: 200
    },
    row: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        flexWrap: 'wrap',
        flex: 1
    },
    bullet: {
        width: 10
    },
    bulletText: {
        flex: 1
    },
    boldText: {
        fontWeight: 'bold'
    },
    normalText: {
    }
});

<View style={ styles.column }>
    <View style={ styles.row }>
        <View style={ styles.bullet }>
            <Text>{'\u2022' + " "}</Text>
        </View>
        <View style={ styles.bulletText }>
            <Text>
                <Text style={ styles.boldText }>{keyString + ": "}</Text>
                <Text style={ styles.normalText }>{textEntry}</Text>
            </Text>
        </View>
    </View>
</View>

Answer 2

This is the version of accepted answer which works for me:

bullet(text: String): View {
    return(
      <View style={ styles.row }>
        <View style={ styles.bullet }>
          <Text>{'\u2022' + " "}</Text>
        </View>
        <View style={ styles.bulletText }>
          <Text>{text}</Text>
        </View>
      </View>
    );
}
const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        flexWrap: 'wrap',
        flex: 1,
        marginVertical: 4
    },
    bullet: {
        width: 10
    },
    bulletText: {
        flex: 1
    }
});

And here is the result:

Answer 3

Try wrapping it all in a single text block:

<View style={ styles.textBlock }>
    <Text>{'\u2022'}
      <Text style={ styles.boldText }>{categoryName + ':'}</Text>
      <Text style={ styles.normalText }>{value}</Text>
    </Text>
</View>