Values as props to 3rd party components

[deklanw]

I need to supply an object like this as a prop to React Navigation:

 {
    initialRouteName: 'RootStack',
    contentComponent: CustomDrawerContentComponent,
    unmountInactiveRoutes: true,
    drawerWidth: EStyleSheet.value('$width') * 0.8,
    contentOptions: {
      activeTintColor: EStyleSheet.value('$lightPurple'),
      inactiveTintColor: EStyleSheet.value('$grey3'),
      // activeBackgroundColor
      itemStyle: EStyleSheet.create({
        height: () => EStyleSheet.value('$rem') * 3
      }),
      labelStyle: EStyleSheet.create({
        fontFamily: 'jost-book',
        fontWeight: 'normal',
        fontSize: () => EStyleSheet.value('$rem') * 1.125
      }),
      // activeLabelStyle
      inactiveLabelStyle: EStyleSheet.create({
        color: () => EStyleSheet.value('$grey1')
      }),
      itemsContainerStyle: EStyleSheet.create({
        marginVertical: () => EStyleSheet.value('$rem') * 0.625
      }),
      iconContainerStyle: EStyleSheet.create({
        height: () => EStyleSheet.value('$rem') * 3,
        width: () => EStyleSheet.value('$rem') * 3,
        marginRight: 0,
        alignItems: 'center',
        justifyContent: 'center'
      })
    }
  }

Because I can't guarantee build has been run at this point, I have to do a bunch of tedious wrapping with create and value.

I can't, however, figure out how to properly do drawerWidth, activeTintColor, and inactiveTintColor, as they aren't objects. Clearly I could just use regular variables instead, but that would defeat the purpose of having all my variables defined in build (not to mention wouldn't work with rem plus media-queries). As this is currently, I get unresolved variable errors for those three properties.

In addition to getting those three properties working, is there a cleaner way to do this overall? Like, a way to guarantee build is called first so I don't need to do all this wrapping? Something else?

[vitalets]

Hi @deklanw ! Maybe subscription to build event can help?

EStyleSheet.subscribe('build', () => {
  // do something
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.