reactjs - 画像内の Flexbox 配置テキスト

Question

React Native を使用して、特定のレイアウトを作成しようとしています。

私は、垂直方向と水平方向の中央に配置された（ビュー内の）画像と、画像の上に垂直方向と水平方向の中央に配置されたいくつかのテキストを持っています。テキストは画像/背景画像の上に来る必要があるため、画像タグ内に配置します。

現在、そのテキストのコンテンツは非常に長くなる可能性があり、画像タグ内にあるため、折り返されます。

テキスト内のコンテンツが折り返されず、画像の上に表示されるようにするにはどうすればよいですか?

これまでの私のレイアウト：

私が達成しようとしているレイアウト

私のコード:

<TouchableHighlight onPress={onPress}>
  <View style={styles.categoryContainer}>
    <View style={styles.leftContainer}>
      <View style={styles.categoryIndexContainer}>
        <Text style={styles.categoryIndex}>01</Text>
      </View>
    </View>
    <View style={styles.middleContainer}>
      <Image source={img} style={styles.categoryImage}>
        <Text style={styles.categoryName}>Some very long title name</Text>
      </Image>
    </View>
    <View style={styles.rightContainer}></View>
  </View>
</TouchableHighlight>

const styles = StyleSheet.create({
  categoryContainer: {
    flexDirection: 'row',
  },
  leftContainer: {
    width: 50,
    paddingLeft: 15,
    paddingTop: 30,
  },
  middleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    flexDirection: 'row',
  },
  rightContainer: {
    width: 50,
  },
  categoryName: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 40,
    textAlign: 'center',
    backgroundColor: 'transparent',
    flexWrap: 'nowrap',
  },
  categoryImage: {
    alignItems:'center',
    justifyContent:'center',
    flexWrap: 'nowrap',
  },
})

ありがとう