I'm trying to move a button inside my map ponent . i'm using react-native-maps

let me show you my

render() {
console.log(this.state)
const { region } = this.state;
return (
  <View style={styles.container}>
    <MapView
      provider={this.props.provider}
      mapType="standard"
      style={styles.map}
      showsUserLocation={true}
      initialRegion={region}
    > 
      <UrlTile
        urlTemplate="XXX"
        zIndex={-1}
      />
      <Button style={{ borderWidth: 2, alignItems:'right',justifyContent:'right'}} title="Info" onPress={() => console.log("This is not fired")}/>
    </MapView>
    <View>
    </View>
  </View>
);
}
}


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

in this case my button is in the center / top of my map and i want to move it in the center / right of my map

Any Idea? thanks

I'm trying to move a button inside my map ponent . i'm using react-native-maps

let me show you my

render() {
console.log(this.state)
const { region } = this.state;
return (
  <View style={styles.container}>
    <MapView
      provider={this.props.provider}
      mapType="standard"
      style={styles.map}
      showsUserLocation={true}
      initialRegion={region}
    > 
      <UrlTile
        urlTemplate="XXX"
        zIndex={-1}
      />
      <Button style={{ borderWidth: 2, alignItems:'right',justifyContent:'right'}} title="Info" onPress={() => console.log("This is not fired")}/>
    </MapView>
    <View>
    </View>
  </View>
);
}
}


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

in this case my button is in the center / top of my map and i want to move it in the center / right of my map

Any Idea? thanks

• javascript
• react-native
• react-native-maps

1 Answer 1

First of all close the MapView Component and place the button below it like this

<View style={{ flex: 1 }}>
<MapView
    style={{ flex: 1 }}
/>
<View
    style={{
        position: 'absolute',//use absolute position to show button on top of the map
        top: '50%', //for center align
        alignSelf: 'flex-end' //for align to right
    }}
>
    <Button />
</View>