Merge pull request GeekyAnts#3342 from GeekyAnts/feat/v3-factory

Feat/v3 factory

example/storybook/stories/components/composites/factory/index.tsx

@@ -5,10 +5,12 @@ import Wrapper from './../../Wrapper';
 import Usage from './usage';
 import Theme from './theme';
 import Modes from './modes';
+import Ref from './ref';
 
 storiesOf('Factory', module)
   .addDecorator(withKnobs)
   .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
   .add('Usage', () => <Usage />)
   .add('Theme', () => <Theme />)
-  .add('Modes', () => <Modes />);
+  .add('Modes', () => <Modes />)
+  .add('Ref', () => <Ref />);

example/storybook/stories/components/composites/factory/ref.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { NBFactory, Button } from 'native-base';
+import { TextInput } from 'react-native';
+
+export default function () {
+  const NBInput = NBFactory(TextInput);
+  const inputRef = React.useRef(null);
+  return (
+    <>
+      <NBInput ref={inputRef} height={10} border={1} borderColor="cyan.400" />
+      <Button
+        onPress={() => {
+          // @ts-ignore
+          inputRef?.current?.focus();
+        }}
+      >
+        Set Focus
+      </Button>
+    </>
+  );
+}

src/core/factory/index.tsx

@@ -31,7 +31,7 @@ export function NBFactory<P>(
   Component: React.ComponentType<P>,
   componentTheme?: ComponentTheme
 ) {
-  return function WithFactory(props: P & FactoryComponentProps) {
+  return React.forwardRef((props: P & FactoryComponentProps, ref: any) => {
     const StyledComponent = styled(Component as AnyStyledComponent)(
       color,
       background,
@@ -53,8 +53,8 @@ export function NBFactory<P>(
       customLayout
     );
     const calculatedProps = usePropsWithComponentTheme(componentTheme, props);
-    return <StyledComponent {...(calculatedProps as P)} />;
-  };
+    return <StyledComponent {...(calculatedProps as P)} ref={ref} />;
+  });
 }
 
 export type { FactoryComponentProps };