Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

карта не всегда отображается с необходимым размером (Height) на ios #269

Open
anis-18 opened this issue Nov 15, 2023 · 2 comments

Comments

@anis-18
Copy link

anis-18 commented Nov 15, 2023

карта не всегда отображается с необходимым размером на ios. даже если size указана в собственных стилях
эта ошибка встречается только в ios. Чтобы узнать больше об ошибке, посмотрите видео.

это мой код

import React from 'react';
import { Dimensions, View } from 'react-native';
import { NATIVE_STYLE } from 'features/yandex-map/native-yandex-map-styles';
import { useAppSelector } from 'hooks/redux-hooks';
import YaMap from 'react-native-yamap';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

interface Props<T> {
  scrollGesturesEnabled?: boolean;
  mapHeight?: number;
  mapWidth?: number;
  onPress: () => void;
  markers?: T[]; // Array of markers of any type
  renderMarker: (marker: T, index: number) => React.ReactNode;
}

export function MapView(props: Props<any>) {
  const { userPosition } = useAppSelector(state => state.appState);
  const yandexMapRef = React.useRef<YaMap>(null);
  const [zoom, setZoom] = React.useState<number>(10);

  React.useEffect(() => {
    if (props.markers) {
      yandexMapRef?.current?.fitAllMarkers();
    }
  }, [props.markers, userPosition]);

  return (
    <View style={{ height: 200, width: deviceWidth }}>
      <YaMap
        scrollGesturesEnabled={props.scrollGesturesEnabled}
        logoPosition={{ horizontal: 'right', vertical: 'bottom' }}
        style={{ flex: 1 }}
        ref={yandexMapRef}
        showUserPosition
        followUser
        userLocationAccuracyFillColor="rgba(202, 215, 249, 0.5)"
        onCameraPositionChangeEnd={e => setZoom(e.nativeEvent.zoom)}
        mapStyle={NATIVE_STYLE}
        userLocationIcon={require('../../assets/yandex-map/user-location-image.png')}
        initialRegion={{
          lat: userPosition?.lat ?? 55.79880694983767,
          lon: userPosition?.lon ?? 49.11185043089338,
          zoom: 10,
          azimuth: 0,
          tilt: 0,
        }}>
        {props.markers?.map((marker, index) =>
          props.renderMarker(marker, index),
        )}
      </YaMap>
    </View>
  );
}

the native style

export const NATIVE_STYLE = JSON.stringify([
  {
    types: ['point'],
    tags: { all: ['transit'] },
    stylers: {
      visibility: 'off',
    },
  },
]);
Simulator.Screen.Recording.-.iPhone.12.mini.-.2023-11-15.at.17.38.42.mp4
@anis-18 anis-18 changed the title карта не всегда отображается с необходимой высотой (Height) на ios карта не всегда отображается с необходимом размером (Height) на ios Nov 15, 2023
@anis-18 anis-18 changed the title карта не всегда отображается с необходимом размером (Height) на ios карта не всегда отображается с необходимым размером (Height) на ios Nov 15, 2023
@Abdumaliks
Copy link

Столкнулся точно таким же проблемой на платформе IOS, есть ли у кого-то идеи по поводу решения проблемы?

@Critically
Copy link

Есть кто победил ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants