продолжаем переносить проект из react js браузерное приложение в react native для android MyTodoApp\components\MobilePicker\ index.tsx import React, { useEffect, useMemo, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import { addDays, addMonths, eachDayOfInterval, format } from 'date-fns';
import ruLocale from 'date-fns/locale/ru';
import classNames from 'classnames';
import styles from './MobilePicker.module.scss';
import './swiper.css';

interface MobilePickerProps {
  onChange: (date: Date) => void;
  closeCalendar: () => void;
}

const MINUTES_INTERVAL = 15;
const HOURS = Array.from({ length: 24 }, (_, i) => i);
const INITIAL_MINUTES = [0, 15, 30, 45, 0, 15, 30, 45];

const MobilePicker: React.FC<MobilePickerProps> = ({ onChange, closeCalendar }) => {
  const now = new Date();
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
  const [currentHourIndex, setCurrentHourIndex] = useState(now.getHours());
  const [currentMinuteIndex, setCurrentMinuteIndex] = useState(
    INITIAL_MINUTES.indexOf(now.getMinutes() - (now.getMinutes() % MINUTES_INTERVAL)),
  );

  const [dates, setDates] = useState(() => {
    const startDate = new Date();
    const endDate = addMonths(startDate, 3);
    return eachDayOfInterval({ start: startDate, end: endDate });
  });

  const formattedReturnDate = useMemo(() => {
    const newDate = new Date(dates[currentSlideIndex]);
    newDate.setHours(currentHourIndex);
    newDate.setMinutes(INITIAL_MINUTES[currentMinuteIndex % 4]);
    return newDate;
  }, [currentSlideIndex, currentHourIndex, currentMinuteIndex, dates]);

  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);

  useEffect(() => {
    if (currentSlideIndex > dates.length - 31) {
      const newDates = eachDayOfInterval({
        start: addDays(dates[dates.length - 1], 1),
        end: addMonths(dates[dates.length - 1], 1),
      });
      setDates((prevDates) => [...prevDates, ...newDates]);
    }
  }, [currentSlideIndex, dates]);

  useEffect(() => {
    onChange(formattedReturnDate);
  }, [formattedReturnDate, onChange]);

  const handleButtonClickSave = async () => {
    await closeCalendar();
  };

  return (
    <div className={styles.picker}>
      <div className={styles.controlButton}>
        <button onClick={handleButtonClickSave}>Сохранить</button>
      </div>
      <div className={styles.pickerTitle}>
        {format(dates[currentSlideIndex], 'dd/MM/yyyy', { locale: ruLocale })}
        {currentHourIndex.toString().padStart(2, '0')}:
        {INITIAL_MINUTES[currentMinuteIndex].toString().padStart(2, '0')}
      </div>

      <div className={styles.pickerWrapper}>
        <div className={classNames(styles.pickerWheels, styles.pickerDate)}>
          <Swiper
            direction={'vertical'}
            centeredSlides={true}
            slidesPerView={3}
            loop={false}
            onSlideChange={(swiper) => setCurrentSlideIndex(swiper.realIndex)}
            className={styles.pickerSwiper}>
            {dates.map((date) => (
              <SwiperSlide key={date.toISOString()}>
                {format(date, 'EEEEEE, d MMM', { locale: ruLocale })}
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
        <div className={classNames(styles.pickerWheels, styles.pickerTime)}>
          <Swiper
            direction={'vertical'}
            centeredSlides={true}
            initialSlide={now.getHours()}
            slidesPerView={3}
            loop={true}
            onSlideChange={(swiper) => setCurrentHourIndex(swiper.realIndex)}
            className={styles.pickerSwiper}>
            {HOURS.map((hour) => (
              <SwiperSlide key={hour}>{hour.toString().padStart(2, '0')}</SwiperSlide>
            ))}
          </Swiper>
          <div className={styles.pickerTimeColon}>:</div>
          <Swiper
            direction={'vertical'}
            centeredSlides={true}
            loopedSlides={4}
            initialSlide={currentMinuteIndex}
            slidesPerView={3}
            loop={true}
            onSlideChange={(swiper) => setCurrentMinuteIndex(swiper.realIndex)}
            className={styles.pickerSwiper}>
            {INITIAL_MINUTES.map((minute, index) => (
              <SwiperSlide key={`${minute}-${index}`}>
                {minute.toString().padStart(2, '0')}
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </div>
  );
};

export default MobilePicker;
MobilePicker.module.scss @mixin pickerWheels {
  //   margin-right: 10px;
  border: 0;
  &::before {
    content: '';
    position: absolute;
    display: block;
    border-top: 1px solid #78bafd;
    top: 174px;
  }
  &::after {
    content: '';
    position: absolute;
    display: block;
    border-bottom: 1px solid #78bafd;
    top: 220px;
  }
}

.picker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #11100f;
  z-index: 1;
}
.controlButton {
  display: flex;
  justify-content: end;

  button {
    width: 110px !important;
    height: 50px !important;
    margin-top: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    color: #78bafd !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
  }
}
.pickerWrapper {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding: 0 15px;
}
.pickerTitle {
  text-align: center;
  border-bottom: 1px solid #7a7676;
  padding: 15px;
}
.pickerWheels {
  text-align: center;
}
.pickerDate {
  width: 160px;
  @include pickerWheels;
  &::before,
  &::after {
    width: 160px;
  }
}
.pickerTime {
  width: 120px;
  display: flex;
  align-items: center;
  @include pickerWheels;
  &::before,
  &::after {
    width: 120px;
  }
}
.pickerTimeColon {
  margin-top: 10px;
  display: flex;
  align-items: center;
  height: 130px;
  font-size: 20px;
}

.pickerMonth {
  width: 100px;
  @include pickerWheels;
  &::before,
  &::after {
    width: 100px;
  }
}

.pickerYear {
  width: 50px;
  @include pickerWheels;
  &::before,
  &::after {
    width: 50px;
  }
}
.pickerHour {
  width: 60px;
  //   margin-left: 35px;
  @include pickerWheels;
  &::before,
  &::after {
    width: 60px;
  }
}
.pickerMinute {
  width: 50px;
  @include pickerWheels;
  &::before,
  &::after {
    width: 50px;
  }
}
.pickerLabel {
  width: 50px;
  height: 50px;
  text-align: center;
}
swiper.css .swiper {
    width: 100%;
    height: 140px;
    margin-top: 15px;
    
  }
  
  .swiper-slide {
    /* width: 50px; */
    height: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 0;
    background: transparent;
    /* opacity: 0.5; */
  
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* .swiper-slide-active{
    font-size: 20px;
    opacity: 1;
   
  }
  .swiper-slide-prev, .swiper-slide-next {
    font-size: 14px;
    opacity: 0.7;
  } */
вообще наверное плагин для браузерной версии мобильного и не нужен там ведь свой