Expo DateTimePickers cancel & ok button can't see at spinner display

Question

I'm using expo DateTimePicker, My issue is when I choose spinner display their cancel and Ok buttons are not display but I can see on other display mode.

I used

"expo": "~43.0.2", "@react-native-community/datetimepicker": "3.5.2",

My Code

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

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

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={date}
          // is24Hour={true}
          display="spinner"
          onChange={onChange}
        />
      )}
    </View>
  );
};

export default App;

Thanks

Answer 1

This issue seems to be still unresolved for expo built apps,however for me at least,the problem appears only when testing the app in expo go app,after i built the app to be published in the stores,its working fine there.

Answer 2

One solution you could use below.

 let strategypricingDetail = [
      {
        id: 3,
        name: "test",
        price: 30,
        daysOfWeek: [
          { id: 1, name: "Monday" },
          { id: 2, name: "Tuesday" },
          { id: 3, name: "Wednesday" }
        ]
      },
      {
        id: 23,
        name: "Testing2",
        price: 10,
        daysOfWeek: [
          { id: 1, name: "Monday" },
          { id: 2, name: "Tuesday" }
        ]
      },
      {
        id: 13,
        name: "Testing3",
        price: 14,
        daysOfWeek: [
          { id: 1, name: "Saturaday" },
          { id: 2, name: "Sunday" }
        ]
      }
    ];
  
let finalList = [];  

// Create list of eligible days for the search
let daysToInclude = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
];
strategypricingDetail.forEach((item, index) => {
  for (let i = 0; i < item.daysOfWeek.length; i++) {
  // Check if the day is in the eligible list
    if (daysToInclude.includes(item.daysOfWeek[i].name)) {
      finalList.push(item);      
      break;
      // When found, break out of the search after adding it to the final list.
    }
  }
});

console.log(finalList)

In this solution, you loop through the available items, and then compare each item's 'daysOfWeel' list with a list of eligible days. As soon as it finds one, it'll stop searching, and add that item to a new list, until you end with the list of appropriate days.

Answer 3

//StrategypricingDetail is the whole json
const StrategypricingDetail = [
  {
    id: 3,
    name: "test",
    price: 30,
    daysOfWeek: [
      { id: 1, name: "Monday" },
      { id: 2, name: "Tuesday" },
      { id: 3, name: "Wednesday" }
    ]
  },
  {
    id: 23,
    name: "Testing2",
    price: 10,
    daysOfWeek: [
      { id: 1, name: "Monday" },
      { id: 2, name: "Tuesday" }
    ]
  },
  {
    id: 13,
    name: "Testing3",
    price: 14,
    daysOfWeek: [
      { id: 1, name: "Saturaday" },
      { id: 2, name: "Sunday" }
    ]
  }
];

const weekends = ["Saturaday","Sunday"]
// Approach
// we have to filter some element based on condition
// condition will be days should not belong to weekends
this.getPriceWeekDay = StrategypricingDetail.filter((rec) => {
  for(let dayIndex = 0 ; dayIndex < rec.daysOfWeek.length; dayIndex++){
    const dayName = rec.daysOfWeek[dayIndex].name;
    if(weekends.includes(dayName)){
       return;
    }
  }
  return rec;
}).map(({price}) => price);

console.log(getPriceWeekDay);