StoDevX / AAO-React-Native

The St. Olaf community, now in pocket size.
GNU Affero General Public License v3.0
42 stars 16 forks source link

fix android menu daypart picker item label color crash #7095

Closed drewvolz closed 11 months ago

drewvolz commented 11 months ago

Noting the dependency version change is not necessary, the fix is localized to style changes.


Mode dropdown

Adding this prop to Android compacts the layout and attaches the items to the dropdown instead of opening a centered detached dialog.

On Android, specifies how to display the selection items when the user taps on the picker:

'dialog': Show a modal dialog. This is the default. 'dropdown': Shows a dropdown anchored to the picker view

Before After
Screenshot 2023-10-26 at 10 42 57 AM Screenshot 2023-10-26 at 11 36 37 AM

Debugging notes

We haven't used this picker in over a year so any style or color changes here for Android dynamic text color specifically for this one picker component for this component until recently, as noted in #7088 for iOS.

This has been around for 9 months in development since https://github.com/StoDevX/AAO-React-Native/commit/143a1bcf3ed2f4c2e84da5b78d42f683c07ad853.

Changes in #7088 did not impact this and are still safe. itemStyle only applies to iOS.

  1. modules/filter/section-picker.tsx has a text color set to c.label

  2. modules/colors/platform.ts Android label color is PlatformColor @android:color/primary_text_light

    export const label = Platform.select({
        ios: PlatformColor('label'),
        android: PlatformColor('@android:color/primary_text_light'),
        default: TEMP_ANDROID_FOREGROUND,
    })

Debugging, commenting out the style application to <Picker.Item /> at least renders without issue on Android

<Picker.Item
    key={i}
    label={val.label}
-   style={styles.pickerItem}
    value={JSON.stringify(val)}
/>

So we can try to just apply the text color to iOS here.

pickerItem: {
  ...Platform.select({
    ios: {
      color: c.label,
    },
  }),
},