I dont see the time values in the dialog

[pivocoder]

Since I updated in my expo to a newer react version I have issues with the selection of the time. Once I scroll I see numbers but before they are blank.

<TimerPickerModal
       visible={showPickerExecution}
       setIsVisible={setShowPickerExecution}
       onConfirm={(pickedDuration) => {
         timeAsana.set(getTotalSecondsOfTimeSelection(pickedDuration), 0);
         setShowPickerExecution(false);
         setShowPickerObserving(true);
       }}
       styles={{
         theme: "light",
       }}
       initialValue={{
         hours: executionTime.hours ? parseInt(executionTime.hours) : 0,
         minutes: executionTime.minutes ? parseInt(executionTime.minutes) : 0,
         seconds: executionTime.seconds ? parseInt(executionTime.seconds) : 0,
       }}
       modalTitle="Set Execution Time"
       closeOnOverlayPress
       LinearGradient={LinearGradient}
       modalProps={{
         overlayOpacity: 0.2,
       }}
     />

"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.3",

[troberts-28]

Hey @pivocoder,

Thanks for raising this, will take a look ASAP. Just to confirm, are you on Expo SDK 52, and react-native-timer-picker v2.0.0?

[pivocoder]

Yes, I'm using "expo": "^52.0.11", and "react-native-timer-picker": "^2.0.0", are in my package.json :). I run into this issue because I have updated my expo sdk. Thanks for the quick answer

[troberts-28]

Struggling to recreate this. Two more questions to help me track this down:

1. Are you on the new architecture? (i.e. do you have newArchEnabled: true in your app.json/app.config.js)
2. Can you log the value and type of those initial values you're passing to the picker (executionTime.hours ? parseInt(executionTime.hours) : 0 etc.)? I'm suspicious that invalid initial values could be the cause of the issue (e.g. if executionTime.hours was a non-numerical string, the boolean check would pass, and then parsing it as in integer would result in a NaN input. Even if that's not the problem, I would suggest changing your initial value code to this parseInt(executionTime.hours) || 0 (i.e. attempt to parse it as an integer, which will give NaN if the input is null, undefined or non-numeric. In that case, fallback to zero)

[troberts-28]

Hey @pivocoder,

I've just released a patch (v2.0.1) that may (or may not!) address your issues. The patch fixes two things:

• NaN inputs to initial values (and other variables) breaking the picker.
• Pickers sometimes not snapping to values. This was caused by a slight change in RN's FlatList between v0.74 and v0.76. Although the behaviour is not the same, I wonder if this might have been the underlying cause of your issue.

In any case, try out v2.0.1 and let me know if it solves your issue!

[pivocoder]

Hi,

maybe my configuration of my expo is not correct but the behaviour is strange, even with your new v2.0.1

<TimerPickerModal visible={showPickerExecution} setIsVisible={setShowPickerExecution} onConfirm={(pickedDuration) => { timeAsana.set(getTotalSecondsOfTimeSelection(pickedDuration), 0); setShowPickerExecution(false); setShowPickerObserving(true); }} initialValue={{ hours: 0, minutes: 0, seconds: 0, }} modalTitle="Set Execution Time" onCancel={() => setShowPickerExecution(false)} closeOnOverlayPress LinearGradient={LinearGradient} modalProps={{ overlayOpacity: 0.2, }} />
I

open once and it shows correctly

but once I dont scroll and confirm or cancel multiple times it sometimes shows again nothing. I cant really point the finger on the trigger. The behavior is not consistent for me

I have newArch= true in my app.json

here is my expo config
"dependencies": {
"@react-native-community/datetimepicker": "8.2.0",
"@react-native-community/slider": "4.5.5",
"@types/react": "~18.3.12",
"expo": "^52.0.11",
"expo-asset": "~11.0.1",
"expo-av": "~15.0.1",
"expo-constants": "~17.0.3",
"expo-file-system": "~18.0.4",
"expo-image": "~2.0.2",
"expo-keep-awake": "~14.0.1",
"expo-linear-gradient": "~14.0.1",
"expo-linking": "~7.0.3",
"expo-router": "~4.0.9",
"expo-status-bar": "~2.0.0",
"lodash": "^4.17.21",
"metro": "^0.81.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.3",
"react-native-draggable-flatlist": "^4.0.1",
"react-native-drawer-layout": "^4.0.3",
"react-native-gesture-handler": "~2.20.2",
"react-native-paper": "^5.11.4",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-timer-picker": "^2.0.1",
"react-native-vector-icons": "^10.0.3",
"react-native-web": "~0.19.6",
"reanimated": "0.0.1-alpha",
"typescript": "^5.1.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/plugin-transform-class-properties": "^7.18.6",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-transform-optional-chaining": "^7.21.0",
"glob": "^9.0.0",
"rimraf": "^4.0.0"
},
"private": true
}

Do you see any issues here ?

[troberts-28]

Can't see anything obviously wrong with your setup. Unrelated but @types/react and typescript should both be in your
devDependencies 😇

But that context you gave about opening and closing the modal will help me track it down. Will take another look and get back to you.

[troberts-28]

Still struggling to reproduce this. I've created an Expo Snack that mirrors your setup - can you reproduce it in here?

https://snack.expo.dev/@nuumi/issue-43-demo

[troberts-28]

Hey @pivocoder, just checking in on this. Were you able to reproduce the issue in the Snack?

[pivocoder]

Hi @troberts-28,

sorry for my late response. I was able to reproduce the issue in your snack. I just clicked cancel multiple times and it appeared in the android emulator the same issue. When I try it in web it works.

[troberts-28]

Ah I should have asked what platform you were on! It's something Android-specific (hence why I wasn't able to reproduce initially). Should be able to figure out the problem now - will keep you updated on my progress.

[troberts-28]

This should now be fixed in the recently-released v2.0.2 🎊

It was another manifestation of the issue I solved for iOS in v2.0.1 where the FlatList in each picker wasn't always able to calculate its layout (this became a problem in React Native v0.76+).

Please upgrade to v2.0.2 and let me know if you encounter any issues 🙌