how to using ThemeManager with typescript (default in react-native@0.71)

phuocantd commented 1 year ago

Description

when I use ThemeManager config some components like View, Text, ... then code display error

Type '{ children: Element; radius: number; customStyle: { width: number; height: number; backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & ViewProps & RefAttributes<View>'.

How to define type props to use it

Related to

[x] Components
[ ] Demo
[ ] Docs
[ ] Typings

More Info

Code snippet

import { StyleSheet, StyleProp, View } from 'react-native';
import { ThemeManager, } from 'react-native-ui-lib';

interface IViewCustomProps {
  radius?: number;
  customStyle?: StyleProp<View>
}

ThemeManager.setComponentTheme('View', ({ radius, customStyle }: IViewCustomProps) => {
  return {
    style: StyleSheet.flatten([
      {
        borderRadius: radius,
      },
      customStyle
    ])
  };
});

//using
<View
        radius={20}
        customStyle={{
          width: 100,
          height: 100,
          backgroundColor: '#f00',
        }}>

        <Text >Test</Text>
      </View>

Screenshots/Video

Environment

React Native version: 0.71
React Native UI Lib version: 6.29.0

Affected platforms

[x] Android
[x] iOS
[ ] Web

adrian-burkhart commented 1 year ago

The error is popping up because the View component does not accept radius or customStyle as props. In your example, you should be able to just pass a style prop to the View component directly, including a borderRadius attribute:

<View
  style={{
    borderRadius: 20,
    width: 100,
    height: 100,
    backgroundColor: "#f00",
  }}
>
  <Text>Test</Text>
</View>

phuocantd commented 1 year ago

The error is popping up because the View component does not accept radius or customStyle as props. In your example, you should be able to just pass a style prop to the View component directly, including a borderRadius attribute:
<View
  style={{
    borderRadius: 20,
    width: 100,
    height: 100,
    backgroundColor: "#f00",
  }}
>
  <Text>Test</Text>
</View>

I want to custom props with ThemManager

stale[bot] commented 1 year ago

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.

wix / react-native-ui-lib