npm - react-native-boxes - Versions diffs - 1.0.5 → 1.0.7 - Mend

react-native-boxes 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/demo.js CHANGED Viewed

@@ -43,7 +43,6 @@ 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);
@@ -62,14 +61,15 @@ function DemoScreen({ navigation }) {
         forceUpdate();
     }, [selectedTheme]);
     const [, forceUpdate] = (0, react_1.useReducer)(x => x + 1, 0);
-    return (<_1.VBox style={{
+    return (<react_native_safe_area_context_1.SafeAreaProvider>
+      <_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={[
+        <_1.SimpleToolbar title="Demo" homeIcon={(0, utils_1.ReactWrapper)(<Image_1.Icon color={theme.colors.invert.text} name="plus"/>)} options={[
             {
                 id: 'test',
                 icon: 'gear',
@@ -79,26 +79,26 @@ function DemoScreen({ navigation }) {
             {
                 id: 'test2',
                 icon: (0, utils_1.ReactWrapper)(<_1.PressableView>
-              <Image_1.Avatar style={{
+                <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>),
+              </_1.PressableView>),
                 onClick: (id) => {
                 }
             }
         ]}/>
-      <Box_1.default automaticallyAdjustKeyboardInsets={true} keyboardShouldPersistTaps={'handled'} style={{
+        <Box_1.default automaticallyAdjustKeyboardInsets={true} keyboardShouldPersistTaps={'handled'} style={{
             flexGrow: 1,
         }} nestedScrollEnabled={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
-        <_1.Center style={{
+          <_1.Center style={{
             flexDirection: 'row',
             padding: 20
         }}>
-          <Image_1.Avatar onPress={() => {
+            <Image_1.Avatar onPress={() => {
             setbottomsheetVisible(true);
         }} style={{
             borderColor: theme.colors.success,
@@ -107,8 +107,8 @@ function DemoScreen({ navigation }) {
             color: theme.colors.success,
             size: theme.dimens.icon.lg
         }}/>
-          <_1.Center>
-            <Image_1.Avatar style={{
+            <_1.Center>
+              <Image_1.Avatar style={{
             borderWidth: theme.dimens.space.sm,
             width: 100,
             height: 100,
@@ -120,102 +120,102 @@ function DemoScreen({ navigation }) {
             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>
+              <_1.Subtitle>{mText}</_1.Subtitle>
+            </_1.Center>
-          <Image_1.Avatar style={{
+            <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={{
+          </_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={() => {
+            <_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>
+              <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={{
+          </_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.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={{
+            <_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.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={{
+          <_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.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.ButtonView style={{}}>Button Text</_1.ButtonView>
+              </_1.VBox>
+              <_1.RightIconButton text='Click Me Icon' icon={btnIcon}>
+              </_1.RightIconButton>
-            <_1.Center>
-              <_1.LoadingButton onPress={(e) => {
+              <_1.Center>
+                <_1.LoadingButton onPress={(e) => {
             setLoading(!loading);
         }} loading={loading} text='Click Me'/>
-              <_1.ButtonView underlayColor={theme.colors.transparent} style={{
+                <_1.ButtonView underlayColor={theme.colors.transparent} style={{
             color: theme.colors.accent,
             backgroundColor: theme.colors.transparent,
         }}>Tertiary button</_1.ButtonView>
-            </_1.Center>
+              </_1.Center>
-            <_1.Expand title='Nested expand'>
-              <_1.HBox style={{
+              <_1.Expand title='Nested expand'>
+                <_1.HBox style={{
             justifyContent: 'center',
         }}>
-                <_1.LoadingButton style={{
+                  <_1.LoadingButton style={{
             width: 'auto'
         }} onPress={(e) => {
             setLoading(!loading);
         }} loading={loading} text='Click Me left'/>
-                <_1.LoadingButton loaderStyle='transparent' style={{
+                  <_1.LoadingButton loaderStyle='transparent' style={{
             width: 'auto'
         }} onPress={(e) => {
             setLoading(!loading);
         }} loading={loading} text='Click Me right'/>
-              </_1.HBox>
-            </_1.Expand>
+                </_1.HBox>
+              </_1.Expand>
-          </_1.VBox>
-        </_1.Expand>
+            </_1.VBox>
+          </_1.Expand>
-        <_1.ButtonView underlayColor={theme.colors.transparent} style={{
+          <_1.ButtonView underlayColor={theme.colors.transparent} style={{
             color: theme.colors.accent,
             backgroundColor: theme.colors.transparent,
         }} onPress={() => {
@@ -223,7 +223,7 @@ function DemoScreen({ navigation }) {
         }}>{selectedTheme ? 'Light' : 'Dark'}</_1.ButtonView>
-        <_1.ButtonView underlayColor={theme.colors.transparent} style={{
+          <_1.ButtonView underlayColor={theme.colors.transparent} style={{
             color: theme.colors.accent,
             backgroundColor: theme.colors.transparent,
         }} onPress={() => {
@@ -231,8 +231,8 @@ function DemoScreen({ navigation }) {
         }}>Show Sheet</_1.ButtonView>
-      </Box_1.default>
-      <_1.BottomNavBar style={{
+        </Box_1.default>
+        <_1.BottomNavBar style={{
             borderTopLeftRadius: theme.dimens.space.md,
             borderTopRightRadius: theme.dimens.space.md,
         }} onSelect={setSelectedBottomBarId} selectedId={selectedBottombarId} options={[
@@ -255,7 +255,7 @@ function DemoScreen({ navigation }) {
                 id: 'profile',
                 title: 'Profile',
                 icon: (0, utils_1.ReactWrapper)(<_1.PressableView>
-              <Image_1.Avatar onPress={() => {
+                <Image_1.Avatar onPress={() => {
                         setSelectedBottomBarId('profile');
                     }} style={{
                         borderColor: selectedBottombarId == 'profile' ?
@@ -266,36 +266,37 @@ function DemoScreen({ navigation }) {
                     }}
                 // iconName='user'
                 iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"/>
-            </_1.PressableView>)
+              </_1.PressableView>)
             }
         ]} onDimens={(w, h) => {
             setBottombarHeight(h);
             console.log("bottomBarHeight", h);
         }}/>
-      <Modal_1.BottomSheet title="About" visible={bottomsheetVisible} onDismiss={() => {
+        <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.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={{
+          <_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={() => {
+            <_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>
+              <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>);
+          </_1.Expand>
+        </Modal_1.BottomSheet>
+      </_1.VBox>
+    </react_native_safe_area_context_1.SafeAreaProvider>);
 }
 exports.DemoScreen = DemoScreen;
 //# sourceMappingURL=demo.js.map

package/dist/demo.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

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

package/src/demo.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { LayoutAnimation, SafeAreaView } from 'react-native';
 import { BottomNavBar, ButtonView, Caption, Center, CompositeTextInputView, Expand, HBox, LoadingButton, PressableView, RightIconButton, SimpleToolbar, Subtitle, TextInputView, TextView, Theme, ThemeContext, Title, VBox } from '.';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AlertMessage } from './Message';
 import { BottomSheet } from './Modal';
 import { Avatar, Icon } from './Image';
@@ -22,7 +22,6 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
   const btnIcon = (<FontAwesome name='google'
     size={theme.dimens.icon.md}
     color={theme.colors.invert.text} />)
-  const insets = useSafeAreaInsets();
   const [loading, setLoading] = useState(false)
   const [alert, setBs] = useState(`In this version, the icon used is always 'chevron-right' even when expanded.`)
   const [bottomsheetVisible, setbottomsheetVisible] = useState(false)
@@ -44,340 +43,342 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
   const [, forceUpdate] = useReducer(x => x + 1, 0);
   return (
-    <VBox
-      style={{
-        backgroundColor: theme.colors.background,
-        padding: 0,
-        paddingBottom: bottomBarHeight,
-        margin: 0,
-        height: '100%'
-      }} >
-      <SimpleToolbar
-        title="Demo"
-        homeIcon={
-          ReactWrapper(<Icon color={theme.colors.invert.text} name="plus" />)
-        }
-        options={[
-          {
-            id: 'test',
-            icon: 'gear',
-            onClick: (id) => {
-            }
-          },
-          {
-            id: 'test2',
-            icon: ReactWrapper(<PressableView>
-              <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" />
-            </PressableView>),
-            onClick: (id) => {
-            }
-          }
-        ]} />
-      <KeyboardAvoidingScrollView
-        automaticallyAdjustKeyboardInsets={true}
-        keyboardShouldPersistTaps={'handled'}
+    <SafeAreaProvider>
+      <VBox
         style={{
-          flexGrow: 1,
-        }}
-        nestedScrollEnabled={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
+          backgroundColor: theme.colors.background,
+          padding: 0,
+          paddingBottom: bottomBarHeight,
+          margin: 0,
+          height: '100%'
+        }} >
+        <SimpleToolbar
+          title="Demo"
+          homeIcon={
+            ReactWrapper(<Icon color={theme.colors.invert.text} name="plus" />)
+          }
+          options={[
+            {
+              id: 'test',
+              icon: 'gear',
+              onClick: (id) => {
+              }
+            },
+            {
+              id: 'test2',
+              icon: ReactWrapper(<PressableView>
+                <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" />
+              </PressableView>),
+              onClick: (id) => {
+              }
+            }
+          ]} />
+        <KeyboardAvoidingScrollView
+          automaticallyAdjustKeyboardInsets={true}
+          keyboardShouldPersistTaps={'handled'}
+          style={{
+            flexGrow: 1,
+          }}
+          nestedScrollEnabled={true}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+        >
-        <Center style={{
-          flexDirection: 'row',
-          padding: 20
-        }}>
+          <Center style={{
+            flexDirection: 'row',
+            padding: 20
+          }}>
-          <Avatar
-            onPress={() => {
-              setbottomsheetVisible(true)
-            }}
-            style={{
-              borderColor: theme.colors.success,
-            }}
-            iconNameProps={{
-              name: 'user',
-              color: theme.colors.success,
-              size: theme.dimens.icon.lg
-            }}
-          />
-          <Center>
             <Avatar
-              style={{
-                borderWidth: theme.dimens.space.sm,
-                width: 100,
-                height: 100,
-                borderColor: theme.colors.success
-              }}
-              iconText='SN'
               onPress={() => {
                 setbottomsheetVisible(true)
               }}
+              style={{
+                borderColor: theme.colors.success,
+              }}
               iconNameProps={{
                 name: 'user',
                 color: theme.colors.success,
                 size: theme.dimens.icon.lg
               }}
-              iconUrl='https://cdn.truelancer.com/user-picture/307510-5c1f11bad82e9.jpg' />
-            <Subtitle>{mText}</Subtitle>
-          </Center>
-          <Avatar
-            style={{
-              borderColor: theme.colors.success,
-              color: theme.colors.success
-            }}
-            onPress={() => {
-              setbottomsheetVisible(true)
-            }}
-            iconText='SN' />
-        </Center>
-        <Expand title='Message Alert' initialExpand={false}
-          style={{
-            backgroundColor: theme.colors.forground
-          }}
-          titleBackgroundColor={theme.colors.forground}
-        >
-          <VBox>
-            <AlertMessage text={alert} onDismiss={() => {
-              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-              setAlert('')
-            }} />
-            <AlertMessage text='Critial Message' type='critical' />
-            <AlertMessage text='Success' type='success' />
-            <AlertMessage text='Warning Message' type='warning' />
-          </VBox>
-        </Expand>
-        <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'>
-          <VBox>
-            <Title>Text A</Title>
-            <Subtitle>Text A Text A Text AText A Text AText A</Subtitle>
-            <TextView>Text A</TextView>
-            <Caption>Text Caption</Caption>
-          </VBox>
-        </Expand>
-        <Expand title='Inputs'>
+            />
+            <Center>
+              <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' />
+              <Subtitle>{mText}</Subtitle>
+            </Center>
-          <VBox>
-            <TextInputView
-              style={{
-                fontFamily: theme.fonts.Bold
-              }}
-              initialText={mText}
-              value={mText}
-              onChangeText={t => setMText(t)} />
-            <CompositeTextInputView
-              onChangeText={t => setMText(t)}
-              placeholder='A test'
-              initialText='Test' />
-            <CompositeTextInputView
-              inputMode='decimal'
-              icon={"close"}
+            <Avatar
               style={{
+                borderColor: theme.colors.success,
+                color: theme.colors.success
               }}
-              alertTextColor={theme.colors.warning}
-              placeholder='Enter your name'
-              initialText='Test'
-              value={mText}
-              onChangeText={t => setMText(t)} />
-            <CompositeTextInputView
-              style={{
+              onPress={() => {
+                setbottomsheetVisible(true)
               }}
-              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)} />
-          </VBox>
-        </Expand>
-        <Expand
-          iconStyle={{
-            name: 'chevron-right',
-            color: 'red'
-          }}
-          title='Buttons'
-          initialExpand={false}>
-          <VBox style={{
-          }}>
-            <VBox >
-              <ButtonView
-                icon={btnIcon}
-                style={{
-                }}>Button Icon</ButtonView>
-              <ButtonView style={{
-              }}>Button Text</ButtonView>
+              iconText='SN' />
+          </Center>
+          <Expand title='Message Alert' initialExpand={false}
+            style={{
+              backgroundColor: theme.colors.forground
+            }}
+            titleBackgroundColor={theme.colors.forground}
+          >
+            <VBox>
+              <AlertMessage text={alert} onDismiss={() => {
+                LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+                setAlert('')
+              }} />
+              <AlertMessage text='Critial Message' type='critical' />
+              <AlertMessage text='Success' type='success' />
+              <AlertMessage text='Warning Message' type='warning' />
             </VBox>
-            <RightIconButton
-              text='Click Me Icon'
-              icon={btnIcon}>
-            </RightIconButton>
-            <Center>
-              <LoadingButton
+          </Expand>
+          <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'>
+            <VBox>
+              <Title>Text A</Title>
+              <Subtitle>Text A Text A Text AText A Text AText A</Subtitle>
+              <TextView>Text A</TextView>
+              <Caption>Text Caption</Caption>
+            </VBox>
+          </Expand>
+          <Expand title='Inputs'>
-                onPress={(e) => {
-                  setLoading(!loading)
+            <VBox>
+              <TextInputView
+                style={{
+                  fontFamily: theme.fonts.Bold
                 }}
-                loading={loading}
-                text='Click Me' />
-              <ButtonView
-                underlayColor={theme.colors.transparent}
+                initialText={mText}
+                value={mText}
+                onChangeText={t => setMText(t)} />
+              <CompositeTextInputView
+                onChangeText={t => setMText(t)}
+                placeholder='A test'
+                initialText='Test' />
+              <CompositeTextInputView
+                inputMode='decimal'
+                icon={"close"}
+                style={{
+                }}
+                alertTextColor={theme.colors.warning}
+                placeholder='Enter your name'
+                initialText='Test'
+                value={mText}
+                onChangeText={t => setMText(t)} />
+              <CompositeTextInputView
                 style={{
-                  color: theme.colors.accent,
-                  backgroundColor: theme.colors.transparent,
-                }}>Tertiary button</ButtonView>
+                }}
+                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)} />
+            </VBox>
+          </Expand>
-            </Center>
+          <Expand
+            iconStyle={{
+              name: 'chevron-right',
+              color: 'red'
+            }}
+            title='Buttons'
+            initialExpand={false}>
+            <VBox style={{
+            }}>
+              <VBox >
+                <ButtonView
+                  icon={btnIcon}
+                  style={{
+                  }}>Button Icon</ButtonView>
+                <ButtonView style={{
+                }}>Button Text</ButtonView>
+              </VBox>
+              <RightIconButton
+                text='Click Me Icon'
+                icon={btnIcon}>
+              </RightIconButton>
-            <Expand title='Nested expand'>
-              <HBox style={{
-                justifyContent: 'center',
-              }}>
+              <Center>
                 <LoadingButton
-                  style={{
-                    width: 'auto'
-                  }}
                   onPress={(e) => {
                     setLoading(!loading)
                   }}
                   loading={loading}
-                  text='Click Me left' />
-                <LoadingButton
-                  loaderStyle='transparent'
+                  text='Click Me' />
+                <ButtonView
+                  underlayColor={theme.colors.transparent}
                   style={{
-                    width: 'auto'
-                  }}
-                  onPress={(e) => {
-                    setLoading(!loading)
-                  }}
-                  loading={loading}
-                  text='Click Me right' />
-              </HBox>
-            </Expand>
+                    color: theme.colors.accent,
+                    backgroundColor: theme.colors.transparent,
+                  }}>Tertiary button</ButtonView>
-          </VBox>
-        </Expand>
+              </Center>
+              <Expand title='Nested expand'>
+                <HBox style={{
+                  justifyContent: 'center',
+                }}>
+                  <LoadingButton
+                    style={{
+                      width: 'auto'
+                    }}
+                    onPress={(e) => {
+                      setLoading(!loading)
+                    }}
+                    loading={loading}
+                    text='Click Me left' />
+                  <LoadingButton
+                    loaderStyle='transparent'
+                    style={{
+                      width: 'auto'
+                    }}
+                    onPress={(e) => {
+                      setLoading(!loading)
+                    }}
+                    loading={loading}
+                    text='Click Me right' />
+                </HBox>
+              </Expand>
+            </VBox>
+          </Expand>
-        <ButtonView
-          underlayColor={theme.colors.transparent}
-          style={{
-            color: theme.colors.accent,
-            backgroundColor: theme.colors.transparent,
-          }}
-          onPress={() => {
-            setSelectedTheme(!selectedTheme)
-          }}>{selectedTheme ? 'Light' : 'Dark'}</ButtonView>
-        <ButtonView
-          underlayColor={theme.colors.transparent}
-          style={{
-            color: theme.colors.accent,
-            backgroundColor: theme.colors.transparent,
-          }}
-          onPress={() => {
-            setbottomsheetVisible(true)
-          }}>Show Sheet</ButtonView>
+          <ButtonView
+            underlayColor={theme.colors.transparent}
+            style={{
+              color: theme.colors.accent,
+              backgroundColor: theme.colors.transparent,
+            }}
+            onPress={() => {
+              setSelectedTheme(!selectedTheme)
+            }}>{selectedTheme ? 'Light' : 'Dark'}</ButtonView>
-      </KeyboardAvoidingScrollView>
-      <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: ReactWrapper(<PressableView>
-              <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"
-              />
-            </PressableView>)
-          }
-        ]}
-        onDimens={(w, h) => {
-          setBottombarHeight(h)
-          console.log("bottomBarHeight", h)
-        }} />
+          <ButtonView
+            underlayColor={theme.colors.transparent}
+            style={{
+              color: theme.colors.accent,
+              backgroundColor: theme.colors.transparent,
+            }}
+            onPress={() => {
+              setbottomsheetVisible(true)
+            }}>Show Sheet</ButtonView>
-      <BottomSheet
-        title="About"
-        visible={bottomsheetVisible} onDismiss={() => {
-          setbottomsheetVisible(false)
-        }} >
-        <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.</TextView>
-        <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.</TextView>
-        <Expand title='Types' initialExpand={false}
+        </KeyboardAvoidingScrollView>
+        <BottomNavBar
           style={{
-            padding: 0,
-            backgroundColor: theme.colors.forground
+            borderTopLeftRadius: theme.dimens.space.md,
+            borderTopRightRadius: theme.dimens.space.md,
           }}
-          titleBackgroundColor={theme.colors.forground}
-        >
-          <VBox>
-            <AlertMessage text={alert} onDismiss={() => {
-              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-              setAlert('')
-            }} />
-            <AlertMessage text='Tyrannosaurus rex' type='critical' />
-            <AlertMessage text='Spinosaurus' type='success' />
-            <AlertMessage text='Ankylosaurs' type='warning' />
-          </VBox>
+          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: ReactWrapper(<PressableView>
+                <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"
+                />
+              </PressableView>)
+            }
+          ]}
+          onDimens={(w, h) => {
+            setBottombarHeight(h)
+            console.log("bottomBarHeight", h)
+          }} />
+        <BottomSheet
+          title="About"
+          visible={bottomsheetVisible} onDismiss={() => {
+            setbottomsheetVisible(false)
+          }} >
+          <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.</TextView>
+          <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.</TextView>
+          <Expand title='Types' initialExpand={false}
+            style={{
+              padding: 0,
+              backgroundColor: theme.colors.forground
+            }}
+            titleBackgroundColor={theme.colors.forground}
+          >
+            <VBox>
+              <AlertMessage text={alert} onDismiss={() => {
+                LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+                setAlert('')
+              }} />
+              <AlertMessage text='Tyrannosaurus rex' type='critical' />
+              <AlertMessage text='Spinosaurus' type='success' />
+              <AlertMessage text='Ankylosaurs' type='warning' />
+            </VBox>
-        </Expand>
-      </BottomSheet>
-    </VBox>
+          </Expand>
+        </BottomSheet>
+      </VBox>
+    </SafeAreaProvider>
   );
 }