Flat list random circle design react native

I am new in RN and I need to implement something like below image if anyone can share idea into this or any help will be appreciable.

I am having problem into different size of circles and there position.

I tried with below code and it's looking something similar the only issue is circle and spacing not looking well here is my code:

<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>
    )
  }