feat(exoflex): Theme Styles

[danielsukmana]

Will resolve #320

• Accordion
• ActivityIndicator
• AvatarIcon
• AvatarImage
• AvatarText
• Badge
• Button
• Calendar
• Checkbox
• Chip
• Collapsible
• DateTimePicker
• Divider
• DrawerItem
• IconButton
• Menu
• MenuItem
• ProgressBar
• RadioButton
• SegmentedControl
• Slider
• Switch
• Text
• TextInput
• TimePicker
• Toast

[sstur]

Wow, this is really comprehensive theme configuration!

[oshimayoan]

I think it's better if we flatten the themeStyle first as there could be a chance that the user using a style that generated by StyleSheet.create() for the theme style.

Ref: https://facebook.github.io/react-native/docs/stylesheet.html#flatten

[danielsukmana]

Would you clarify whether to apply StyleSheet.flatten specifically at this part or everywhere?

Mostly these styles are used for internal Views and Texts, which are also using styles generated by StyleSheet.create. These props here are for View, Text, and AnimatedIcon (which is an Animated.View). Is StyleSheet.flatten necessary?

[oshimayoan]

When we create a style using StyleSheet.create() and use it, it will return the ID instead of the style object:

For example:

const styles = StyleSheet.create({
  listItem: {
    flex: 1,
    fontSize: 16,
    color: 'white',
  },
  selectedListItem: {
    color: 'green',
  },
});

StyleSheet.flatten(styles.listItem);
// returns { flex: 1, fontSize: 16, color: 'white' }
// Simply styles.listItem would return its ID (number)

That's why it would be safer to flatten it first to get the style object instead of doing optional chaining over the ID which is a number.

And I think it would be ideal if we flatten the themeStyle every time we want to use it. Because there is a high chance that the user will use the generated style object from StyleSheet.create(), not the pure object.

[danielsukmana]

When we create a style using StyleSheet.create() and use it, it will return the ID instead of the style object

Yup, I know about this.

But, now I'm confused. Our component props have style, someStyle, and someContainerStyle which will most likely come from StyleSheet.create(), yet we simply pass them on without calling StyleSheet.flatten(). Shall we also flatten those styles or are these two different cases?

Note that I'm following the way we're passing style from props towards the component.

[danielsukmana]

Discussed in person and we'll create a different PR to use StyleSheet.flatten() on all styles that come from the user.

Nevermind, after further discussion, we figured out that there was a misunderstanding and there's no need to use StyleSheet.flatten().