@draftbit/core 46.4.4-dc9728.2 → 46.4.4-e6ab40.2

package/lib/typescript/src/mappings/View.d.ts

@@ -176,3 +176,4 @@ export declare const SEED_DATA: {
         };
     };
 };
+//# sourceMappingURL=View.d.ts.map

package/lib/typescript/src/mappings/View.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../src/mappings/View.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NrB,CAAC"}

package/lib/typescript/src/mappings/WebView.d.ts

@@ -132,3 +132,4 @@ export declare const SEED_DATA: {
         applicationNameForUserAgent: any;
     };
 };
+//# sourceMappingURL=WebView.d.ts.map

package/lib/typescript/src/mappings/WebView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/WebView.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGrB,CAAC"}

package/lib/typescript/src/styles/DarkTheme.d.ts

@@ -1,3 +1,4 @@
 import type { Theme } from "./DefaultTheme";
 declare const DarkTheme: Theme;
 export default DarkTheme;
+//# sourceMappingURL=DarkTheme.d.ts.map

package/lib/typescript/src/styles/DarkTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/DarkTheme.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAM5C,QAAA,MAAM,SAAS,EAAE,KAkBhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/styles/DefaultTheme.d.ts

@@ -1498,4 +1498,5 @@ declare const DefaultTheme: {
     };
 };
 export default DefaultTheme;
-export declare type Theme = typeof DefaultTheme;
+export type Theme = typeof DefaultTheme;
+//# sourceMappingURL=DefaultTheme.d.ts.map

package/lib/typescript/src/styles/DefaultTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/DefaultTheme.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GjB,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,MAAM,MAAM,KAAK,GAAG,OAAO,YAAY,CAAC"}

package/lib/typescript/src/styles/fonts.d.ts

@@ -3,3 +3,4 @@ import type { Fonts } from "@draftbit/types";
 export default function configureFonts(config?: {
     [platform in PlatformOSType | "default"]?: Fonts;
 }): Fonts;
+//# sourceMappingURL=fonts.d.ts.map

package/lib/typescript/src/styles/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../../src/styles/fonts.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,cAAc,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AA2D7C,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,MAAM,CAAC,EAAE;KAC7C,QAAQ,IAAI,cAAc,GAAG,SAAS,CAAC,CAAC,EAAE,KAAK;CACjD,GAAG,KAAK,CAGR"}

package/lib/typescript/src/styles/overlay.d.ts

@@ -1,2 +1,3 @@
 import { Animated } from "react-native";
 export default function overlay<T extends Animated.Value | number>(elevation: T, surfaceColor?: string): T extends number ? string : Animated.AnimatedInterpolation;
+//# sourceMappingURL=overlay.d.ts.map

package/lib/typescript/src/styles/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/styles/overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOxC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,CAAC,SAAS,QAAQ,CAAC,KAAK,GAAG,MAAM,EAC/D,SAAS,EAAE,CAAC,EACZ,YAAY,GAAE,MAAiC,GAC9C,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC,qBAAqB,CAe5D"}

package/lib/typescript/src/styles/shadow.d.ts

@@ -21,3 +21,4 @@ export default function shadow(elevation?: number | Animated.Value): {
     shadowOpacity: number;
     shadowRadius: number;
 };
+//# sourceMappingURL=shadow.d.ts.map

package/lib/typescript/src/styles/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../../src/styles/shadow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKxC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,SAAS,GAAE,MAAM,GAAG,QAAQ,CAAC,KAAS;;;;;;;;;;;;;;;;;;;;;EAiDpE"}

package/lib/typescript/src/theming.d.ts

@@ -6,3 +6,4 @@ export declare const ThemeProvider: import("react").ComponentType<{
 }, C>(WrappedComponent: import("react").ComponentType<Props> & C) => import("react").ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
 }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<Props> & C, {}>, useTheme: (overrides?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined) => any;
+//# sourceMappingURL=theming.d.ts.map

