react-native-boxes 1.4.73 → 1.4.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.4.73",
+  "version": "1.4.74",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {

package/sample-app/App.tsx

@@ -1,34 +1,34 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-import { DemoScreen, Theme, ThemeContext } from 'react-native-boxes'
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-
-export default function App() {
-  const theme = new Theme()
-
-  loadAsync({
-    'Regular': require('./assets/fonts/Regular.ttf'),
-    'Bold': require('./assets/fonts/Bold.ttf'),
-    'Styled': require('./assets/fonts/Styled.ttf'),
-  })
-  return (
-    <ThemeContext.Provider value={theme}>
-      <SafeAreaProvider>
-        <DemoScreen />
-      </SafeAreaProvider>
-    </ThemeContext.Provider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-function loadAsync(arg0: { Regular: any; Bold: any; Styled: any; }) {
-  throw new Error('Function not implemented.');
-}
-
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { DemoScreen, Theme, ThemeContext } from 'react-native-boxes'
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function App() {
+  const theme = new Theme()
+
+  loadAsync({
+    'Regular': require('./assets/fonts/Regular.ttf'),
+    'Bold': require('./assets/fonts/Bold.ttf'),
+    'Styled': require('./assets/fonts/Styled.ttf'),
+  })
+  return (
+    <ThemeContext.Provider value={theme}>
+      <SafeAreaProvider>
+        <DemoScreen />
+      </SafeAreaProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+function loadAsync(arg0: { Regular: any; Bold: any; Styled: any; }) {
+  throw new Error('Function not implemented.');
+}
+

package/sample-app/app.json

@@ -1,30 +1,30 @@
-{
-  "expo": {
-    "name": "sample-app",
-    "slug": "sample-app",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}
+{
+  "expo": {
+    "name": "sample-app",
+    "slug": "sample-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/sample-app/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "sample-app",
-  "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
-  },
-  "dependencies": {
-    "@expo/metro-runtime": "~3.1.3",
-    "@expo/vector-icons": "^13.0.0",
-    "expo": "~50.0.14",
-    "expo-status-bar": "~1.11.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-boxes": "^1.4.61",
-    "react-native-gesture-handler": "^2.22.1",
-    "react-native-safe-area-context": "^4.9.0",
-    "react-native-web": "~0.19.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.45",
-    "typescript": "^5.1.3"
-  },
-  "private": true
-}
+{
+  "name": "sample-app",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~3.1.3",
+    "@expo/vector-icons": "^13.0.0",
+    "expo": "~50.0.14",
+    "expo-status-bar": "~1.11.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-boxes": "^1.4.61",
+    "react-native-gesture-handler": "^2.22.1",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-web": "~0.19.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

package/sample-app/tsconfig.json

@@ -1,6 +1,6 @@
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true
-  }
-}
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}

package/src/List.tsx

@@ -5,16 +5,20 @@ import { Caption, Subtitle, TextView, TitleText } from "./Text"
 import { useContext } from "react"
 import { ThemeContext } from "./ThemeContext"
 import { PressableView } from "./Button"
-
+import React from 'react'
 
 export type DatatableViewProps = {
     items: any[],
-    itemAdapter: (item: any, idx: number, list: any) => SimpleDatatableViewItemProps,
+    itemAdapter?: (item: any, idx: number, list: any) => SimpleDatatableViewItemProps,
     loading?: boolean,
+    onRender?: (item: any, idx: number, list: any) => React.Component | React.JSX.Element | Element | any
 } & ViewProps
 export function SimpleDatalistView(props: DatatableViewProps) {
     const theme = useContext(ThemeContext)
-
+    if (!props.itemAdapter && !props.onRender) {
+        console.warn('SimpleDatalistView: must provide either itemAdapter or onRender')
+        return null
+    }
     return props.loading ?
         <Center style={{
             padding: theme.dimens.space.xl * 2
@@ -26,7 +30,10 @@ export function SimpleDatalistView(props: DatatableViewProps) {
         <VBox style={[props.style]}>
             {
                 props.items.map((item, idx) => {
-                    let data = props.itemAdapter(item, idx, props.items)
+                    if (props.onRender) {
+                        return props.onRender?.(item, idx, props.items)
+                    }
+                    let data = props.itemAdapter?.(item, idx, props.items)
                     return (
                         <SimpleDatatlistViewItem
                             key={idx}
@@ -39,6 +46,7 @@ export function SimpleDatalistView(props: DatatableViewProps) {
 
 }
 
+
 export type SimpleDatatableViewItemProps = {
     title?: string,
     icon?: string | any,