Случайное положение круга без перекрытия и без сенсорного реагирования

Question

Я новичок в RN, и мне нужно реализовать что-то вроде изображения ниже, если кто-нибудь может поделиться идеей с этим, или любая помощь будет заметна.

https://spectrum.imgix.net/threads/bd4f07ad-5259-40bd-aca6-9e652b8fce6b/8b63102d-59cf-47b7-9296-ba4c4f3e01e0-95328783_3439257982757910_390583595753799680_o.jpg?expires=1588118400000&ixlib=js-1.4.1&s=40553e03a218c077ec675eaa13664679

У меня проблема с кругами разного размера и их положением.

Я пробовал использовать приведенный ниже код, и он выглядит примерно так, единственная проблема - круг и интервал не очень хорошо выглядят вот мой код:

<FlatList
  data={this.state.moviesList}
  numColumns={3}
  keyExtractor={this._keyExtractor}
  renderItem={this.renderRowItem}
/>
Here is render row:

renderRowItem = (itemData) => {
    var RandomNumber = Math.floor(Math.random() * 50) + 70;

    return (
      <View style={styles.listSec}>
        <TouchableOpacity
          onPress={()=> {this.props.navigation.navigate('Tutorials')}}>
          <View style={{
            backgroundColor: '#f673d7',
            borderRadius: 100/2,
            justifyContent: 'center',
            alignSelf: 'center',
            height: RandomNumber + itemData.item.title.length,
            width: RandomNumber + itemData.item.title.length,
            //paddingVertical: 10,
            //paddingHorizontal: 10
          }}>
            <Text
              style={{color: '#fff',
                alignSelf:'center',
                fontSize: 18,
                fontWeight: '500',
                fontSize: RandomNumber/5
              }}>
              {itemData.item.title}</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }