Position absolute children on flatlist element in React Native (expo)

Question

I want to make a little game when some circles comes from the top of the screen. After they appear they will drag down until they go out of the screen.

To make that i have a flatlist which contains all of the circles

 <FlatList scrollEnabled={false}renderItem={this.renderItem}data={this.state.elements} />

Then in the render item I insert the circle item view

   renderItem = ({item}) => (
    <Circle
        apparitionTime={new Date().getTime() / 1000}
        id={item.id}
        removeCircle={this.removeCircle}
        updateScore={this.updateScore}/>
);

A circle item looks like this :

  <Animated.View style={[/*this.moveAnimation.getLayout(),*/ styles.animatedView]}>
            <TouchableOpacity style={styles.circleStyle} onPress={() => this.prepareToSend()}>
                <View style={styles.absoluteView}>
                </View>
                <Image style={styles.image} source={require('../assets/images/music.png')}/>
            </TouchableOpacity>
        </Animated.View>

I use the animated view to make them scrolling all over the view.

I want the animated view to be on position absolute,but no matter what i've tried after sending the animated view to position absolute, the element disappear

   animatedView: {
    top: 0,
    zIndex: 100,
    width: 75,
    height: 75,
    position: "absolute", // does not work
},

Any Ideas ? Thank you

Answer 1

Position absolute didn't work inside a flatlist.

Now how to render positional elements inside it !!!!!!!....

Alternatively, you can use alignSelf: 'flex-end' or alignSelf: 'flex-start' and further you can place it by using margin/padding inside the view. More you can read here about absolute not working in their official docs