🔖 0.12.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-flex-grid",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "🎨 A react-native flexbox grid similar to bootstap's web grid.",
   "main": "node_modules/expo/AppEntry.js",
   "module": "lib/module/index.js",

scripts/prep-package.js

@@ -15,10 +15,7 @@ const packageJsonFile = editJsonFile('package.json');
 // Update `main` field to support npm package instead of expo dev
 packageJsonFile.set(
   'main',
-  args[0] === 'expo'
-    ? 'node_modules/expo/AppEntry.js'
-    : packageJsonFile.data.module?.replace('module', 'commonsjs') ||
-        'lib/commonjs/index.js',
+  args[0] === 'expo' ? 'node_modules/expo/AppEntry.js' : 'src/index.ts',
 );
 
 // Save file

src/components/Layout/Col/Col.tsx

@@ -41,12 +41,12 @@ export declare interface ColProps extends ViewProps {
   lgOrder?: number | string;
   /** xl order */
   xlOrder?: number | string;
-  /** Element to render */
-  Element?: React.ElementType;
   /** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
   gx?: 0 | 1 | 2 | 3 | 4 | 5;
   /** Direction */
   dir?: 'ltr' | 'rtl';
+  /** Element to render - defaults to View */
+  Element?: React.ElementType;
 }
 
 /** converts decimal to percent string */

src/components/Layout/Container/Container.tsx

@@ -9,7 +9,7 @@ export declare interface ContainerProps extends ViewProps {
   fluid?: boolean;
   /** No Padding */
   noPadding?: boolean;
-  /** Element to render */
+  /** Element to render - defaults to View */
   Element?: React.ElementType;
 }
 

src/components/Layout/Row/Row.tsx

@@ -8,6 +8,8 @@ export declare interface RowProps extends ViewProps {
   gx?: 0 | 1 | 2 | 3 | 4 | 5;
   /** Direction */
   dir?: 'ltr' | 'rtl';
+  /** Element to render - defaults to View */
+  Element?: React.ElementType;
 }
 
 const styles = StyleSheet.create({
@@ -21,16 +23,20 @@ const styles = StyleSheet.create({
 });
 
 /** Row */
-const Row = ({ style, gx = 4, dir = 'ltr', ...rest }: RowProps) => (
-  <View
+const Row = ({
+  style,
+  gx = 4,
+  dir = 'ltr',
+  Element = View,
+  ...rest
+}: RowProps) => (
+  <Element
     style={[
       styles.row,
       dir === 'rtl' && styles.rtl,
-      gx
-        ? {
-            marginHorizontal: (-1 * getConfig().gutters[gx]) / 2,
-          }
-        : undefined,
+      gx && {
+        marginHorizontal: (-1 * getConfig().gutters[gx]) / 2,
+      },
       style,
     ]}
     {...rest}