expo - How do I position the callout with a fixed position in React Native Maps?

Question

I'm trying to position the callout at the bottom of the screen and have it fixed to this position even though the map is moving? Has anyone had any luck in achieving this with React Native Maps?

All my attempts have not fixed the callout to the bottom of the screen. The only way I have found is to avoid using the callout component provided by react-native-maps.

Here is the code for the callout:

<Callout 
    tooltip
    style={styles.itemContainer}
>
    <CalloutSubview 
        style={styles.button} 
        onPress={closeCallout}
    >
        <Ionicons name="ios-close-circle" size={30} style={styles.icon} />
    </CalloutSubview>
    <SemiBoldHeadline 
        fontSize={18}
        text={title}
        marginTop={0}
        marginBottom={4}
        marginRight={30}
    />
    <BodyText 
        fontSize={14}
        lineHeight={18}
        marginRight={30}
    >
        {editedString}
    </BodyText>
    <View style={styles.inlineContainer}>
        <CalloutSubview onPress={() => RouteService.openMaps(coordinates.latitude, coordinates.longitude, title)}>
            <SmallDirectionsButton />
        </CalloutSubview>
        <CalloutSubview onPress={readMoreFunction}>
            <ReadMoreButton 
                text={'Read More'}
            />
        </CalloutSubview>
    </View>
</Callout>

Here is the styling of the callout:

const styles = StyleSheet.create({
itemContainer: {
    borderRadius: 5,
    borderWidth: 1,
    borderColor: Colors.borderColor,
    width: Layout.window.width - 100,
    backgroundColor: Colors.white,
    padding: 20,
    paddingRight: 25
},
inlineContainer: {
    flexDirection: 'row', 
    flexWrap: 'wrap',
},
button: {
    position: 'absolute',
    top: 0,
    right: 0,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 30,
    zIndex: 10,
},
icon: {
    color: Colors.almostBlack,
    opacity: 0.5
}
});

question from:https://stackoverflow.com/questions/65617195/how-do-i-position-the-callout-with-a-fixed-position-in-react-native-maps

Answer 1

If you need to render custom react components "statically" above the map you shouldn't build it with using the map's callout component. Instead, create a view and position it absolutely above the map component:

<>
  <Map .../>
  <View style={{ position: "absolute", bottom: "20"}}>
    {/* Your custom view content goes here*/}
  </View>
</>

The callout components are just build to be used directly within the map's context and are expected to move when the map moves.