package/lib/typescript/src/theming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../../src/theming.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAQ,aAAa;;IAAE,SAAS;;;;6IAAE,QAAQ,6FACb,CAAC"}

package/lib/typescript/src/utilities.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="lodash" />
-import { StyleProp, TextStyle } from "react-native";
+import { StyleProp } from "react-native";
 export declare function extractStyles(style: StyleProp<any>): {
-    viewStyles: any;
-    textStyles: TextStyle;
+    viewStyles: Partial<any>;
+    textStyles: import("lodash").Dictionary<any>;
 };
 export declare const borderStyleNames: string[];
 export declare const marginStyleNames: string[];
@@ -24,3 +24,4 @@ export declare function extractBorderAndMarginStyles(style: StyleProp<any>, addi
  */
 export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
 export declare function getValueForRadioButton(value: string | number): string;
+//# sourceMappingURL=utilities.d.ts.map

package/lib/typescript/src/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/utilities.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,SAAS,EAAa,MAAM,cAAc,CAAC;AAWhE,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC;;;EAkClD;AAED,eAAO,MAAM,gBAAgB,UAwB5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAU5B,CAAC;AAEF,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,EACrB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EACjC,sBAAsB,CAAC,EAAE,MAAM,EAAE;;;EAqBlC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EACjC,aAAa,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,OAe1C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAQ5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.4.4-dc9728.2+dc9728c",
+  "version": "46.4.4-e6ab40.2+e6ab400",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.4.4-dc9728.2+dc9728c",
+    "@draftbit/types": "^46.4.4-e6ab40.2+e6ab400",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -81,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "dc9728c2090d6315a258345e71d4d61f903ce2a1"
+  "gitHead": "e6ab40015a26703daf93e8e4068f1e42cfc51991"
 }

package/src/components/DatePicker/DatePicker.js

@@ -6,7 +6,6 @@ import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
-import { extractStyles } from "../../utilities";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const FOCUS_ANIMATION_DURATION = 150;
 const BLUR_ANIMATION_DURATION = 180;
@@ -25,7 +24,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -37,7 +36,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const [placeholder1, setPlaceholder1] = React.useState("");
     const [focused, setFocused] = React.useState(false);
     const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
