React Native Map Renders On Top Of Everything

Question

I am working on a little map application using react-native-maps. I am trying to render a floating action button on top of the map, but while I do see it flashing for a second, as soon as the map renders, it sits right on top of the button. I will paste my render code and styles below:

render() {
        return (
          <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
            <MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange}>
              <MapView.Marker coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}>
                <View style={styles.radius}>
                  <View style={styles.marker} />
                </View>
              </MapView.Marker>
            </MapView>

            <ActionButton buttonColor="rgba(231,76,60,1)" style={styles.actionButton}>
              <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
                <Icon name="rocket" style={styles.actionButtonIcon} />
              </ActionButton.Item>
              <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
                <Icon name="rocket" style={styles.actionButtonIcon} />
              </ActionButton.Item>
              <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
                <Icon name="rocket" style={styles.actionButtonIcon} />
              </ActionButton.Item>
            </ActionButton>
          </View>
        );
      }
    }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    width: width,
    height: height,
    zIndex: 998
  },
  radius: {
    height: 50,
    width: 50,
    borderRadius: 50 / 2,
    overflow: 'hidden',
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    borderWidth: 1,
    borderColor: 'rgba(0, 122, 255, 0.3)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  marker: {
    height: 20,
    width: 20,
    borderWidth: 3,
    borderColor: 'white',
    borderRadius: 20 / 2,
    overflow: 'hidden',
    backgroundColor: '#007AFF'
  },
  actionButton: {
    position: 'absolute',
    width: 20,
    height: 20,
    top: 10,
    left: 10,
    zIndex: 999
  },
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white'
  }
});

Hobie

How about a screenshot of the issue? It's hard to know what you mean by "after a flash it sits on top of the button".. – Starcrossed

Unfortunately it is really difficult to grab a screenshot of something that flashes only for a split second on the screen, but someone came up with the right answer though, so thank you for your time anyway :) – Hobie

Answer 1

I had the same problem. I solved it by giving the map a negative z-index.
Also, I used flex: 1, instead of width and height, but that shouldn't make a difference.

Like:

  map: {
    width: width,
    height: height,
    zIndex: -1
  },
  actionButton: {
    position: 'absolute',
    width: 20,
    height: 20,
    top: 10,
    left: 10,
    zIndex: 10
  },

Enwreathe

Thank you! The negative zIndex was exactly what was needed to fix this. – Hobie

Answer 2

<Pressable style={{ zIndex: 5 flex: 1, flexDirection:'row', padding: 10, position:'absolute', bottom:"25%", alignSelf: "center", justifyContent: "space-between", backgroundColor: '#4DDB81', borderWidth: 0.5, borderRadius: 10, }}> <Text style={{ fontSize: 30, color: "#383838" }}>Pressable

Ey

Answer 3

it is a long shot but try to add position: 'absolute' to your map styles and set its coordinates and see what happens

Turcotte

I had tried that, Adam Patterson's answer was the fix :) Thank you. – Hobie