iOS Incorrect width calculation in iOS DateTimePicker inside views with absolute positioning

Offen
  • Stimmt etwas nicht?
#987 3 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
ios, javascript, react-native
Bereich
frontend, mobile

Rechercherichtung

Start by reproducing the width mismatch using the provided DateTimePicker example inside an absolutely positioned View on iOS with React Native 0.76.9 and the new architecture enabled. Then trace how the iOS picker measures its width in that layout; done means it expands to the parent’s 100% width while retaining the reported behavior in a regular view. The issue names no source files or tests, so finding the relevant implementation and regression coverage will require exploring the project.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Bug report

Summary

Can't resize RNDateTimePicker component to 100% in position: absolute views after upgrading react-native to 0.76.9 version. Also see that generally DateTimePicker not stable with new react-native architecture.

Reproducible sample code

If i just render this time picker inside screen:

          <DateTimePicker
            mode={'time'}
            locale='en-EN'
            value={new Date()}
            style={{ width: '100%', height: 200 }}
            onChange={() => {}}
            textColor={'white'}
            display={'spinner'}
          />

Everything works fine, but If i render this picker inside some position absolute view I see that picker width is default and I can't fit to parent width (incorrect width calculating):

      <View
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          top: 600,
          zIndex: 100,
          height: 200,
          width: '100%',
          backgroundColor: 'green',
        }}
      >
        <DateTimePicker
          mode={'time'}
          locale='en-EN'
          value={new Date()}
          style={{ width: '100%', height: 200, backgroundColor: 'gray' }}
          onChange={() => {}}
          textColor={'white'}
          display={'spinner'}
        />
      </View>

Steps to reproduce

  1. Place DateTimePicker inside position: absolute view
  2. Component doesn't fit correctly to parent's width

Describe what you expected to happen:

  1. Place DateTimePicker inside position: absolute view
  2. Should resize to 100% of parent's width

Environment info

npx react-native info output:

System:
  OS: macOS 15.3.2
  CPU: (12) arm64 Apple M2 Max
  Memory: 104.30 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.3
    path: ~/.nvm/versions/node/v18.20.3/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.20.3/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/eduarddunda/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-31 | ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /Users/eduarddunda/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/eduarddunda/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.9
    wanted: 0.76.9
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

datetimepicker version: 8.4.1

iOS / Android version: iOS 17.5 Simulator

P.S

Screenshot with example:

  1. picker picker is general component render
  2. second picker is wrapper inside absolute positioned view
Screenshot

Image

Vorherrschende Sprache
JavaScript
Sterne
2.9k
Forks
459
Ø Merge
4 T. 16 Std.
Gemergte PRs (30 T.)
5

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-native-datetimepicker/datetimepicker

Alle Issues in react-native-datetimepicker/datetimepicker

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.