react-native-boxes 1.0.0

package/dist/demo.js

@@ -0,0 +1,301 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DemoScreen = void 0;
+const react_1 = require("react");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const _1 = require(".");
+const FontAwesome_1 = __importDefault(require("@expo/vector-icons/FontAwesome"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const Message_1 = require("./Message");
+const Modal_1 = require("./Modal");
+const Image_1 = require("./Image");
+const utils_1 = require("./utils");
+const Box_1 = __importDefault(require("./Box"));
+const Styles_1 = require("./Styles");
+function DemoScreen({ navigation }) {
+    const theme = (0, react_1.useContext)(_1.ThemeContext);
+    console.log('Rendering');
+    const btnIcon = (<FontAwesome_1.default name='google' size={theme.dimens.icon.md} color={theme.colors.invert.text}/>);
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [alert, setBs] = (0, react_1.useState)(`In this version, the icon used is always 'chevron-right' even when expanded.`);
+    const [bottomsheetVisible, setbottomsheetVisible] = (0, react_1.useState)(false);
+    function setAlert(bs) {
+        setBs(bs);
+        setTimeout(() => {
+            setBs(`In this version, the icon used is always 'chevron-right' even when expanded.`);
+        }, 5000);
+    }
+    const [selectedBottombarId, setSelectedBottomBarId] = (0, react_1.useState)('home');
+    const [mText, setMText] = (0, react_1.useState)(`@shivesh`);
+    const [bottomBarHeight, setBottombarHeight] = (0, react_1.useState)(theme.dimens.space.xl);
+    const [selectedTheme, setSelectedTheme] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        theme.colors = selectedTheme ? Styles_1.LightColors : Styles_1.DarkColors;
+        forceUpdate();
+    }, [selectedTheme]);
+    const [, forceUpdate] = (0, react_1.useReducer)(x => x + 1, 0);
+    return (<_1.VBox style={{
+            backgroundColor: theme.colors.background,
+            padding: 0,
+            paddingBottom: bottomBarHeight,
+            margin: 0,
+            height: '100%'
+        }}>
+      <_1.SimpleToolbar title="Demo" homeIcon={(0, utils_1.ReactWrapper)(<Image_1.Icon color={theme.colors.invert.text} name="plus"/>)} options={[
+            {
+                id: 'test',
+                icon: 'gear',
+                onClick: (id) => {
+                }
+            },
+            {
+                id: 'test2',
+                icon: (0, utils_1.ReactWrapper)(<_1.PressableView>
+              <Image_1.Avatar style={{
+                        margin: 0,
+                        height: theme.dimens?.icon?.md * 1.25,
+                        width: theme.dimens?.icon?.md * 1.25,
+                    }} iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"/>
+            </_1.PressableView>),
+                onClick: (id) => {
+                }
+            }
+        ]}/>
+      <Box_1.default automaticallyAdjustKeyboardInsets={true} keyboardShouldPersistTaps={'handled'} style={{
+            flexGrow: 1,
+        }} nestedScrollEnabled={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
+
+        <_1.Center style={{
+            flexDirection: 'row',
+            padding: 20
+        }}>
+
+          <Image_1.Avatar onPress={() => {
+            setbottomsheetVisible(true);
+        }} style={{
+            borderColor: theme.colors.success,
+        }} iconNameProps={{
+            name: 'user',
+            color: theme.colors.success,
+            size: theme.dimens.icon.lg
+        }}/>
+          <_1.Center>
+            <Image_1.Avatar style={{
+            borderWidth: theme.dimens.space.sm,
+            width: 100,
+            height: 100,
+            borderColor: theme.colors.success
+        }} iconText='SN' onPress={() => {
+            setbottomsheetVisible(true);
+        }} iconNameProps={{
+            name: 'user',
+            color: theme.colors.success,
+            size: theme.dimens.icon.lg
+        }} iconUrl='https://cdn.truelancer.com/user-picture/307510-5c1f11bad82e9.jpg'/>
+            <_1.Subtitle>{mText}</_1.Subtitle>
+          </_1.Center>
+
+          <Image_1.Avatar style={{
+            borderColor: theme.colors.success,
+            color: theme.colors.success
+        }} onPress={() => {
+            setbottomsheetVisible(true);
+        }} iconText='SN'/>
+        </_1.Center>
+        <_1.Expand title='Message Alert' initialExpand={false} style={{
+            backgroundColor: theme.colors.forground
+        }} titleBackgroundColor={theme.colors.forground}>
+          <_1.VBox>
+            <Message_1.AlertMessage text={alert} onDismiss={() => {
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+            setAlert('');
+        }}/>
+            <Message_1.AlertMessage text='Critial Message' type='critical'/>
+            <Message_1.AlertMessage text='Success' type='success'/>
+            <Message_1.AlertMessage text='Warning Message' type='warning'/>
+          </_1.VBox>
+
+        </_1.Expand>
+        <_1.Expand style={{
+            padding: 0,
+            borderWidth: 0.1,
+            borderColor: '#DCDCDC'
+        }} duration={200} title='In this version, the icon used is always chevron-right even when expanded. In this version, the icon used is always chevron-right even when expanded.' initialExpand={false} iconPosition='right'>
+          <_1.VBox>
+            <_1.Title>Text A</_1.Title>
+            <_1.Subtitle>Text A Text A Text AText A Text AText A</_1.Subtitle>
+            <_1.TextView>Text A</_1.TextView>
+            <_1.Caption>Text Caption</_1.Caption>
+          </_1.VBox>
+        </_1.Expand>
+        <_1.Expand title='Inputs'>
+
+          <_1.VBox>
+            <_1.TextInputView style={{
+            fontFamily: theme.fonts.Bold
+        }} initialText={mText} value={mText} onChangeText={t => setMText(t)}/>
+            <_1.CompositeTextInputView onChangeText={t => setMText(t)} placeholder='A test' initialText='Test'/>
+            <_1.CompositeTextInputView inputMode='decimal' icon={"close"} style={{}} alertTextColor={theme.colors.warning} placeholder='Enter your name' initialText='Test' value={mText} onChangeText={t => setMText(t)}/>
+            <_1.CompositeTextInputView style={{}} placeholder='Enter number' alertText={mText?.indexOf("@") > -1 ? '' : 'Please enter @ or else I am gonna come down at your place and mess you up buddy !'} initialText='Test' value={mText} onChangeText={t => setMText(t)}/>
+          </_1.VBox>
+        </_1.Expand>
+
+        <_1.Expand iconStyle={{
+            name: 'chevron-right',
+            color: 'red'
+        }} title='Buttons' initialExpand={false}>
+          <_1.VBox style={{}}>
+            <_1.VBox>
+              <_1.ButtonView icon={btnIcon} style={{}}>Button Icon</_1.ButtonView>
+
+              <_1.ButtonView style={{}}>Button Text</_1.ButtonView>
+            </_1.VBox>
+            <_1.RightIconButton text='Click Me Icon' icon={btnIcon}>
+            </_1.RightIconButton>
+
+            <_1.Center>
+              <_1.LoadingButton onPress={(e) => {
+            setLoading(!loading);
+        }} loading={loading} text='Click Me'/>
+
+              <_1.ButtonView underlayColor={theme.colors.transparent} style={{
+            color: theme.colors.accent,
+            backgroundColor: theme.colors.transparent,
+        }}>Tertiary button</_1.ButtonView>
+
+            </_1.Center>
+
+            <_1.Expand title='Nested expand'>
+              <_1.HBox style={{
+            justifyContent: 'center',
+        }}>
+                <_1.LoadingButton style={{
+            width: 'auto'
+        }} onPress={(e) => {
+            setLoading(!loading);
+        }} loading={loading} text='Click Me left'/>
+                <_1.LoadingButton loaderStyle='transparent' style={{
+            width: 'auto'
+        }} onPress={(e) => {
+            setLoading(!loading);
+        }} loading={loading} text='Click Me right'/>
+              </_1.HBox>
+            </_1.Expand>
+
+          </_1.VBox>
+        </_1.Expand>
+
+
+
+        <_1.ButtonView underlayColor={theme.colors.transparent} style={{
+            color: theme.colors.accent,
+            backgroundColor: theme.colors.transparent,
+        }} onPress={() => {
+            setSelectedTheme(!selectedTheme);
+        }}>{selectedTheme ? 'Light' : 'Dark'}</_1.ButtonView>
+
+
+        <_1.ButtonView underlayColor={theme.colors.transparent} style={{
+            color: theme.colors.accent,
+            backgroundColor: theme.colors.transparent,
+        }} onPress={() => {
+            setbottomsheetVisible(true);
+        }}>Show Sheet</_1.ButtonView>
+
+
+      </Box_1.default>
+      <_1.BottomNavBar style={{
+            borderTopLeftRadius: theme.dimens.space.md,
+            borderTopRightRadius: theme.dimens.space.md,
+        }} onSelect={setSelectedBottomBarId} selectedId={selectedBottombarId} options={[
+            {
+                id: 'home',
+                title: 'Home',
+                icon: 'home'
+            },
+            {
+                id: 'create',
+                title: 'Create',
+                icon: 'plus'
+            },
+            {
+                id: 'search',
+                title: 'Search',
+                icon: 'search'
+            },
+            {
+                id: 'profile',
+                title: 'Profile',
+                icon: (0, utils_1.ReactWrapper)(<_1.PressableView>
+              <Image_1.Avatar onPress={() => {
+                        setSelectedBottomBarId('profile');
+                    }} style={{
+                        borderColor: selectedBottombarId == 'profile' ?
+                            theme.colors.accent : theme.colors.caption,
+                        margin: 0,
+                        height: theme.dimens?.icon?.md,
+                        width: theme.dimens?.icon?.md,
+                    }} 
+                // iconName='user'
+                iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"/>
+            </_1.PressableView>)
+            }
+        ]} onDimens={(w, h) => {
+            setBottombarHeight(h);
+            console.log("bottomBarHeight", h);
+        }}/>
+
+      <Modal_1.BottomSheet title="About" visible={bottomsheetVisible} onDismiss={() => {
+            setbottomsheetVisible(false);
+        }}>
+        <_1.TextView>Dinosaurs are a diverse group of reptiles of the clade Dinosauria. They first appeared during the Triassic period, between 243 and 233.23 million years ago, although the exact origin and timing of the evolution of dinosaurs is a subject of active research.</_1.TextView>
+
+        <_1.TextView>Dinosaurs are a diverse group of reptiles of the clade Dinosauria. They first appeared during the Triassic period, between 243 and 233.23 million years ago, although the exact origin and timing of the evolution of dinosaurs is a subject of active research.</_1.TextView>
+        <_1.Expand title='Types' initialExpand={false} style={{
+            padding: 0,
+            backgroundColor: theme.colors.forground
+        }} titleBackgroundColor={theme.colors.forground}>
+          <_1.VBox>
+            <Message_1.AlertMessage text={alert} onDismiss={() => {
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+            setAlert('');
+        }}/>
+            <Message_1.AlertMessage text='Tyrannosaurus rex' type='critical'/>
+            <Message_1.AlertMessage text='Spinosaurus' type='success'/>
+            <Message_1.AlertMessage text='Ankylosaurs' type='warning'/>
+          </_1.VBox>
+
+        </_1.Expand>
+      </Modal_1.BottomSheet>
+    </_1.VBox>);
+}
+exports.DemoScreen = DemoScreen;
+//# sourceMappingURL=demo.js.map

package/dist/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../src/demo.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Text';
+export * from './Box';
+export * from './Button';
+export * from './Modal';
+export * from './Image';
+export * from './Input';
+export * from './Bar';
+export * from './ThemeContext';

package/dist/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Text"), exports);
+__exportStar(require("./Box"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./Image"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Bar"), exports);
+__exportStar(require("./ThemeContext"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAuB;AACvB,wCAAsB;AACtB,2CAAyB;AACzB,0CAAwB;AACxB,0CAAwB;AACxB,0CAAwB;AACxB,wCAAsB;AACtB,iDAA+B"}

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function ReactWrapper(component: any): (props: any) => any;
+export declare function randomColor(): undefined;
+export declare function isWeb(): boolean;
+export declare function isDesktop(): boolean;
+export declare function assignFields(target: any, source: any, fields: string[], skipUndefined?: boolean): any;

package/dist/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assignFields = exports.isDesktop = exports.isWeb = exports.randomColor = exports.ReactWrapper = void 0;
+const react_native_1 = require("react-native");
+const react_native_2 = require("react-native");
+function ReactWrapper(component) {
+    return (props) => {
+        return component;
+    };
+}
+exports.ReactWrapper = ReactWrapper;
+function randomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    // return color;
+    return undefined;
+}
+exports.randomColor = randomColor;
+function isWeb() {
+    return react_native_1.Platform.OS == 'web';
+}
+exports.isWeb = isWeb;
+function isDesktop() {
+    const windowWidth = react_native_2.Dimensions.get('window').width;
+    const windowHeight = react_native_2.Dimensions.get('window').height;
+    return windowWidth > windowHeight;
+}
+exports.isDesktop = isDesktop;
+function assignFields(target, source, fields, skipUndefined = true) {
+    if (!target)
+        target = {};
+    Object.keys(source || {}).forEach(k => {
+        if (fields?.indexOf(k) > -1) {
+            if (!skipUndefined && !source[k])
+                return;
+            target[k] = source[k];
+        }
+    });
+    return target;
+}
+exports.assignFields = assignFields;
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,+CAA0C;AAG1C,SAAgB,YAAY,CAAC,SAAc;IACvC,OAAO,CAAC,KAAU,EAAE,EAAE;QAClB,OAAO,SAAS,CAAA;IACpB,CAAC,CAAA;AACL,CAAC;AAJD,oCAIC;AAED,SAAgB,WAAW;IACvB,MAAM,OAAO,GAAG,kBAAkB,CAAC;IACnC,IAAI,KAAK,GAAG,GAAG,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACzB,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,gBAAgB;IAChB,OAAO,SAAS,CAAC;AACrB,CAAC;AAVD,kCAUC;AAED,SAAgB,KAAK;IACjB,OAAO,uBAAQ,CAAC,EAAE,IAAI,KAAK,CAAA;AAC/B,CAAC;AAFD,sBAEC;AAGD,SAAgB,SAAS;IACrB,MAAM,WAAW,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IACnD,MAAM,YAAY,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACrD,OAAO,WAAW,GAAG,YAAY,CAAA;AACrC,CAAC;AAJD,8BAIC;AAED,SAAgB,YAAY,CACxB,MAAW,EACX,MAAW,EACX,MAAgB,EAChB,gBAAyB,IAAI;IAC7B,IAAI,CAAC,MAAM;QACP,MAAM,GAAG,EAAE,CAAA;IACf,MAAM,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QAClC,IAAI,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;gBAC5B,OAAM;YACV,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;QACzB,CAAC;IACL,CAAC,CAAC,CAAA;IACF,OAAO,MAAM,CAAA;AACjB,CAAC;AAfD,oCAeC"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-native-boxes",
+  "version": "1.0.0",
+  "description": "A react native library for rapid development of UI using boxes",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc --build --verbose",
+    "test": "echo Skipping..."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shiveshnavin/react-native-boxes.git"
+  },
+  "keywords": [
+    "react-native-libary",
+    "react-native-boxes",
+    "react-native-ui"
+  ],
+  "author": "Shivesh Navin",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/shiveshnavin/react-native-boxes/issues"
+  },
+  "homepage": "https://github.com/shiveshnavin/react-native-boxes#readme",
+  "dependencies": {
+    "@expo/vector-icons": "^13.0.0",
+    "react": "^18.2.0",
+    "react-native": "^0.73.6",
+    "react-native-safe-area-context": "^4.9.0"
+  },
+  "devDependencies": {
+    "@tsconfig/react-native": "^3.0.4",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.71",
+    "typescript": "^5.4.3"
+  }
+}

