Picker not vertically centered

[feduss]

Hi! First of all, thanks for your work! I really like this date picker dialog :)! But i have a problem: it isn't vertically centered, and idk why. I've followed your example under "Basic usage" section.

I'm using:

"@expo-google-fonts/roboto": "0.2.0", "react-native-modal": "13.0.0", "react": "17.0.2", "react-dom": "17.0.2", "react-native": "0.66.3", "expo": "43.0.4"

If you need more info to help me to fix this issue, i will provide them :)

[roto93]

Hi @feduss, it's happy to hear that you like it😄 and thanks for reporting this issue. This is really weird🤔 I have not figured out any possible reason yet. But I just realize that one of the dependencies, react-native-modal, had a breaking change in its latest version (v13.0.0) and therefore Expo projects may have some bugs. Could you try upgrading this package to v1.1.3 first and see if this issue still exists?

[feduss]

@roto93 maybe did you mean v11.3? 1.1.3 doesn't exist :)! Btw, even with 11.3 it isn't vertically centered :/

[roto93]

My bad, I mean react-native-neat-date-picker v1.1.3 I just updated my package two hours ago.

[feduss]

ok, i've updated your package to 1.1.3 and downgraded modal from 13.0.0 to 12.1.0, and it's the same :(...i will try with a blank project later

[roto93]

Does this issue appear on both real device and simulator? Because I can't reproduce this issue, I have no idea how to solve it at the moment :( Maybe you can provide the output of expo diagnostics and the steps to reproduce if it's possible.

[feduss]

Yes, both simulator and a physical smartphone...i'm creating a blank project to see if the bug persists (and, in that case, share the project with you)

[feduss]

@roto93 This is the sample project, let me know when you have time, thanks :)

https://github.com/feduss/DatePickerNotVertCenteredIssue6

just run it with "expo start" and open the ip address expo provides you...the only page is the same you've in your readme

[roto93]

Thank you. I can work on this these two days. I notice that this repo is just a blank expo project. I don't see any page but an expo template page in it. Maybe you forget to push your commits?

[feduss]

I'm just lazy and i've put your tutorial in App.js

https://github.com/feduss/DatePickerNotVertCenteredIssue6/blob/master/App.js

It's a veeery basic "app" with only your tutorial :'D...because yes, i can reproduce the issue even in this basic project :(

[roto93]

Sorry but this is what I see in your App.js I don't see the tutorial code 😕

[roto93]

Anyway, I started with your repo and did the following steps

1. npm install
2. npm install react-native-neat-date-picker
3. expo start
4. replace the code in App.js by Basic Usage from my readme

The app looks normal. The modal is centered vertically. btw, this is on my real device.

[roto93]

Here is my fork

[feduss]

Uhm, sorry...there should be a problem with the push :/...btw, i've tried your fork and ... i have understood that the problem is only in the web version of the app, not in the expo one! In the expo app the picker is correctly centered, but not in the browser.

browser:

expo:

maybe your picker isn't optimized for browser, and so i'm using it wrongly :D

[roto93]

Yeah you're right. I tended to developing this date picker only for phones and didn't think of the usage for web. But now I know what causing this issue, thanks for your information. I will let you know when it is fixed. It should be a quick fix

[roto93]

Hi @feduss I've fixed it. Please update date picker to the latest version and try again.

[feduss]

Hi @feduss sorry for late reply as yesterday, but i think we have different time zone :)!

Your fix worked!!! Nice job, thanks for your patience and help :)! Issue closed!