Rounded edges for MapViews

This commit is contained in:
Keannu Bernasol 2023-10-11 20:19:16 +08:00
parent 4a406957b5
commit 963eaef628
3 changed files with 91 additions and 85 deletions

View file

@ -99,51 +99,53 @@ export default function CreateGroup({ route }: any) {
<AnimatedContainerNoScroll> <AnimatedContainerNoScroll>
<View style={{ zIndex: -1 }}> <View style={{ zIndex: -1 }}>
<View style={styles.padding} /> <View style={styles.padding} />
<MapView <View style={{ borderRadius: 16, overflow: "hidden" }}>
style={{ <MapView
height: Viewport.height * 0.4, style={{
width: Viewport.width * 0.8, height: Viewport.height * 0.4,
alignSelf: "center", width: Viewport.width * 0.8,
}} alignSelf: "center",
customMapStyle={[ }}
{ customMapStyle={[
featureType: "poi", {
stylers: [ featureType: "poi",
{ stylers: [
visibility: "off", {
}, visibility: "off",
], },
}, ],
]} },
mapType="none" ]}
scrollEnabled={false} mapType="none"
zoomEnabled={false} scrollEnabled={false}
toolbarEnabled={false} zoomEnabled={false}
rotateEnabled={false} toolbarEnabled={false}
minZoomLevel={18} rotateEnabled={false}
initialRegion={{ minZoomLevel={18}
latitude: location.latitude, initialRegion={{
longitude: location.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
loadingBackgroundColor={colors.secondary_2}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.latitude, latitude: location.latitude,
longitude: location.longitude, longitude: location.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} }}
pinColor={colors.primary_1} loadingBackgroundColor={colors.secondary_2}
/> >
</MapView> <UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.latitude,
longitude: location.longitude,
}}
pinColor={colors.primary_1}
/>
</MapView>
</View>
<View style={styles.padding} /> <View style={styles.padding} />
</View> </View>
<TextInput <TextInput

View file

@ -980,7 +980,9 @@ export default function Home() {
</AnimatedContainer> </AnimatedContainer>
</Modal> </Modal>
<AnimatedContainer> <AnimatedContainer>
<CustomMap /> <View style={{ borderRadius: 16, overflow: "hidden" }}>
<CustomMap />
</View>
</AnimatedContainer> </AnimatedContainer>
</View> </View>
); );

View file

@ -114,51 +114,53 @@ export default function StartStudying({ route }: any) {
<AnimatedContainerNoScroll> <AnimatedContainerNoScroll>
<View style={{ zIndex: -1 }}> <View style={{ zIndex: -1 }}>
<View style={styles.padding} /> <View style={styles.padding} />
<MapView <View style={{ borderRadius: 16, overflow: "hidden" }}>
style={{ <MapView
height: Viewport.height * 0.4, style={{
width: Viewport.width * 0.8, height: Viewport.height * 0.4,
alignSelf: "center", width: Viewport.width * 0.8,
}} alignSelf: "center",
customMapStyle={[ }}
{ customMapStyle={[
featureType: "poi", {
stylers: [ featureType: "poi",
{ stylers: [
visibility: "off", {
}, visibility: "off",
], },
}, ],
]} },
mapType="none" ]}
scrollEnabled={false} mapType="none"
zoomEnabled={false} scrollEnabled={false}
toolbarEnabled={false} zoomEnabled={false}
rotateEnabled={false} toolbarEnabled={false}
minZoomLevel={18} rotateEnabled={false}
initialRegion={{ minZoomLevel={18}
latitude: location.coords.latitude, initialRegion={{
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
loadingBackgroundColor={colors.secondary_2}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.coords.latitude, latitude: location.coords.latitude,
longitude: location.coords.longitude, longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} }}
pinColor={colors.primary_1} loadingBackgroundColor={colors.secondary_2}
/> >
</MapView> <UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}}
pinColor={colors.primary_1}
/>
</MapView>
</View>
<View style={styles.padding} /> <View style={styles.padding} />
</View> </View>
<DropDownPicker <DropDownPicker