package/src/Bar.tsx

@@ -0,0 +1,185 @@
+import { useContext } from "react";
+import { StatusBar, TextStyle, ViewProps } from "react-native";
+import { ThemeContext } from "./ThemeContext";
+import * as React from 'react'
+import { Center, HBox } from "./Box";
+import { TextView } from "./Text";
+import { Icon, getIcon } from "./Image";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PressableView } from "./Button";
+import { isDesktop, isWeb } from "./utils";
+
+export interface Option {
+    id: string,
+    title?: string,
+    icon?: string | any,
+    onClick?: (id: string) => void
+}
+
+export interface SimpleToolbarProps extends ViewProps {
+    title?: String,
+    backgroundColor?: string,
+    forgroundColor?: string,
+    homeIcon?: string | typeof Icon,
+    onHomePress?: () => void
+    textStyle?: TextStyle
+    options?: Option[]
+}
+
+export const SimpleToolbarHeight = 40
+export function SimpleToolbar(props: SimpleToolbarProps) {
+    const theme = useContext(ThemeContext)
+    var HomeIcon = getIcon(props.homeIcon)
+    const insets = useSafeAreaInsets();
+
+    return (
+        <HBox style={[isWeb() ? {
+            paddingTop: theme.dimens.space.lg,
+            paddingBottom: theme.dimens.space.lg,
+            backgroundColor: theme.colors.accent || props.backgroundColor,
+            minHeight: SimpleToolbarHeight * (isDesktop() ? 1.3 : 1.25),
+        } : {
+            paddingTop: insets.top,
+            paddingBottom: theme.dimens.space.lg,
+            backgroundColor: theme.colors.accent || props.backgroundColor,
+            minHeight: SimpleToolbarHeight,
+        }, props.style]}>
+            <StatusBar
+                animated={true}
+                backgroundColor={theme.colors.accent || props.backgroundColor}
+            />
+            <HBox style={{
+                left: 0,
+                paddingStart: HomeIcon ? 0 : theme.dimens.space.sm,
+                justifyContent: HomeIcon ? 'center' : 'flex-start',
+                alignSelf: 'center',
+                position: 'absolute',
+                width: '100%',
+            }}>
+                <TextView style={[{
+                    color: props.forgroundColor || theme.colors.invert.text
+                }, props.textStyle]} >
+                    {props.title}
+                </TextView>
+            </HBox>
+
+            <HBox style={{
+                paddingLeft: theme.dimens.space.md,
+                alignSelf: 'center',
+                alignContent: 'center',
+                position: 'absolute',
+                justifyContent: 'space-between',
+                width: '99.9%',
+            }}>
+                <Center style={{
+                    paddingLeft: theme.dimens.space.sm,
+                    margin: 0,
+                }}>
+                    <PressableView onPress={() => {
+                        props.onHomePress && props.onHomePress()
+                    }}>
+                        {HomeIcon && <HomeIcon />}
+                    </PressableView>
+                </Center>
+                <HBox style={{
+                    alignItems: 'center',
+                    marginRight: isWeb() ? theme.dimens.space.sm : theme.dimens.space.md
+                }}>
+                    {
+                        props.options?.map((opt) => {
+                            let ActionIcon = getIcon(opt.icon)
+                            let title = opt.title || opt.id
+                            return (
+                                <PressableView
+                                    style={{
+                                        paddingStart: theme.dimens.space.md
+                                    }}
+                                    key={opt.id}
+                                    accessibilityHint={title}
+                                    onPress={() => {
+                                        opt.onClick && opt.onClick(opt.id)
+                                    }}>
+                                    <ActionIcon
+                                        color={props.forgroundColor || theme.colors.invert.text}
+                                        style={{
+                                            paddingLeft: theme.dimens.space.sm
+                                        }} />
+                                </PressableView>
+                            )
+                        })
+                    }
+                </HBox>
+            </HBox>
+        </HBox>
+    )
+}
+
+export function BottomNavBar(props: ViewProps &
+{
+    options: Option[],
+    selectedId: string,
+    onSelect: (id: string) => void,
+    onDimens?: (width: number, height: number) => void
+}) {
+    const theme = useContext(ThemeContext)
+    const onDimens = props.onDimens
+    const hasText = props.options?.find((op) => {
+        return op.title != undefined
+    })
+    function getItem(op: Option) {
+        const color = props.selectedId == op.id ? theme.colors.accent : theme.colors.text
+        const ItemIcon = getIcon(op.icon)
+        const title = op.title || (hasText ? op.id : undefined)
+        return (
+            <PressableView
+                style={{
+                    paddingTop: theme.dimens.space.sm
+                }}
+                key={op.id}
+                onPress={() => {
+                    op.onClick && op.onClick(op.id)
+                    props.onSelect(op.id)
+                }}>
+                <Center >
+                    {op.icon && <ItemIcon color={color} />}
+                    {title &&
+                        <TextView style={{
+                            fontSize: theme.dimens.font.sm,
+                            color: color
+                        }}>{title}</TextView>}
+                </Center>
+            </PressableView>
+        )
+    }
+    if (!props.options || props.options?.length == 0) {
+        return null
+    }
+    return (
+        <HBox
+            onLayout={(event) => {
+                const { width, height } = event.nativeEvent.layout;
+                onDimens && onDimens(width, height)
+            }}
+            {...props}
+            style={[{
+                padding: theme.dimens.space.md,
+                paddingTop: !hasText ? theme.dimens.space.lg : theme.dimens.space.md,
+                paddingBottom: !hasText ? theme.dimens.space.lg : theme.dimens.space.md,
+                backgroundColor: theme.colors.forground,
+                zIndex: 100,
+                width: '100%',
+                justifyContent: 'space-around',
+                left: 0,
+                bottom: 0,
+                position: 'absolute'
+            }, props.style]}
+        >
+            {
+                props.options?.map(op => {
+                    return getItem(op)
+                })
+            }
+        </HBox>
+    )
+
+}