konvertiere diesen react code und react styles (css) in react native code und stylesheet styles: 


import { useState, useRef, useEffect } from "react";
import classes from "./TimePicker.module.css"

export const TimePicker = ({ nextSlide }) => {
    const verfugbarZeiten = {start: "09:00", end: "22:00"}
    const [selectedTime, setSelectedTime] = useState("09:00");
    const scrollerRef = useRef(null);
    const [endTime, setEndTime] = useState("20:00");
    const minBookingDuration = 2;

    const generateTimeSlots = (start, end) => {
        const slots = [];
        let current = new Date(`2000-01-01T${start}`);
        const endTime = new Date(`2000-01-01T${end}`);
        const lastSelectableTime = new Date(endTime);
        lastSelectableTime.setHours(lastSelectableTime.getHours() - minBookingDuration);

        while (current <= lastSelectableTime) {
            slots.push(current.toTimeString().slice(0, 5));
            current.setMinutes(current.getMinutes() + 30);
        }
        return slots;
    };

    const timeSlots = generateTimeSlots(verfugbarZeiten.start, verfugbarZeiten.end);

    const handleScroll = () => {
        if (scrollerRef.current) {
            const scrollTop = scrollerRef.current.scrollTop;
            const itemHeight = 40;
            const selectedIndex = Math.round(scrollTop / itemHeight);
            setSelectedTime(timeSlots[selectedIndex % timeSlots.length]);
        }
    };

    useEffect(() => {
        if (scrollerRef.current) {
            const initialScrollTop = timeSlots.indexOf(selectedTime) * 40;
            scrollerRef.current.scrollTop = initialScrollTop;
        }
    }, []);

  return (
    <div className={classes.container}>
        <header className={classes.header}>
            <h1 className={`${classes.title} titleSemibold3`}>Montag, 7. Juni 2024</h1>
        </header>
        <div className={classes.titleContainer}>
            <span className="regularXxs">Verfügbar:</span>
            <span className={`${classes.time} regularXxs`}>{verfugbarZeiten.start} Uhr - {verfugbarZeiten.end} Uhr</span>
        </div>
        <div className={classes.timeContainer}>
            <div className={classes.scrollerWrapper}>
                <div className={classes.scroller} ref={scrollerRef} onScroll={handleScroll}>
                {timeSlots.map((time, index) => (
                    <div 
                        key={index} 
                        className={`${classes.timeSlot} ${index % timeSlots.length === timeSlots.indexOf(selectedTime) ? classes.selected : ''}`}
                    >
                        {time}
                    </div>
                ))}
                </div>
            </div>
            <span className={classes.separator}>bis</span>
            
        </div>
        <div className={classes.selectedTime}>
            Selected Time: {selectedTime}
        </div>
        <div className={classes.weiterButtonContainer}>
            <button className={classes.weiterButton} onClick={nextSlide}>Weiter</button>
        </div>
    </div>
  );
};

export default TimePicker;



----
TimePicker.module.css:


.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 120px;
}

.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 38px 0 16px 0;
    border-bottom: 1px solid var(--light-grey-1);
    margin-bottom: 18px;
}

.titleContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin-bottom: 43px;
}

.titleContainer span {
    color: var(--grey-1);
}

.time {
    border-radius: 12px;
    border: 1px solid var(--blue-grey);
    padding: 6px 20px;
}

.timeContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.scrollerWrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.scroller {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding: 80px 0;
}

.timeSlot {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    padding: 11px 47px;
}

.timeSlot.selected {
    background: var(--light-grey-2);
    border-radius: 6px;
}

.scroller::-webkit-scrollbar {
    display: none;
}

.scroller {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.weiterButtonContainer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-top: 1px solid var(--light-grey-2);
}

.weiterButton {
    width: 100%;
    border-radius: 12px;
    border: 0;
    background: var(--light-black);
    color: #FAFAFA;
    font-family: var(--primary-font);
    font-size: 1rem;
    padding: 17px 0;
}