ios - Expo Platform.version logic does not work

Question

I am new to React native and expo. I am using one package called @react-native-community/datetimepicker. @react-native-community/datetimepicker have version render. I have iphone 6 and ios:version= 12.5 and @react-native-community/datetimepicker render ios:14 and more by default.So, UI looks different from ios < 13 than ios > 14. I want to render app the based on device. When I render my app in my simulator(ios: 14.5) it looks like inside the modal there is button and in my device(ios:12.5) it looks modal is scrollable. But I don't know how to implement ios: version control.

here is my all code

import React, { useState } from 'react';
import { Modal, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import dayjs from 'dayjs';
import styled from 'styled-components';
import DateTimePicker from "@react-native-community/datetimepicker";

const majorVersionIOS = parseInt(Platform.OS.ios, 9);

console.log(`here`, majorVersionIOS);


const Container = styled.View`
 flex: 1;
 margin-bottom: 40px
`;

const ElementsBody = styled.View`

`;

const IconPosition = styled.View`
 position: absolute;
 right: 2px;
 top: 1px;
`;

const Label = styled.Text`
padding-left: 15px;
padding-top: 8px;
padding-bottom: 35px;
border-color: gray;
border-width: 1px;
border-radius: 10px;
font-size: 20px;
`;

export default function DatePicker() {
  const [date, setDate] = useState(new Date());
  const [show, setshow] = useState(false);


  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setshow(Platform.OS === `ios`);
    setDate(currentDate);
  };

  const renderDatePicker = () => {
    return (
      <DateTimePicker
        value={date}
        mode="date"
        is24Hour={true}
        display="default"
        onChange={onChange}
      />
    );
  };

  return (
    <TouchableOpacity
      onPress={() => setshow(true)}
    >
      <Container>
        <ElementsBody>
          <Label> {dayjs(date).format(`DD/MM/YYYY`)} </Label>
         
        </ElementsBody>
        {
          Platform.OS !== `ios` && show && renderDatePicker()
        }
        {
          Platform.OS === `ios` && // majorVersionIOS >14 && //this logic does not work if i add less than 13
         <Modal
           transparent= {true}
           animationType="slide"
           visible={show}
           supportedOrientations={[`portrait`]}
           onRequestClose={() => setshow(false)} >
           <View style={{ "flex": 1 }}>
             <TouchableOpacity
               style={{
                 "flex": 1,
                 "alignItems": `flex-end`,
                 "flexDirection": `row`
               }}

               visible={show}
               onPress={() => setshow(false)}
             >
               <TouchableOpacity
                 style={{
                   "flex": 1,
                   "borderTopColor": `#E9E9E9`,
                   "borderTopWidth": 1
                 }}
                 onPress={() => console.log(`datepicker picked`)}
               >
                 <View
                   style={{
                     "backgroundColor": `#FFFFFF`,
                     "height": 256,
                     "overflow": `hidden`
                   }}
                 >
                   <View style={{ "marginTop": 20 }}>
                     {renderDatePicker()}
                   </View>
                 </View>
               </TouchableOpacity>
             </TouchableOpacity>
           </View>
         </Modal>
        }
      </Container>
    </TouchableOpacity>

  );
}

question from:https://stackoverflow.com/questions/66061595/expo-platform-version-logic-does-not-work

Answer 1

Waitting for answers