@draftbit/core 47.1.1-dbfde6.2 → 47.2.1-a33ddf.2

package/src/components/Picker/Picker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Keyboard, } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -32,10 +32,13 @@ function normalizeOptions(options) {
 }
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
-const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
+//Empty string for 'value' is treated as a non-value
+//reason: Draftbit uses empty string as initial value for string state*/
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -44,12 +47,15 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         setPickerVisible(!pickerVisible);
     };
     React.useEffect(() => {
-        if (value != null) {
+        if (value != null && value !== "") {
             setInternalValue(value);
         }
+        else if (value === "") {
+            setInternalValue(undefined);
+        }
     }, [value]);
     React.useEffect(() => {
-        if (defaultValue != null) {
+        if (defaultValue != null && defaultValue !== "") {
             setInternalValue(defaultValue);
         }
     }, [defaultValue]);
@@ -59,11 +65,26 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [pickerVisible, androidPickerRef]);
-    const normalizedOptions = normalizeOptions(options);
-    const pickerOptions = placeholder
-        ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
-        : normalizedOptions;
-    const { colors } = theme;
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
+    const normalizedOptions = React.useMemo(() => normalizeOptions(options), [options]);
+    //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+    //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+    const pickerOptions = React.useMemo(() => placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions, [placeholder, normalizedOptions]);
+    //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+    if (!placeholder &&
+        pickerOptions.length &&
+        !internalValue &&
+        internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+    ) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(pickerOptions[0].value, 0);
+        setInternalValue(pickerOptions[0].value);
+    }
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [
@@ -158,10 +179,14 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         ...(disabled ? { color: unstyledColor } : {}),
     };
     const handleValueChange = (newValue, itemIndex) => {
-        if (!placeholder || itemIndex > 0) {
+        if (newValue !== "" && newValue !== placeholder) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
+            setInternalValue(newValue);
+        }
+        else if (newValue === placeholder) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("", 0);
+            setInternalValue(undefined);
         }
