How can i have a seperate component just for web ?

So i found this date picker that only works on mobile devices

How can i show the web based date picker which works just for web platform & is hidden on ios and android ?

There are a couple of ways to do this. See the following documenation:

and also this:

We are using different controls for the web than for the mobile device but on the web using the standard HTML input field, which is not fully compatible with all browsers, e.g. Safari. So on the web side we don’t have a perfect setup at this time. Below is our code which handles the web differently from the mobile. You could swap out the web part below with the React date/time picker, it’s not as pretty but it looks like it works across all browsers: https://reactdatepicker.com

import {DateTimePickerModal} from "react-native-modal-datetime-picker";
import { Text } from "react-native";

...
const initialState = { date1: "" };

function myForm({navigation}) {
  const [state, setState] = useState(initialState);
...

  const handleChange_webDatePicker = (event) => {
    setFormState("date1", event.target.value);
  }
  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };
  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };
  const handleConfirm = date => {
    setState("date1", date.toLocaleString());
    hideDatePicker();
  };

...
if(Platform.OS === "ios" || Platform.OS === "android") {
      return(
        <View>
            <DateTimePickerModal
                isVisible={isDatePickerVisible}
                onConfirm={handleConfirm}
                onCancel={hideDatePicker}
                mode={"datetime"}
                is24Hour={true}
                date={state.date1!=undefined ? new Date(state.date1) : new Date()}
                value={state.date1}
            />
            <Text style={[globalStyles.detailsLabel]}>Date label</Text>
            <Input
                disabled={true}
                onTouchEnd={()=>{showDatePicker();
                placeholder="Date placeholder"
                value={state.date}
                style={mystyle.label}
            />
        </View>
      );
    } else {
      return(
        <View>
            <Text style={[mystyle.label]}>Date label</Text>
            <TextField
                type="datetime-local"
                value={state.date1}
                onChange={handleChange_webDatePicker}
                className={classes.textField}
                InputLabelProps={{
                shrink: true,
                }}
            />
        </View>
      );
    }