profile
viewpoint

Ask questionsCould UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

💬 Question

Could UI Kitten use StyleSheet.create to generate the style objects inside the render methods when new eva styles are received from the higher order styled component?

If so, expo web/react-native-web would generate atomic css classes instead of redundant inline styles, which is what currently happens because UI kitten does not use the StyleSheet.create api to generate the style objects that get set as the style prop on react-native primitives (inspect any example from docs to see inline styles). This is suboptimal for web output, because if you have 20 UI kitten buttons on a page, you get all the styles repeated inline 20 times. If the StyleSheet.create api was used, all 20 would reference the same atomic css classes for each style rule. However, there may be performance implications of using StyleSheet.create in render functions that I'm not considering, so that's why I submitted a Question instead of a Feature Proposal.

Example

This generates inline styles on react-native-web:

const CustomElement = (props) => {
  const container = {
    backgroundColor: "green",
    width: 200,
    height: 200,
    color: "#fff",
  };
  return <View style={container}>some element</View>;
};

Output:

inlinestyles

This generates atomic css classes because it uses the StyleSheet.create api:

const CustomElement = (props) => {
  const styles = StyleSheet.create({
    container: {
      backgroundColor: "green",
      width: 200,
      height: 200,
      color: "#fff",
    },
  });
  const { container } = styles;
  return <View style={container}>some element</View>;
};

Output:

atomiccss

Code Change

I believe making this change would involve updating all the getComponentStyle methods to call StyleSheet.create instead of returning a regular object:

https://github.com/akveo/react-native-ui-kitten/blob/cacd67cb5ac0303eb9179e24607e695b58f012dd/src/components/ui/button/button.component.tsx#L167-L183

UI Kitten and Eva version

Package Version
@eva-design/eva 2.0.0
@ui-kitten/components 5.0.0
akveo/react-native-ui-kitten

Answer questions RWOverdijk

True. That's what happens when using the exported styles object as well.

I've decided to let go of this for now and instead focus on my own implementation of this. What I've learned thus far is that it's extremely difficult to come up with a nice way of doing this. So I'm leaving this out there for someone else to tackel while I just use a context provider and write my own components.

useful!
source:https://uonfu.com/
Github User Rank List