Fixes for SafeAreaView and minor improvements

babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins:
+    process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : [],
 };

example/storybook/stories/hooks/usePopover/index.tsx

@@ -4,7 +4,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import Wrapper from './../../components/Wrapper';
 import Usage from './Usage';
 
-storiesOf('useClipboard', module)
+storiesOf('usePopover', module)
   .addDecorator(withKnobs)
   .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
   .add('Usage', () => <Usage />);

package.json

@@ -48,6 +48,7 @@
     "@types/styled-components-react-native": "^5.1.0",
     "@types/styled-system": "^5.1.9",
     "@types/tinycolor2": "^1.4.2",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "commitlint": "^8.3.5",
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.11.0",

src/components/composites/Popover/Tooltip.tsx

@@ -36,7 +36,7 @@ export type Props = {
   borderWidth?: number;
 };
 
-class Tooltip extends React.Component<Props, State> {
+class Tooltip extends React.PureComponent<Props, State> {
   state = {
     isVisible: false,
     yOffset: 0,

src/components/composites/Transitions/useFadeTransition.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Animated, Platform } from 'react-native';
-import { canUseDom } from '../../../utils';
+import { canUseDom } from '../../../utils/canUseDom';
 
 export const useFadeTransition = (
   duration = 500,

src/components/primitives/Icon/index.tsx

@@ -46,7 +46,7 @@ const Icon = (iconProps: IIconProps) => {
     return <SVGIcon {...iconProps} />;
   }
   const flattenedIconStyle: TextStyle = StyleSheet.flatten([
-    { fontSize: newProps.size },
+    { fontSize: parseInt(newProps.size, 10) },
   ]);
   switch (type) {
     case 'AntDesign':

src/components/primitives/SafeAreaView/index.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+import { FlexboxProps, flexbox } from 'styled-system';
+import { SafeAreaView as RNSafeAreaView, ViewProps } from 'react-native';
+import { customBackground } from '../../../utils/customProps';
+import type { customBackgroundProps } from '../../../utils/customProps';
+
+export type IViewProps = ViewProps & FlexboxProps & customBackgroundProps;
+const SafeAreaView: any = styled(RNSafeAreaView)<IViewProps>(
+  flexbox,
+  customBackground
+);
+
+export default SafeAreaView;

src/components/primitives/Slider/Slider.tsx

@@ -15,7 +15,7 @@ type StateType = {
   value: number;
 };
 
-class NBSlider extends React.Component<
+class NBSlider extends React.PureComponent<
   ISliderProps & {
     thumbSize?: number;
     sliderSize?: number;

src/components/primitives/Text/index.tsx

@@ -10,7 +10,7 @@ import {
   flexbox,
   border,
 } from 'styled-system';
-import { usePropsConfig } from '../../../hooks';
+import { usePropsConfig } from '../../../hooks/usePropsConfig';
 import {
   customBorder,
   customBackground,

src/core/NativeBaseProvider.tsx

@@ -4,7 +4,6 @@ import {
   ThemeContext,
   ThemeProvider,
 } from 'styled-components/native';
-import { SafeAreaView, StyleSheet } from 'react-native';
 import { theme as defaultTheme, ITheme } from './../theme';
 import {
   IColorModeProviderProps,
@@ -14,14 +13,7 @@ import {
 import OverlayProvider from './Overlay/OverlayProvider';
 import PopoverProvider from './Popover/PopoverProvider';
 import View from '../components/primitives/View';
-
-const ColoredBackground = ({ children, ...props }: any) => (
-  <View {...props} bg={useColorModeValue(`gray.50`, `gray.800`)} flex={1}>
-    <OverlayProvider>
-      <PopoverProvider>{children}</PopoverProvider>
-    </OverlayProvider>
-  </View>
-);
+import SafeAreaView from '../components/primitives/SafeAreaView';
 
 export interface NativeBaseProviderProps {
   theme?: ITheme;
@@ -35,28 +27,21 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => {
     colorModeManager,
     theme = defaultTheme,
     disableSafeArea,
-    ...rest
+    children,
   } = props;
 
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-  });
-
+  const Wrapper = disableSafeArea ? View : SafeAreaView;
   return (
     <ThemeProvider theme={theme}>
       <ColorModeProvider
         colorModeManager={colorModeManager}
         options={theme.config}
       >
-        {disableSafeArea ? (
-          <ColoredBackground {...rest} />
-        ) : (
-          <SafeAreaView style={styles.container}>
-            <ColoredBackground {...rest} />
-          </SafeAreaView>
-        )}
+        <Wrapper bg={useColorModeValue(`gray.50`, `gray.800`)} flex={1}>
+          <OverlayProvider>
+            <PopoverProvider>{children}</PopoverProvider>
+          </OverlayProvider>
+        </Wrapper>
       </ColorModeProvider>
     </ThemeProvider>
   );

src/core/factory/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { AnyStyledComponent } from 'styled-components';
 import styled from 'styled-components/native';
-import { usePropsWithComponentTheme } from './../../hooks/usePropsConfig';
+import { usePropsWithComponentTheme } from './../../hooks/usePropsConfig/usePropsWithComponentTheme';
 import type { ComponentTheme } from './../../theme';
 import {
   background,

src/hooks/usePropsConfig/index.ts

@@ -0,0 +1,2 @@
+export { usePropsConfig } from './useProps';
+export { usePropsWithComponentTheme } from './usePropsWithComponentTheme';

src/hooks/usePropsConfig/useProps.tsx

@@ -0,0 +1,47 @@
+import get from 'lodash/get';
+import omit from 'lodash/omit';
+import { useWindowDimensions } from 'react-native';
+import { useNativeBase } from './../useNativeBase';
+import { omitUndefined, extractInObject } from './../../theme/tools/';
+import { filterShadowProps } from './../../utils/filterShadowProps';
+import { calculateProps } from './utils';
+
+const filterAndCalculateProps = (
+  theme: any,
+  colorModeProps: any,
+  componentTheme: any,
+  propsReceived: any,
+  windowWidth: any
+) => {
+  // Extracting out children and style, as they do not contribute in props calculation
+  let [ignoredProps, props] = extractInObject(propsReceived, [
+    'children',
+    'style',
+    'onPress',
+    'icon',
+    'onOpen',
+    'onClose',
+  ]);
+  let newProps = calculateProps(
+    theme,
+    colorModeProps,
+    componentTheme,
+    props,
+    windowWidth
+  );
+  let mergedProps = filterShadowProps(newProps, ignoredProps);
+  return omitUndefined(mergedProps);
+};
+
+export function usePropsConfig(component: string, propsReceived: any) {
+  const { theme, ...colorModeProps } = useNativeBase();
+  const componentTheme = get(theme, `components.${component}`);
+  let windowWidth = useWindowDimensions()?.width;
+  return filterAndCalculateProps(
+    omit(theme, ['components']),
+    colorModeProps,
+    componentTheme,
+    propsReceived,
+    windowWidth
+  );
+}

src/hooks/usePropsConfig/usePropsWithComponentTheme.ts

@@ -0,0 +1,19 @@
+import omit from 'lodash/omit';
+import { useWindowDimensions } from 'react-native';
+import { useNativeBase } from './../useNativeBase';
+import { calculateProps } from './utils';
+
+export function usePropsWithComponentTheme(
+  localTheme: any,
+  propsReceived: any
+) {
+  const { theme, ...colorModeProps } = useNativeBase();
+  let windowWidth = useWindowDimensions()?.width;
+  return calculateProps(
+    omit(theme, 'components'),
+    colorModeProps,
+    localTheme,
+    propsReceived,
+    windowWidth
+  );
+}