Infra/refactor view - convert to function component and use modifiers and themeProps hooks (#2146)

* Add new infra for modifiers and themeProps hooks

* Convert view to function component and use modifiers and theme props hooks

* Create global ThemeComponent interface

* Remove redundant ThemeComponent type in asBaseComponent

* memoize view style

Author: ethanshar

src/commons/asBaseComponent.tsx

@@ -18,11 +18,6 @@ export interface AsBaseComponentOptions {
   modifiersOptions?: Modifiers.ModifiersOptions;
 }
 
-// TODO: find a proper way to inject this type in the private repo
-type ThemeComponent = {
-  useCustomTheme?: boolean;
-};
-
 const EMPTY_MODIFIERS = {};
 
 function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentType<any>,

src/components/chipsInput/index.tsx

@@ -484,6 +484,7 @@ class ChipsInput extends Component<OwnProps, State> {
     const Container = maxHeight ? ScrollView : View;
     return (
       <Container
+        // @ts-expect-error
         ref={this.scrollRef}
         showsVerticalScrollIndicator={false}
         style={!maxHeight && styles.tagsList}

src/components/toast/index.js

@@ -11,8 +11,6 @@ import Button from '../button';
 import Text from '../text';
 
 
-// Create animated view base on uilib view for the safeArea support
-const AnimatedView = Animated.createAnimatedComponent(View);
 const COLOR = Colors.white;
 
 /**
@@ -330,22 +328,24 @@ export default class Toast extends PureBaseComponent {
     });
 
     return (
-      <AnimatedView
+      <View
+        animated
         testID={testID}
         style={[positionStyle, {zIndex, transform: [{translateY}]}]}
         pointerEvents={'box-none'}
       >
         {!isTop && !!toastHeight && this.renderAttachmentContent()}
-        <AnimatedView
+        <View
           useSafeArea
+          animated
           style={[{backgroundColor: bg, opacity}, style]}
           onLayout={this.onToastLayout}
           pointerEvents={visible ? 'auto' : 'none'}
         >
           {this.renderContent()}
-        </AnimatedView>
+        </View>
         {isTop && !!toastHeight && this.renderAttachmentContent()}
-      </AnimatedView>
+      </View>
     );
   }
 }

src/components/view/index.tsx

@@ -1,16 +1,10 @@
-import React, {PureComponent} from 'react';
+import {useModifiers, useThemeProps} from 'hooks';
+import React, {useEffect, useMemo, useState} from 'react';
 import {View as RNView, SafeAreaView, Animated, ViewProps as RNViewProps, StyleProp, ViewStyle} from 'react-native';
 import Reanimated from 'react-native-reanimated';
-import {
-  Constants,
-  asBaseComponent,
-  forwardRef,
-  BaseComponentInjectedProps,
-  ForwardRefInjectedProps,
-  ContainerModifiers
-} from '../../commons/new';
+import {Constants, ContainerModifiers} from '../../commons/new';
 
-export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifiers {
+export interface ViewProps extends Omit<RNViewProps, 'style'>, ThemeComponent, ContainerModifiers {
   /**
    * If true, will render as SafeAreaView
    */
@@ -46,106 +40,98 @@ export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifier
   style?: StyleProp<ViewStyle | Animated.AnimatedProps<ViewStyle>>;
 }
 
-type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & ViewProps;
-
-interface ViewState {
-  ready: boolean;
-}
+const modifiersOptions = {
+  backgroundColor: true,
+  borderRadius: true,
+  paddings: true,
+  margins: true,
+  alignments: true,
+  flex: true,
+  position: true
+};
 
 /**
  * @description: An enhanced View component
  * @extends: View
  * @extendsLink: https://reactnative.dev/docs/view
  * @modifiers: margins, paddings, alignments, background, borderRadius
  */
-class View extends PureComponent<PropsTypes, ViewState> {
-  static displayName = 'View';
-  private Container: React.ClassType<any, any, any>;
-
-  constructor(props: PropsTypes) {
-    super(props);
-
-    this.Container = props.useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
-    if (props.reanimated) {
-      this.Container = Reanimated.createAnimatedComponent(this.Container);
-    } else if (props.animated) {
-      this.Container = Animated.createAnimatedComponent(this.Container);
-    }
-
-    this.state = {
-      ready: !props.renderDelay
-    };
-  }
+function View(props: ViewProps, ref: any) {
+  const themeProps = useThemeProps(props, 'View');
+  const {
+    renderDelay,
+    style,
+    // (!) extract left, top, bottom... props to avoid passing them on Android
+    /* eslint-disable */
+    left,
+    top,
+    right,
+    bottom,
+    flex: propsFlex,
+    /* eslint-enable */
+    inaccessible,
+    useSafeArea,
+    animated,
+    reanimated,
+    children,
+    ...others
+  } = themeProps;
+  const {backgroundColor, borderRadius, paddings, margins, alignments, flexStyle, positionStyle} = useModifiers(themeProps,
+    modifiersOptions);
+  const [ready, setReady] = useState(!renderDelay);
 
-  componentDidMount() {
-    const {renderDelay} = this.props;
+  useEffect(() => {
     if (renderDelay) {
       setTimeout(() => {
-        this.setState({ready: true});
+        setReady(true);
       }, renderDelay);
     }
-  }
+  }, []);
 
-  // TODO: do we need this?
-  setNativeProps(nativeProps: any) {
-    //@ts-ignore
-    this._root.setNativeProps(nativeProps); // eslint-disable-line
-  }
+  const ViewContainer = useMemo(() => {
+    const container = useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
 
-  render() {
-    if (!this.state.ready) {
-      return null;
+    if (reanimated) {
+      return Reanimated.createAnimatedComponent(container);
+    } else if (animated) {
+      return Animated.createAnimatedComponent(container);
     }
 
-    // (!) extract left, top, bottom... props to avoid passing them on Android
-    // eslint-disable-next-line
-    const {
-      modifiers,
-      style,
-      /* eslint-disable */
-      left,
-      top,
-      right,
-      bottom,
-      flex: propsFlex,
-      /* eslint-enable */
-      forwardedRef,
-      inaccessible,
-      ...others
-    } = this.props;
-    const {backgroundColor, borderRadius, paddings, margins, alignments, flexStyle, positionStyle} = modifiers;
-    const Element = this.Container;
-    return (
-      <Element
-        accessibilityElementsHidden={inaccessible}
-        importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined}
-        {...others}
-        style={[
-          backgroundColor && {backgroundColor},
-          borderRadius && {borderRadius},
-          flexStyle,
-          positionStyle,
-          paddings,
-          margins,
-          alignments,
-          style
-        ]}
-        ref={forwardedRef}
-      >
-        {this.props.children}
-      </Element>
-    );
+    return container;
+  }, [useSafeArea, animated, reanimated]);
+
+  const _style = useMemo(() => {
+    return [
+      backgroundColor && {
+        backgroundColor
+      },
+      borderRadius && {
+        borderRadius
+      },
+      flexStyle,
+      positionStyle,
+      paddings,
+      margins,
+      alignments,
+      style
+    ];
+  }, [backgroundColor, borderRadius, flexStyle, positionStyle, paddings, margins, alignments, style]);
+
+  if (!ready) {
+    return null;
   }
-}
 
-const modifiersOptions = {
-  backgroundColor: true,
-  borderRadius: true,
-  paddings: true,
-  margins: true,
-  alignments: true,
-  flex: true,
-  position: true
-};
+  return (
+    <ViewContainer
+      accessibilityElementsHidden={inaccessible}
+      importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined}
+      {...others}
+      style={_style}
+      ref={ref}
+    >
+      {children}
+    </ViewContainer>
+  );
+}
 
-export default asBaseComponent<ViewProps>(forwardRef(View), {modifiersOptions});
+export default React.forwardRef<RNView, ViewProps>(View);

typings/globalTypes.d.ts

@@ -14,3 +14,7 @@ declare module 'react-native-measureme';
 interface Extendable {
   [key: string]: any;
 }
+
+interface ThemeComponent {
+  useCustomTheme?: boolean;
+}