-    const { textStyles } = extractStyles(style);
     const getValidDate = () => {
         if (!value) {
             return new Date();
@@ -127,10 +125,8 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     };
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
     const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-    const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = labelSize
-        ? labelSize
-        : typography.caption.fontSize;
+    const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
     const hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -142,9 +138,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = inputBorderColorActive || colors.primary;
-        placeholderColor = borderColor = inputBorderColor || colors.light;
-        underlineColor = inputBorderColor || colors.light;
+        activeColor = colors.primary;
+        placeholderColor = borderColor = colors.light;
+        underlineColor = colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -206,7 +202,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const labelStyle = {
         ...typography.subtitle1,
         top: type === "solid" ? 16 : 0,
-        fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
         left: leftIconName && leftIconMode === "inset"
             ? ICON_SIZE + (type === "solid" ? 16 : 12)
             : 0,
@@ -250,7 +245,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         styles.input,
         inputStyle,
         type === "solid" ? { marginHorizontal: 12 } : {},
-        textStyles,
     ];
     // const render = (props) => <NativeTextInput {...props} />;
     return (React.createElement(View, { style: [styles.container, style] },
@@ -288,7 +282,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: labelColor || colors.light,
+                                        color: colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -300,7 +294,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: labelColor || placeholder,
+                                        color: placeholderColor,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,7 +23,6 @@ import DateTimePicker from "./DatePickerComponent";
 
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
-import { extractStyles } from "../../utilities";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -48,14 +47,10 @@ type Props = {
   mode?: "date" | "time" | "datetime";
   type?: "solid" | "underline";
   label?: string;
-  labelSize?: number;
-  labelColor: string;
   placeholder?: string;
   leftIconName?: string;
   leftIconMode?: "outset" | "inset";
   rightIconName?: string;
-  borderColor?: string;
-  borderColorActive?: string;
 } & IconSlot &
   TextInputProps;
 
@@ -89,11 +84,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   rightIconName,
   leftIconMode = "inset",
   label,
-  labelSize,
-  labelColor,
   placeholder,
-  borderColor: inputBorderColor,
-  borderColorActive: inputBorderColorActive,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -115,8 +106,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
-  const { textStyles } = extractStyles(style);
-
   const getValidDate = (): Date => {
     if (!value) {
       return new Date();
@@ -222,11 +211,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
   const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-  const MAXIMIZED_LABEL_FONT_SIZE =
-    textStyles?.fontSize || typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = labelSize
-    ? labelSize
-    : typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -247,9 +233,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = inputBorderColorActive || colors.primary;
-    placeholderColor = borderColor = inputBorderColor || colors.light;
-    underlineColor = inputBorderColor || colors.light;
+    activeColor = colors.primary;
+    placeholderColor = borderColor = colors.light;
+    underlineColor = colors.light;
     backgroundColor = colors.background;
   }
 
@@ -320,7 +306,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   const labelStyle = {
     ...typography.subtitle1,
     top: type === "solid" ? 16 : 0,
-    fontFamily: textStyles?.fontFamily,
     left:
       leftIconName && leftIconMode === "inset"
         ? ICON_SIZE + (type === "solid" ? 16 : 12)
@@ -366,7 +351,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
-    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
@@ -422,7 +406,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: labelColor || colors.light,
+                        color: colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -439,7 +423,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: labelColor || placeholder,
+                        color: placeholderColor,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}

package/src/components/Table/Table.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+const Table = ({ children, style, ...rest }) => (React.createElement(View, { ...rest, style: [styles.wrapper, style] }, children));
+const styles = StyleSheet.create({
+    wrapper: {
+        display: "flex",
+        flexDirection: "column",
+    },
+});
+export default Table;

package/src/components/Table/Table.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+
+export interface TableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Table = ({ children, style, ...rest }: TableProps) => (
+  <View {...rest} style={[styles.wrapper, style]}>
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
+
+export default Table;

package/src/components/Table/TableCell.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+const TableCell = ({ children, style, numeric, value, ...rest }) => {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(View, { ...rest, style: [styles.wrapper, numeric && styles.right, viewStyles] },
+        React.createElement(Text, { numberOfLines: 1, style: textStyles },
+            children,
+            value)));
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "row",
+    },
+    right: {
+        justifyContent: "flex-end",
+    },
+});
+export default TableCell;

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+
+export interface TableCellProps {
+  children: React.ReactNode;
+  numeric?: boolean;
+  style?: StyleProp<ViewStyle>;
+  value: string;
+}
+
+const TableCell = ({
+  children,
+  style,
+  numeric,
+  value,
+  ...rest
+}: TableCellProps) => {
+  const { textStyles, viewStyles } = extractStyles(style);
+  return (
+    <View
+      {...rest}
+      style={[styles.wrapper, numeric && styles.right, viewStyles]}
+    >
+      <Text numberOfLines={1} style={textStyles}>
+        {children}
+        {value}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+  },
+  right: {
+    justifyContent: "flex-end",
+  },
+});
+
+export default TableCell;

package/src/components/Table/TableHeader.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const TableHeader = ({ children, style, theme, ...rest }) => (React.createElement(View, { ...rest, style: [styles.wrapper, { borderBottomColor: theme.colors.medium }, style] }, children));
+const styles = StyleSheet.create({
+    wrapper: {
+        display: "flex",
+        flexDirection: "row",
+    },
+});
+export default withTheme(TableHeader);

package/src/components/Table/TableHeader.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface TableHeaderProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const TableHeader = ({ children, style, theme, ...rest }: TableHeaderProps) => (
+  <View
+    {...rest}
+    style={[styles.wrapper, { borderBottomColor: theme.colors.medium }, style]}
+  >
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+  },
+});
+
+export default withTheme(TableHeader);

