After upgrading to 5.1.1 issue with render styles

sergeushenecz commented 3 years ago

Hello everyone. Thanks for the library.

🐛 Bug Report

After merged this PR https://github.com/akveo/react-native-ui-kitten/commit/8b454e1b0b85d1416b69316ea093873a4583a4eb appear problems with styles. Exactly https://github.com/akveo/react-native-ui-kitten/commit/8b454e1b0b85d1416b69316ea093873a4583a4eb in all places where was add this code.

If read documentation it says about React.cloneElement The resulting element will have the original element’s props with the new props merged in shallowly.

https://reactjs.org/docs/react-api.html#cloneelement

To Reproduce

Link on exampe. https://codesandbox.io/s/jolly-flower-hdgpz?file=/src/App.js

Expected behavior

I think to need revert code part from PR where use React.cloneElement(component, props) to

return React.createElement(component as RenderFCProp, props as Props);

it turns out that cloneElement overwrites styles.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package	Version
@eva-design/eva	5.1.1
@ui-kitten/components	5.1.1

Environment information

sergeushenecz commented 3 years ago

@whitestranger7 Hi could you confirm the problem and revert it places

whitestranger7 commented 3 years ago

Hey, @sergeu90. Could you please provide some examples using UI Kitten to make issue more appropriate?

sergeushenecz commented 3 years ago

@whitestranger7 Yes, sure

import styles from './styles';

const Test = () => {
    const themedStyles = useStyleSheet(styles);

    return (
        <Button>
            <Text category="s1" style={themedStyles.textStyleDigitBtn}>test</Text>
        </Button>
    );
}

// styles.js 
export default StyleService.create({
  textStyleDigitBtn: {
    color: COLORS.basic.textBasic,
    fontSize: 20,
  },
});

Then in this case textStyleDigitBtn not apllied styles

You can check it and make sure

siarheipashkevich commented 3 years ago

@whitestranger7 yes, I can confirm that the issue is valid.

akveo / react-native-ui-kitten