CODEWITHSUNDEEP
react-nativemapboxmapbox-glreact-native-mapbox-gl
srimaln91
srimaln91

Reputation: 1346

How to place a floating button in react native mapbox GL

I'm working on React native and using Mapbox GL library to display a map. Now I want to add a button to the centre of Mapbox GL view. Below is what I'm getting. screenshot

Here is the code.

      <View style={styles.container}>

        <Mapbox.MapView
          style={{flex: 1}}
          styleURL={Mapbox.StyleURL.Dark}
          zoomLevel={15}
          centerCoordinate={[79.900424, 6.867281]}
          showUserLocation={true}
          logoEnabled={false}
          rotateEnabled={false}
          attributionEnabled={false}
          animated={true}
          style={styles.container}>
        </Mapbox.MapView>

        <View style={{width:30, backgroundColor:"transparent"}}>
          <Button title="Button"></Button>
        </View>

      </View>

      const styles = StyleSheet.create({
        container: {
          flex: 1,
        }
      });

How I can fix this?

Upvotes: 2

Views: 2811

Answers (1)

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

try this,

<View style={{width:30, backgroundColor:"transparent",position:'absolute',top:"50%",left:"50%",zIndex:10}}>
    <Button title="Button"></Button>
</View>

Upvotes: 3

Related Questions