-        setInternalValue(newValue);
     };
     return (
     /* marginsContainer */
@@ -183,16 +208,11 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                     rightIcon)),
             assistiveTextLabel),
         isIos && pickerVisible ? (React.createElement(Portal, null,
-            React.createElement(View, { style: [
-                    styles.iosPicker,
-                    {
-                        backgroundColor: colors.divider,
-                    },
-                ] },
-                React.createElement(SafeAreaView, { style: styles.iosSafeArea },
+            React.createElement(SafeAreaView, { style: styles.iosPicker },
+                React.createElement(View, { style: styles.iosPickerContent },
                     React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
                     React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
-        !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
+        !isIos && (pickerVisible || isWeb) ? (React.createElement(NativePicker, { enabled: !disabled, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
 const styles = StyleSheet.create({
     marginsContainer: {
@@ -239,9 +259,9 @@ const styles = StyleSheet.create({
         width: "100%",
         maxWidth: deviceWidth,
         maxHeight: deviceHeight,
-    },
-    iosSafeArea: {
         backgroundColor: "white",
+    },
+    iosPickerContent: {
         flexDirection: "column",
         width: "100%",
         maxWidth: deviceWidth,

package/src/components/Picker/Picker.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
+  Keyboard,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -48,6 +49,7 @@ export type PickerProps = {
   placeholderTextColor?: string;
   rightIconName?: string;
   type?: "solid" | "underline";
+  autoDismissKeyboard?: boolean;
   theme: Theme;
   Icon: IconSlot["Icon"];
 };
@@ -84,10 +86,14 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
 
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
 
+//Empty string for 'value' is treated as a non-value
+//reason: Draftbit uses empty string as initial value for string state*/
 const Picker: React.FC<PickerProps> = ({
   error,
   options = [],
@@ -98,7 +104,6 @@ const Picker: React.FC<PickerProps> = ({
   placeholder,
   value,
   disabled = false,
-  theme,
   assistiveText,
   label,
   iconColor = unstyledColor,
@@ -108,6 +113,7 @@ const Picker: React.FC<PickerProps> = ({
   placeholderTextColor = unstyledColor,
   rightIconName,
   type = "solid",
+  autoDismissKeyboard = true,
 }) => {
   const androidPickerRef = React.useRef<any | undefined>(undefined);
 
@@ -122,13 +128,15 @@ const Picker: React.FC<PickerProps> = ({
   };
 
   React.useEffect(() => {
-    if (value != null) {
+    if (value != null && value !== "") {
       setInternalValue(value);
+    } else if (value === "") {
+      setInternalValue(undefined);
     }
   }, [value]);
 
   React.useEffect(() => {
-    if (defaultValue != null) {
+    if (defaultValue != null && defaultValue !== "") {
       setInternalValue(defaultValue);
     }
   }, [defaultValue]);
@@ -139,13 +147,37 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, androidPickerRef]);
 
-  const normalizedOptions = normalizeOptions(options);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
 
-  const pickerOptions = placeholder
-    ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
-    : normalizedOptions;
+  const normalizedOptions = React.useMemo(
+    () => normalizeOptions(options),
+    [options]
+  );
 
-  const { colors } = theme;
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = React.useMemo(
+    () =>
+      placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions,
+    [placeholder, normalizedOptions]
+  );
+
+  //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (
+    !placeholder &&
+    pickerOptions.length &&
+    !internalValue &&
+    internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+  ) {
+    onValueChange?.(pickerOptions[0].value, 0);
+    setInternalValue(pickerOptions[0].value);
+  }
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -296,10 +328,13 @@ const Picker: React.FC<PickerProps> = ({
   };
 
   const handleValueChange = (newValue: string, itemIndex: number) => {
-    if (!placeholder || itemIndex > 0) {
+    if (newValue !== "" && newValue !== placeholder) {
       onValueChange?.(newValue, itemIndex);
+      setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange?.("", 0);
+      setInternalValue(undefined);
     }
-    setInternalValue(newValue);
   };
 
   return (
@@ -347,15 +382,8 @@ const Picker: React.FC<PickerProps> = ({
       {/* iosPicker */}
       {isIos && pickerVisible ? (
         <Portal>
-          <View
-            style={[
-              styles.iosPicker,
-              {
-                backgroundColor: colors.divider,
-              },
-            ]}
-          >
-            <SafeAreaView style={styles.iosSafeArea}>
+          <SafeAreaView style={styles.iosPicker}>
+            <View style={styles.iosPickerContent}>
               <Button
                 Icon={Icon}
                 type="text"
@@ -378,15 +406,16 @@ const Picker: React.FC<PickerProps> = ({
                   />
                 ))}
               </NativePicker>
-            </SafeAreaView>
-          </View>
+            </View>
+          </SafeAreaView>
         </Portal>
       ) : null}
 
       {/* nonIosPicker */}
-      {!isIos && pickerVisible ? (
+      {/* Web version is collapsed by default, always show to allow direct expand */}
+      {!isIos && (pickerVisible || isWeb) ? (
         <NativePicker
-          enabled={pickerVisible}
+          enabled={!disabled}
           selectedValue={internalValue}
           onValueChange={handleValueChange}
           style={styles.nonIosPicker}
@@ -451,9 +480,9 @@ const styles = StyleSheet.create({
     width: "100%",
     maxWidth: deviceWidth,
     maxHeight: deviceHeight,
-  },
-  iosSafeArea: {
     backgroundColor: "white",
+  },
+  iosPickerContent: {
     flexDirection: "column",
     width: "100%",
     maxWidth: deviceWidth,

package/src/components/Pressable.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Pressable as NativePressable, } from "react-native";
-export default function Pressable({ children, disabled, onPress, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }) {
+export default function Pressable({ children, disabled, onPress, activeOpacity = 0.8, disabledOpacity = 0.8, delayLongPress, hitSlop, style, ...props }) {
     return (React.createElement(NativePressable, { onPress: onPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: ({ pressed }) => {
             return [
                 {

package/src/components/Pressable.tsx

@@ -15,8 +15,8 @@ export default function Pressable({
   children,
   disabled,
   onPress,
-  activeOpacity,
-  disabledOpacity,
+  activeOpacity = 0.8,
+  disabledOpacity = 0.8,
   delayLongPress,
   hitSlop,
   style,

package/src/components/ScreenContainer.js

@@ -3,7 +3,8 @@ import { StyleSheet, ScrollView, View, } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { withTheme } from "../theming";
 function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
-    const backgroundColor = theme.colors.background;
+    var _a;
+    const backgroundColor = ((_a = StyleSheet.flatten(style)) === null || _a === void 0 ? void 0 : _a.backgroundColor) || theme.colors.background;
     const edges = ["left", "right"];
     if (hasSafeArea || hasTopSafeArea) {
         edges.push("top");

package/src/components/ScreenContainer.tsx

@@ -31,7 +31,8 @@ function ScreenContainer({
   children,
   ...rest
 }: ScreenContainerProps) {
-  const backgroundColor = theme.colors.background;
+  const backgroundColor =
+    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background;
 
   const edges: Edge[] = ["left", "right"];
   if (hasSafeArea || hasTopSafeArea) {

package/src/components/Shadow.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Shadow as ShadowComponent } from "react-native-shadow-2";
+import { extractBorderAndMarginStyles, extractSizeStyles } from "../utilities";
+const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, paintInside = true, style, ...rest }) => {
+    const { borderStyles } = extractBorderAndMarginStyles(style);
+    const shadowStyles = StyleSheet.flatten([
+        borderStyles,
+        extractSizeStyles(style),
+    ]);
+    const containerStyle = StyleSheet.flatten(style);
+    Object.keys(shadowStyles).forEach((key) => delete containerStyle[key]);
+    return (React.createElement(ShadowComponent, { offset: [offsetX, offsetY], sides: {
+            start: showShadowSideStart,
+            end: showShadowSideEnd,
+            top: showShadowSideTop,
+            bottom: showShadowSideBottom,
+        }, corners: {
+            topStart: showShadowCornerTopStart,
+            topEnd: showShadowCornerTopEnd,
+            bottomStart: showShadowCornerBottomStart,
+            bottomEnd: showShadowCornerBottomEnd,
+        }, style: shadowStyles, containerStyle: containerStyle, paintInside: paintInside, ...rest }));
+};
+export default Shadow;

package/src/components/Shadow.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Shadow as ShadowComponent } from "react-native-shadow-2";
+import { extractBorderAndMarginStyles, extractSizeStyles } from "../utilities";
+
+interface ShadowProps {
+  disabled?: boolean;
+  startColor?: string;
+  endColor?: string;
+  distance?: number;
+  paintInside?: boolean;
+  stretch?: boolean;
+  offsetX?: number;
+  offsetY?: number;
+  showShadowSideStart?: boolean;
+  showShadowSideEnd?: boolean;
+  showShadowSideTop?: boolean;
+  showShadowSideBottom?: boolean;
+  showShadowCornerTopStart?: boolean;
+  showShadowCornerTopEnd?: boolean;
+  showShadowCornerBottomStart?: boolean;
+  showShadowCornerBottomEnd?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
+  offsetX = 0,
+  offsetY = 0,
+  showShadowSideStart = true,
+  showShadowSideEnd = true,
+  showShadowSideTop = true,
+  showShadowSideBottom = true,
+  showShadowCornerTopStart = true,
+  showShadowCornerTopEnd = true,
+  showShadowCornerBottomStart = true,
+  showShadowCornerBottomEnd = true,
+  paintInside = true,
+  style,
+  ...rest
+}) => {
+  const { borderStyles } = extractBorderAndMarginStyles(style);
+
+  const shadowStyles = StyleSheet.flatten([
+    borderStyles,
+    extractSizeStyles(style),
+  ]);
+
+  const containerStyle = StyleSheet.flatten(style) as StyleProp<any>;
+  Object.keys(shadowStyles).forEach((key) => delete containerStyle[key]);
+
+  return (
+    <ShadowComponent
+      offset={[offsetX, offsetY]}
+      sides={{
+        start: showShadowSideStart,
+        end: showShadowSideEnd,
+        top: showShadowSideTop,
+        bottom: showShadowSideBottom,
+      }}
+      corners={{
+        topStart: showShadowCornerTopStart,
+        topEnd: showShadowCornerTopEnd,
+        bottomStart: showShadowCornerBottomStart,
+        bottomEnd: showShadowCornerBottomEnd,
+      }}
+      style={shadowStyles}
+      containerStyle={containerStyle}
+      paintInside={paintInside}
+      {...rest}
+    />
+  );
+};
+
+export default Shadow;

package/src/components/Surface.js

@@ -7,7 +7,7 @@ import { withTheme } from "../theming";
 const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
     const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
     const { dark: isDarkTheme, mode, colors } = theme;
-    const elevation = propElevation || styleElevation;
+    const elevation = propElevation !== null && propElevation !== void 0 ? propElevation : styleElevation;
     const evalationStyles = elevation ? shadow(elevation) : {};
     const getBackgroundColor = () => {
         if (backgroundColor) {

package/src/components/Surface.tsx

@@ -34,7 +34,7 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
 
   const { dark: isDarkTheme, mode, colors } = theme;
 
-  const elevation = propElevation || styleElevation;
+  const elevation = propElevation ?? styleElevation;
 
   const evalationStyles = elevation ? shadow(elevation) : {};
 

package/src/components/TabView/TabView.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
+import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
+const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
+    const [index, setIndex] = React.useState(0);
+    const [routes, setRoutes] = React.useState([]);
+    const [tabScenes, setTabScenes] = React.useState({});
+    const { textStyles, viewStyles } = extractStyles(style);
+    //Check type of child using props
+    //Regular '.type' cannot work because Draftbit strips the type in Draft view
+    const instanceOfTabViewItemProps = (object) => {
+        return "title" in object;
+    };
+    //Populate routes and scenes based on children
+    React.useEffect(() => {
+        const newRoutes = [];
+        const scenes = {};
+        React.Children.toArray(children)
+            .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
+            .forEach((item, idx) => {
+            const child = item;
+            newRoutes.push({
+                key: idx.toString(),
+                title: child.props.title,
+                icon: child.props.icon,
+                accessibilityLabel: child.props.accessibilityLabel,
+            });
+            scenes[idx] = () => child;
+        });
+        setRoutes(newRoutes);
+        setTabScenes(scenes);
+    }, [children]);
+    const indexChangeHandler = (i) => {
+        setIndex(i);
+        onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
+        if (i === routes.length) {
+            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+        }
+    };
+    const renderTabBar = (props) => {
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
+                backgroundColor: indicatorColor || theme.colors.primary,
+            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
+                backgroundColor: tabsBackgroundColor || theme.colors.background,
+            } }));
+    };
+    //Cannot render TabView without at least one tab
+    if (!routes.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(TabView, { style: [viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default withTheme(TabViewComponent);

package/src/components/TabView/TabView.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import {
+  TabView,
+  TabBar,
+  SceneMap,
+  SceneRendererProps,
+  NavigationState,
+  Route,
+} from "react-native-tab-view";
+
+import { TabViewItemProps } from "./TabViewItem";
+import type { IconSlot } from "../../interfaces/Icon";
+import { withTheme } from "../../theming";
+import type { Theme } from "../../styles/DefaultTheme";
+import { extractStyles } from "../../utilities";
+
+type TabBarProps = SceneRendererProps & {
+  navigationState: NavigationState<any>;
+};
+type TabBarPosition = "top" | "bottom";
+type KeyboardDismissMode = "none" | "auto" | "on-drag";
+
+type TabViewProps = {
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+  tabBarPosition?: TabBarPosition;
+  keyboardDismissMode?: KeyboardDismissMode;
+  swipeEnabled?: boolean;
+  scrollEnabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  pressColor?: string;
+  indicatorColor?: string;
+  tabsBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
+  Icon,
+  onIndexChanged,
+  onEndReached,
+  tabBarPosition,
+  keyboardDismissMode,
+  swipeEnabled,
+  scrollEnabled,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  indicatorColor,
+  tabsBackgroundColor,
+  style,
+  theme,
+  children,
+}) => {
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState<Route[]>([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = (
+    object: any
+  ): object is TabViewItemProps => {
+    return "title" in object;
+  };
+
+  //Populate routes and scenes based on children
+  React.useEffect(() => {
+    const newRoutes: Route[] = [];
+    const scenes: any = {};
+
+    React.Children.toArray(children)
+      .filter(
+        (child) =>
+          React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
+      )
+      .forEach((item: any, idx) => {
+        const child = item as React.ReactElement;
+        newRoutes.push({
+          key: idx.toString(),
+          title: child.props.title,
+          icon: child.props.icon,
+          accessibilityLabel: child.props.accessibilityLabel,
+        });
+        scenes[idx] = () => child;
+      });
+
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = (i: number) => {
+    setIndex(i);
+    onIndexChanged?.(i);
+    if (i === routes.length) {
+      onEndReached?.();
+    }
+  };
+
+  const renderTabBar: React.FC<TabBarProps> = (props) => {
+    return (
+      <TabBar
+        {...props}
+        activeColor={activeColor || theme.colors.primary}
+        inactiveColor={inactiveColor || "rgb(200,200,200)"}
+        pressColor={pressColor || theme.colors.primary}
+        scrollEnabled={scrollEnabled}
+        indicatorStyle={{
+          backgroundColor: indicatorColor || theme.colors.primary,
+        }}
+        labelStyle={textStyles}
+        renderIcon={({ route, color }) =>
+          route?.icon ? (
+            <Icon name={route.icon} color={color} size={16} />
+          ) : null
+        }
+        style={{
+          backgroundColor: tabsBackgroundColor || theme.colors.background,
+        }}
+      />
+    );
+  };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return <></>;
+  }
+
+  return (
+    <TabView
+      style={[viewStyles]}
+      navigationState={{ index, routes }}
+      renderScene={SceneMap(tabScenes)}
+      renderTabBar={renderTabBar}
+      onIndexChange={indexChangeHandler}
+      tabBarPosition={tabBarPosition}
+      keyboardDismissMode={keyboardDismissMode}
+      swipeEnabled={swipeEnabled}
+    />
+  );
+};
+
+export default withTheme(TabViewComponent);

package/src/components/TabView/TabViewItem.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+const TabViewItem = ({ style, children, }) => {
+    return React.createElement(View, { style: [styles.parentContainer, style] }, children);
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        flex: 1,
+    },
+});
+export default TabViewItem;