react-native-boxes 1.3.20 → 1.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.3.20",
+  "version": "1.3.23",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {
@@ -32,5 +32,8 @@
     "react-native": "^0.73.6",
     "react-native-safe-area-context": "^4.9.0",
     "typescript": "^5.4.3"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.23.1"
   }
 }

package/src/Bar.tsx

@@ -1,9 +1,9 @@
 import { useContext } from "react";
-import { StatusBar, TextStyle, ViewProps } from "react-native";
+import { StatusBar, TextStyle, View, ViewProps } from "react-native";
 import { ThemeContext } from "./ThemeContext";
 import * as React from 'react'
 import { Center, HBox } from "./Box";
-import { TextView } from "./Text";
+import { Caption, TextView } from "./Text";
 import { Icon, getIcon } from "./Image";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { PressableView } from "./Button";
@@ -213,4 +213,42 @@ export function BottomNavBar(props: ViewProps &
         </HBox>
     )
 
+}
+
+
+
+export type DividerProps = ViewProps & {
+    text?: string
+}
+export function DividerView(props: DividerProps) {
+
+    const theme = useContext(ThemeContext)
+    return (
+        <Center style={{
+            marginTop: theme.dimens.space.md,
+            marginBottom: theme.dimens.space.md,
+            flexDirection: "row",
+            width: '100%',
+            justifyContent: 'space-between'
+        }}
+            {...props}
+        >
+            <View style={{
+                backgroundColor: theme.colors.caption,
+                width: props?.text ? '40%' : '50%',
+                height: 0.1
+            }} />
+            {
+                props?.text &&
+                <Caption>
+                    {props.text}
+                </Caption>
+            }
+            <View style={{
+                backgroundColor: theme.colors.caption,
+                width: props?.text ? '40%' : '50%',
+                height: 0.1
+            }} />
+        </Center>
+    )
 }

package/src/utils.ts

@@ -1,6 +1,18 @@
 import { Platform } from "react-native";
 import { Dimensions } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
+export const Storage = {
+    async getKeyAsync(key: string) {
+        return await AsyncStorage.getItem(key);
+    },
+
+    async setKeyAsync(key: string, value: string) {
+        if (typeof value == 'object')
+            value = JSON.stringify(value)
+        return await AsyncStorage.setItem(key, value);
+    }
+}
 
 export function ReactWrapper(component: any) {
     return (props: any) => {