Get same effect as ...StyleSheet.absoluteFillObject without taking up more height

Question

I have to add location from this stylesheet:

const mapStyles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  location: {
    ...StyleSheet.absoluteFillObject,
    width: 400,
    alignItems: 'center',
  }
})

to my autocomplete (<Location />) so that on Android the autocomplete list will overflow the other components.

E.G.:

    <Container style={mapStyles.location}>
    <Location />
    </Container>

However it seems to push the elements below the <Location /> down to about the device screen height below it (so there is a full blank screen under the <Location /> and then the other components appear. How do I get the same effect as ...StyleSheet.absoluteFillObject withought moving components below it further down the screen?

Answer 1

StyleSheet.absoluteFillObject will be replaced with this properties (source):

const absoluteFillObject = {
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
};

It works for your <Location /> component (it needs to be absolute to "overflow" the other elements), but not for your container. Makes your container full height with flex: 1, the other element in your container and it should work.

const mapStyles = StyleSheet.create({
  container: {
    flex: 1,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  location: {
    ...StyleSheet.absoluteFillObject,
    width: 400,
    alignItems: 'center',
  }
})