package/src/components/Table/TablePaginator.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { View, Text } from "react-native";
+const TablePaginator = () => (React.createElement(View, null,
+    React.createElement(Text, null, "Table Paginator")));
+export default TablePaginator;

package/src/components/Table/TablePaginator.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+const TablePaginator = () => (
+  <View>
+    <Text>Table Paginator</Text>
+  </View>
+);
+
+export default TablePaginator;

package/src/components/Table/TableRow.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const TableRow = ({ children, style, theme, ...rest }) => (React.createElement(View, { ...rest, style: [styles.container, { borderBottomColor: theme.colors.light }, style] },
+    React.createElement(View, { style: styles.content }, children)));
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+    },
+    content: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export default withTheme(TableRow);

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+export interface TableRowProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const TableRow = ({ children, style, theme, ...rest }: TableRowProps) => (
+  <View
+    {...rest}
+    style={[styles.container, { borderBottomColor: theme.colors.light }, style]}
+  >
+    <View style={styles.content}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row",
+  },
+});
+
+export default withTheme(TableRow);

package/src/components/Table/TableTitle.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+const TableTitle = ({ children, style, numeric = false, isAscending = false, numberOfLines = 1, title, ...rest }) => {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(View, { ...rest, style: [styles.wrapper, numeric && styles.right, viewStyles] },
+        React.createElement(Text, { style: [isAscending ? styles.sorted : { color: "gray" }, textStyles], numberOfLines: numberOfLines },
+            children,
+            title)));
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "row",
+    },
+    right: {
+        justifyContent: "flex-end",
+    },
+    sorted: {
+    // marginLeft: 8,
+    },
+    icon: {
+        height: 24,
+        justifyContent: "center",
+    },
+});
+export default TableTitle;

package/src/components/Table/TableTitle.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+
+export interface TableCellProps {
+  children: React.ReactNode;
+  numeric?: boolean;
+  isAscending: boolean;
+  numberOfLines?: number;
+  title?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TableTitle = ({
+  children,
+  style,
+  numeric = false,
+  isAscending = false,
+  numberOfLines = 1,
+  title,
+  ...rest
+}: TableCellProps) => {
+  const { textStyles, viewStyles } = extractStyles(style);
+  return (
+    <View
+      {...rest}
+      style={[styles.wrapper, numeric && styles.right, viewStyles]}
+    >
+      <Text
+        style={[isAscending ? styles.sorted : { color: "gray" }, textStyles]}
+        numberOfLines={numberOfLines}
+      >
+        {children}
+        {title}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+  },
+  right: {
+    justifyContent: "flex-end",
+  },
+  sorted: {
+    // marginLeft: 8,
+  },
+  icon: {
+    height: 24,
+    justifyContent: "center",
+  },
+});
+
+export default TableTitle;

package/src/components/Table/index.js

@@ -0,0 +1,6 @@
+export { default as Table } from "./Table";
+export { default as TableHeader } from "./TableHeader";
+export { default as TablePaginator } from "./TablePaginator";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";
+export { default as TableTitle } from "./TableTitle";

package/src/components/Table/index.tsx

@@ -0,0 +1,6 @@
+export { default as Table } from "./Table";
+export { default as TableHeader } from "./TableHeader";
+export { default as TablePaginator } from "./TablePaginator";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";
+export { default as TableTitle } from "./TableTitle";

package/src/components/Text.js

@@ -2,13 +2,19 @@ import * as React from "react";
 import { Text as NativeText, I18nManager } from "react-native";
 import { withTheme } from "../theming";
 class Text extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            nativeProps: {},
+        };
+    }
     setNativeProps(args) {
-        return this._root && this._root.setNativeProps(args);
+        this.state.nativeProps = args || {};
     }
     render() {
         const { style, ...rest } = this.props;
         const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
-        return (React.createElement(NativeText, { ...rest, ref: (c) => {
+        return (React.createElement(NativeText, { ...rest, ...this.state.nativeProps, ref: (c) => {
                 this._root = c;
             }, style: [
                 {