How to fixed element in react native - react-native

Question

I have a flatlist that shows my restaurant foods. and I have a buy basket that shows the count and total cost of foods. Now I want to know how can I fixed the position of the basket buy on the flat list.
Note: The buy basket on the flat list is a little icon that shows the count and total cost of foods.
Thanks advance.

Answer 1

If you are looking for Floating Action Button like a solution with Flatlist like below example image, find the full code here.
Example Image
<FlatList
data={data}
renderItem={({ item }) => <View style={styles.list}>
<Text>Name : {item.name}</Text>
<Text>Age : {item.age}</Text>
</View>}
/>
<TouchableOpacity onPress={() => alert('FAB clicked')}
style={{
position: 'absolute',
width: 56,
height: 56,
alignItems: 'center',
justifyContent: 'center',
right: 20,
bottom: 20,
backgroundColor: '#03A9F4',
borderRadius: 30,
elevation: 8
}}>
<Text style={{ fontSize: 40,color: 'white'}}>+</Text>
</TouchableOpacity>

Answer 2

You should do something like this:
//MyComponent.js
import { FlatList, View, ScrollView } from 'react-native';
export default class MyComponent extends Component {
renderFlatlist() {
return <FlatList data={...} />;
}
renderBasket() {
return (
<View>
//Your basket
</View>
);
}
render() {
return (
<View>
<ScrollView>
{this.renderFlatlist()}
</ScrollView>
<View>
{this.renderBasket()}
</View>
</View>
)
}
}