Selected touchable item has a background color of undefined

[jgornick]

Describe the bug
Using latest 6.0.1-beta.10 (also noticed on 6.0.1-beta.9).

When selecting an item (i.e., story) in the sidebar, the background color isn't being applied, causing the text of the item to blend into the background and look missing.

Based on some some initial research, it seems the theme.listItemActiveColor is undefined for the component.

To Reproduce
Steps to reproduce the behavior:

1. Click on any story in the sidebar list.

Expected behavior
The background color should resolve to the theme configured value of "blue-like"

Screenshots
Default story selected:

Floating story selected:

Default story selected inspector:

[dannyhw]

@jgornick Thanks for reporting this, I haven't seen it myself. Do you know how I can reproduce it?

[jgornick]

Hey @dannyhw! Interesting that you haven't seen this before. I didn't think our setup of the StorybookUI was that much different than the example. Here's our StorybookUI Wrapper that we use to initialize the StorybookUI with support for deep linking to a story.

We then just register this wrapper as our component: AppRegistry.registerComponent(appName, () => StorybookUIWrapper)

Are there additional steps needed to provide the theme to the StorybookUI component?

[dannyhw]

@jgornick 🤔 strange, well I know that there are sometimes issues with the theming so its probably not a difficult fix. In the past I had to put default values every time the theme was used. I think its just another case like that, though I don't have time right now to check it I will look into as soon as I can.

[dannyhw]

probably if we just put like
({ selected, theme }) => (selected ? { backgroundColor: theme.listItemActiveColor ? 'the-blue-color' } : {})

it would resolve it for now.

Fixing theming is something for another day 😅

[jgornick]

If you want, I can get a PR submitted?

[dannyhw]

@jgornick that would be more than welcome 🙏