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
  1. package/dist/demo.js +78 -77
  2. package/dist/demo.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/demo.tsx +296 -295
package/dist/demo.js CHANGED
@@ -43,7 +43,6 @@ function DemoScreen({ navigation }) {
43
43
  const theme = (0, react_1.useContext)(_1.ThemeContext);
44
44
  console.log('Rendering');
45
45
  const btnIcon = (<FontAwesome_1.default name='google' size={theme.dimens.icon.md} color={theme.colors.invert.text}/>);
46
- const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
47
46
  const [loading, setLoading] = (0, react_1.useState)(false);
48
47
  const [alert, setBs] = (0, react_1.useState)(`In this version, the icon used is always 'chevron-right' even when expanded.`);
49
48
  const [bottomsheetVisible, setbottomsheetVisible] = (0, react_1.useState)(false);
@@ -62,14 +61,15 @@ function DemoScreen({ navigation }) {
62
61
  forceUpdate();
63
62
  }, [selectedTheme]);
64
63
  const [, forceUpdate] = (0, react_1.useReducer)(x => x + 1, 0);
65
- return (<_1.VBox style={{
64
+ return (<react_native_safe_area_context_1.SafeAreaProvider>
65
+ <_1.VBox style={{
66
66
  backgroundColor: theme.colors.background,
67
67
  padding: 0,
68
68
  paddingBottom: bottomBarHeight,
69
69
  margin: 0,
70
70
  height: '100%'
71
71
  }}>
72
- <_1.SimpleToolbar title="Demo" homeIcon={(0, utils_1.ReactWrapper)(<Image_1.Icon color={theme.colors.invert.text} name="plus"/>)} options={[
72
+ <_1.SimpleToolbar title="Demo" homeIcon={(0, utils_1.ReactWrapper)(<Image_1.Icon color={theme.colors.invert.text} name="plus"/>)} options={[
73
73
  {
74
74
  id: 'test',
75
75
  icon: 'gear',
@@ -79,26 +79,26 @@ function DemoScreen({ navigation }) {
79
79
  {
80
80
  id: 'test2',
81
81
  icon: (0, utils_1.ReactWrapper)(<_1.PressableView>
82
- <Image_1.Avatar style={{
82
+ <Image_1.Avatar style={{
83
83
  margin: 0,
84
84
  height: theme.dimens?.icon?.md * 1.25,
85
85
  width: theme.dimens?.icon?.md * 1.25,
86
86
  }} iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"/>
87
- </_1.PressableView>),
87
+ </_1.PressableView>),
88
88
  onClick: (id) => {
89
89
  }
90
90
  }
91
91
  ]}/>
92
- <Box_1.default automaticallyAdjustKeyboardInsets={true} keyboardShouldPersistTaps={'handled'} style={{
92
+ <Box_1.default automaticallyAdjustKeyboardInsets={true} keyboardShouldPersistTaps={'handled'} style={{
93
93
  flexGrow: 1,
94
94
  }} nestedScrollEnabled={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
95
95
 
96
- <_1.Center style={{
96
+ <_1.Center style={{
97
97
  flexDirection: 'row',
98
98
  padding: 20
99
99
  }}>
100
100
 
101
- <Image_1.Avatar onPress={() => {
101
+ <Image_1.Avatar onPress={() => {
102
102
  setbottomsheetVisible(true);
103
103
  }} style={{
104
104
  borderColor: theme.colors.success,
@@ -107,8 +107,8 @@ function DemoScreen({ navigation }) {
107
107
  color: theme.colors.success,
108
108
  size: theme.dimens.icon.lg
109
109
  }}/>
110
- <_1.Center>
111
- <Image_1.Avatar style={{
110
+ <_1.Center>
111
+ <Image_1.Avatar style={{
112
112
  borderWidth: theme.dimens.space.sm,
113
113
  width: 100,
114
114
  height: 100,
@@ -120,102 +120,102 @@ function DemoScreen({ navigation }) {
120
120
  color: theme.colors.success,
121
121
  size: theme.dimens.icon.lg
122
122
  }} iconUrl='https://cdn.truelancer.com/user-picture/307510-5c1f11bad82e9.jpg'/>
123
- <_1.Subtitle>{mText}</_1.Subtitle>
124
- </_1.Center>
123
+ <_1.Subtitle>{mText}</_1.Subtitle>
124
+ </_1.Center>
125
125
 
126
- <Image_1.Avatar style={{
126
+ <Image_1.Avatar style={{
127
127
  borderColor: theme.colors.success,
128
128
  color: theme.colors.success
129
129
  }} onPress={() => {
130
130
  setbottomsheetVisible(true);
131
131
  }} iconText='SN'/>
132
- </_1.Center>
133
- <_1.Expand title='Message Alert' initialExpand={false} style={{
132
+ </_1.Center>
133
+ <_1.Expand title='Message Alert' initialExpand={false} style={{
134
134
  backgroundColor: theme.colors.forground
135
135
  }} titleBackgroundColor={theme.colors.forground}>
136
- <_1.VBox>
137
- <Message_1.AlertMessage text={alert} onDismiss={() => {
136
+ <_1.VBox>
137
+ <Message_1.AlertMessage text={alert} onDismiss={() => {
138
138
  react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
139
139
  setAlert('');
140
140
  }}/>
141
- <Message_1.AlertMessage text='Critial Message' type='critical'/>
142
- <Message_1.AlertMessage text='Success' type='success'/>
143
- <Message_1.AlertMessage text='Warning Message' type='warning'/>
144
- </_1.VBox>
141
+ <Message_1.AlertMessage text='Critial Message' type='critical'/>
142
+ <Message_1.AlertMessage text='Success' type='success'/>
143
+ <Message_1.AlertMessage text='Warning Message' type='warning'/>
144
+ </_1.VBox>
145
145
 
146
- </_1.Expand>
147
- <_1.Expand style={{
146
+ </_1.Expand>
147
+ <_1.Expand style={{
148
148
  padding: 0,
149
149
  borderWidth: 0.1,
150
150
  borderColor: '#DCDCDC'
151
151
  }} 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'>
152
- <_1.VBox>
153
- <_1.Title>Text A</_1.Title>
154
- <_1.Subtitle>Text A Text A Text AText A Text AText A</_1.Subtitle>
155
- <_1.TextView>Text A</_1.TextView>
156
- <_1.Caption>Text Caption</_1.Caption>
157
- </_1.VBox>
158
- </_1.Expand>
159
- <_1.Expand title='Inputs'>
152
+ <_1.VBox>
153
+ <_1.Title>Text A</_1.Title>
154
+ <_1.Subtitle>Text A Text A Text AText A Text AText A</_1.Subtitle>
155
+ <_1.TextView>Text A</_1.TextView>
156
+ <_1.Caption>Text Caption</_1.Caption>
157
+ </_1.VBox>
158
+ </_1.Expand>
159
+ <_1.Expand title='Inputs'>
160
160
 
161
- <_1.VBox>
162
- <_1.TextInputView style={{
161
+ <_1.VBox>
162
+ <_1.TextInputView style={{
163
163
  fontFamily: theme.fonts.Bold
164
164
  }} initialText={mText} value={mText} onChangeText={t => setMText(t)}/>
165
- <_1.CompositeTextInputView onChangeText={t => setMText(t)} placeholder='A test' initialText='Test'/>
166
- <_1.CompositeTextInputView inputMode='decimal' icon={"close"} style={{}} alertTextColor={theme.colors.warning} placeholder='Enter your name' initialText='Test' value={mText} onChangeText={t => setMText(t)}/>
167
- <_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)}/>
168
- </_1.VBox>
169
- </_1.Expand>
165
+ <_1.CompositeTextInputView onChangeText={t => setMText(t)} placeholder='A test' initialText='Test'/>
166
+ <_1.CompositeTextInputView inputMode='decimal' icon={"close"} style={{}} alertTextColor={theme.colors.warning} placeholder='Enter your name' initialText='Test' value={mText} onChangeText={t => setMText(t)}/>
167
+ <_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)}/>
168
+ </_1.VBox>
169
+ </_1.Expand>
170
170
 
171
- <_1.Expand iconStyle={{
171
+ <_1.Expand iconStyle={{
172
172
  name: 'chevron-right',
173
173
  color: 'red'
174
174
  }} title='Buttons' initialExpand={false}>
175
- <_1.VBox style={{}}>
176
- <_1.VBox>
177
- <_1.ButtonView icon={btnIcon} style={{}}>Button Icon</_1.ButtonView>
175
+ <_1.VBox style={{}}>
176
+ <_1.VBox>
177
+ <_1.ButtonView icon={btnIcon} style={{}}>Button Icon</_1.ButtonView>
178
178
 
179
- <_1.ButtonView style={{}}>Button Text</_1.ButtonView>
180
- </_1.VBox>
181
- <_1.RightIconButton text='Click Me Icon' icon={btnIcon}>
182
- </_1.RightIconButton>
179
+ <_1.ButtonView style={{}}>Button Text</_1.ButtonView>
180
+ </_1.VBox>
181
+ <_1.RightIconButton text='Click Me Icon' icon={btnIcon}>
182
+ </_1.RightIconButton>
183
183
 
184
- <_1.Center>
185
- <_1.LoadingButton onPress={(e) => {
184
+ <_1.Center>
185
+ <_1.LoadingButton onPress={(e) => {
186
186
  setLoading(!loading);
187
187
  }} loading={loading} text='Click Me'/>
188
188
 
189
- <_1.ButtonView underlayColor={theme.colors.transparent} style={{
189
+ <_1.ButtonView underlayColor={theme.colors.transparent} style={{
190
190
  color: theme.colors.accent,
191
191
  backgroundColor: theme.colors.transparent,
192
192
  }}>Tertiary button</_1.ButtonView>
193
193
 
194
- </_1.Center>
194
+ </_1.Center>
195
195
 
196
- <_1.Expand title='Nested expand'>
197
- <_1.HBox style={{
196
+ <_1.Expand title='Nested expand'>
197
+ <_1.HBox style={{
198
198
  justifyContent: 'center',
199
199
  }}>
200
- <_1.LoadingButton style={{
200
+ <_1.LoadingButton style={{
201
201
  width: 'auto'
202
202
  }} onPress={(e) => {
203
203
  setLoading(!loading);
204
204
  }} loading={loading} text='Click Me left'/>
205
- <_1.LoadingButton loaderStyle='transparent' style={{
205
+ <_1.LoadingButton loaderStyle='transparent' style={{
206
206
  width: 'auto'
207
207
  }} onPress={(e) => {
208
208
  setLoading(!loading);
209
209
  }} loading={loading} text='Click Me right'/>
210
- </_1.HBox>
211
- </_1.Expand>
210
+ </_1.HBox>
211
+ </_1.Expand>
212
212
 
213
- </_1.VBox>
214
- </_1.Expand>
213
+ </_1.VBox>
214
+ </_1.Expand>
215
215
 
216
216
 
217
217
 
218
- <_1.ButtonView underlayColor={theme.colors.transparent} style={{
218
+ <_1.ButtonView underlayColor={theme.colors.transparent} style={{
219
219
  color: theme.colors.accent,
220
220
  backgroundColor: theme.colors.transparent,
221
221
  }} onPress={() => {
@@ -223,7 +223,7 @@ function DemoScreen({ navigation }) {
223
223
  }}>{selectedTheme ? 'Light' : 'Dark'}</_1.ButtonView>
224
224
 
225
225
 
226
- <_1.ButtonView underlayColor={theme.colors.transparent} style={{
226
+ <_1.ButtonView underlayColor={theme.colors.transparent} style={{
227
227
  color: theme.colors.accent,
228
228
  backgroundColor: theme.colors.transparent,
229
229
  }} onPress={() => {
@@ -231,8 +231,8 @@ function DemoScreen({ navigation }) {
231
231
  }}>Show Sheet</_1.ButtonView>
232
232
 
233
233
 
234
- </Box_1.default>
235
- <_1.BottomNavBar style={{
234
+ </Box_1.default>
235
+ <_1.BottomNavBar style={{
236
236
  borderTopLeftRadius: theme.dimens.space.md,
237
237
  borderTopRightRadius: theme.dimens.space.md,
238
238
  }} onSelect={setSelectedBottomBarId} selectedId={selectedBottombarId} options={[
@@ -255,7 +255,7 @@ function DemoScreen({ navigation }) {
255
255
  id: 'profile',
256
256
  title: 'Profile',
257
257
  icon: (0, utils_1.ReactWrapper)(<_1.PressableView>
258
- <Image_1.Avatar onPress={() => {
258
+ <Image_1.Avatar onPress={() => {
259
259
  setSelectedBottomBarId('profile');
260
260
  }} style={{
261
261
  borderColor: selectedBottombarId == 'profile' ?
@@ -266,36 +266,37 @@ function DemoScreen({ navigation }) {
266
266
  }}
267
267
  // iconName='user'
268
268
  iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"/>
269
- </_1.PressableView>)
269
+ </_1.PressableView>)
270
270
  }
271
271
  ]} onDimens={(w, h) => {
272
272
  setBottombarHeight(h);
273
273
  console.log("bottomBarHeight", h);
274
274
  }}/>
275
275
 
276
- <Modal_1.BottomSheet title="About" visible={bottomsheetVisible} onDismiss={() => {
276
+ <Modal_1.BottomSheet title="About" visible={bottomsheetVisible} onDismiss={() => {
277
277
  setbottomsheetVisible(false);
278
278
  }}>
279
- <_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>
279
+ <_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>
280
280
 
281
- <_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>
282
- <_1.Expand title='Types' initialExpand={false} style={{
281
+ <_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>
282
+ <_1.Expand title='Types' initialExpand={false} style={{
283
283
  padding: 0,
284
284
  backgroundColor: theme.colors.forground
285
285
  }} titleBackgroundColor={theme.colors.forground}>
286
- <_1.VBox>
287
- <Message_1.AlertMessage text={alert} onDismiss={() => {
286
+ <_1.VBox>
287
+ <Message_1.AlertMessage text={alert} onDismiss={() => {
288
288
  react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
289
289
  setAlert('');
290
290
  }}/>
291
- <Message_1.AlertMessage text='Tyrannosaurus rex' type='critical'/>
292
- <Message_1.AlertMessage text='Spinosaurus' type='success'/>
293
- <Message_1.AlertMessage text='Ankylosaurs' type='warning'/>
294
- </_1.VBox>
291
+ <Message_1.AlertMessage text='Tyrannosaurus rex' type='critical'/>
292
+ <Message_1.AlertMessage text='Spinosaurus' type='success'/>
293
+ <Message_1.AlertMessage text='Ankylosaurs' type='warning'/>
294
+ </_1.VBox>
295
295
 
296
- </_1.Expand>
297
- </Modal_1.BottomSheet>
298
- </_1.VBox>);
296
+ </_1.Expand>
297
+ </Modal_1.BottomSheet>
298
+ </_1.VBox>
299
+ </react_native_safe_area_context_1.SafeAreaProvider>);
299
300
  }
300
301
  exports.DemoScreen = DemoScreen;
301
302
  //# sourceMappingURL=demo.js.map
package/dist/demo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"demo.js","sourceRoot":"","sources":["../src/demo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAoE;AACpE,6CAA8B;AAC9B,+CAA6D;AAC7D,wBAAuO;AACvO,iFAAyD;AACzD,mFAAmE;AACnE,uCAAyC;AACzC,mCAAsC;AACtC,mCAAuC;AACvC,mCAAuC;AACvC,gDAA+C;AAC/C,qCAAmD;AAMnD,SAAgB,UAAU,CAAC,EAAE,UAAU,EAAmB;IAExD,MAAM,KAAK,GAAU,IAAA,kBAAU,EAAC,eAAY,CAAC,CAAA;IAC7C,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IACxB,MAAM,OAAO,GAAG,CAAC,CAAC,qBAAW,CAAC,IAAI,CAAC,QAAQ,CACzC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAC3B,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAG,CAAC,CAAA;IACtC,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,IAAA,gBAAQ,EAAC,8EAA8E,CAAC,CAAA;IAC/G,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACnE,SAAS,QAAQ,CAAC,EAAU;QAC1B,KAAK,CAAC,EAAE,CAAC,CAAA;QACT,UAAU,CAAC,GAAG,EAAE;YACd,KAAK,CAAC,8EAA8E,CAAC,CAAA;QACvF,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC;IAED,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAM,CAAC,CAAA;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,CAAA;IAC9C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;IAC7E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAA;IACxD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAW,CAAC,CAAC,CAAC,mBAAU,CAAA;QACvD,WAAW,EAAE,CAAA;IACf,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG,IAAA,kBAAU,EAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,CAAC,OAAI,CACH,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YACxC,OAAO,EAAE,CAAC;YACV,aAAa,EAAE,eAAe;YAC9B,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,MAAM;SACf,CAAC,CACF;MAAA,CAAC,gBAAa,CACZ,KAAK,CAAC,MAAM,CACZ,QAAQ,CAAC,CACP,IAAA,oBAAY,EAAC,CAAC,YAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAG,CACpE,CAAC,CACD,OAAO,CAAC,CAAC;YACP;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;gBAChB,CAAC;aACF;YACD;gBACE,EAAE,EAAE,OAAO;gBACX,IAAI,EAAE,IAAA,oBAAY,EAAC,CAAC,gBAAa,CAC/B;cAAA,CAAC,cAAM,CACL,KAAK,CAAC,CAAC;wBACL,MAAM,EAAE,CAAC;wBACT,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI;wBACrC,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI;qBACrC,CAAC,CACF,OAAO,CAAC,sDAAsD,EAClE;YAAA,EAAE,gBAAa,CAAC,CAAC;gBACjB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;gBAChB,CAAC;aACF;SACF,CAAC,EACJ;MAAA,CAAC,aAA0B,CACzB,iCAAiC,CAAC,CAAC,IAAI,CAAC,CACxC,yBAAyB,CAAC,CAAC,SAAS,CAAC,CACrC,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,CAAC;SACZ,CAAC,CACF,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAC1B,8BAA8B,CAAC,CAAC,KAAK,CAAC,CACtC,4BAA4B,CAAC,CAAC,KAAK,CAAC,CAGpC;;QAAA,CAAC,SAAM,CAAC,KAAK,CAAC,CAAC;YACb,aAAa,EAAE,KAAK;YACpB,OAAO,EAAE,EAAE;SACZ,CAAC,CAEA;;UAAA,CAAC,cAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CACF,KAAK,CAAC,CAAC;YACL,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;SAClC,CAAC,CACF,aAAa,CAAC,CAAC;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;YAC3B,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;SAC3B,CAAC,EAEJ;UAAA,CAAC,SAAM,CACL;YAAA,CAAC,cAAM,CACL,KAAK,CAAC,CAAC;YACL,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAClC,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;SAClC,CAAC,CACF,QAAQ,CAAC,IAAI,CACb,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CACF,aAAa,CAAC,CAAC;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;YAC3B,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;SAC3B,CAAC,CACF,OAAO,CAAC,kEAAkE,EAC5E;YAAA,CAAC,WAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,WAAQ,CAC7B;UAAA,EAAE,SAAM,CAER;;UAAA,CAAC,cAAM,CACL,KAAK,CAAC,CAAC;YACL,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;YACjC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;SAC5B,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CACF,QAAQ,CAAC,IAAI,EACjB;QAAA,EAAE,SAAM,CACR;QAAA,CAAC,SAAM,CAAC,KAAK,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CACjD,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;SACxC,CAAC,CACF,oBAAoB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAE7C;UAAA,CAAC,OAAI,CACH;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE;YACzC,8BAAe,CAAC,aAAa,CAAC,8BAAe,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACrE,QAAQ,CAAC,EAAE,CAAC,CAAA;QACd,CAAC,CAAC,EACF;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,EACpD;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,EAC3C;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EACrD;UAAA,EAAE,OAAI,CAER;;QAAA,EAAE,SAAM,CACR;QAAA,CAAC,SAAM,CACL,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,CAAC;YACV,WAAW,EAAE,GAAG;YAChB,WAAW,EAAE,SAAS;SACvB,CAAC,CACF,QAAQ,CAAC,CAAC,GAAG,CAAC,CACd,KAAK,CAAC,uJAAuJ,CAC7J,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,OAAO,CAC1C;UAAA,CAAC,OAAI,CACH;YAAA,CAAC,QAAK,CAAC,MAAM,EAAE,QAAK,CACpB;YAAA,CAAC,WAAQ,CAAC,uCAAuC,EAAE,WAAQ,CAC3D;YAAA,CAAC,WAAQ,CAAC,MAAM,EAAE,WAAQ,CAC1B;YAAA,CAAC,UAAO,CAAC,YAAY,EAAE,UAAO,CAChC;UAAA,EAAE,OAAI,CACR;QAAA,EAAE,SAAM,CACR;QAAA,CAAC,SAAM,CAAC,KAAK,CAAC,QAAQ,CAEpB;;UAAA,CAAC,OAAI,CACH;YAAA,CAAC,gBAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;SAC7B,CAAC,CACF,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EACjC;YAAA,CAAC,yBAAsB,CACrB,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAC/B,WAAW,CAAC,QAAQ,CACpB,WAAW,CAAC,MAAM,EACpB;YAAA,CAAC,yBAAsB,CACrB,SAAS,CAAC,SAAS,CACnB,IAAI,CAAC,CAAC,OAAO,CAAC,CACd,KAAK,CAAC,CAAC,EACN,CAAC,CACF,cAAc,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CACrC,WAAW,CAAC,iBAAiB,CAC7B,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EACjC;YAAA,CAAC,yBAAsB,CACrB,KAAK,CAAC,CAAC,EACN,CAAC,CACF,WAAW,CAAC,cAAc,CAC1B,SAAS,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mFAAmF,CAAC,CAC/H,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EACnC;UAAA,EAAE,OAAI,CACR;QAAA,EAAE,SAAM,CAER;;QAAA,CAAC,SAAM,CACL,SAAS,CAAC,CAAC;YACT,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,KAAK;SACb,CAAC,CACF,KAAK,CAAC,SAAS,CACf,aAAa,CAAC,CAAC,KAAK,CAAC,CACrB;UAAA,CAAC,OAAI,CAAC,KAAK,CAAC,CAAC,EACZ,CAAC,CACA;YAAA,CAAC,OAAK,AAAD,CACH;cAAA,CAAC,aAAU,CACT,IAAI,CAAC,CAAC,OAAO,CAAC,CACd,KAAK,CAAC,CAAC,EACN,CAAC,CAAC,WAAW,EAAE,aAAU,CAE5B;;cAAA,CAAC,aAAU,CAAC,KAAK,CAAC,CAAC,EAClB,CAAC,CAAC,WAAW,EAAE,aAAU,CAC5B;YAAA,EAAE,OAAI,CACN;YAAA,CAAC,kBAAe,CACd,IAAI,CAAC,eAAe,CACpB,IAAI,CAAC,CAAC,OAAO,CAAC,CAChB;YAAA,EAAE,kBAAe,CAEjB;;YAAA,CAAC,SAAM,CACL;cAAA,CAAC,gBAAa,CAEZ,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACb,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA;QACtB,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,UAAU,EAEjB;;cAAA,CAAC,aAAU,CACT,aAAa,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CACxC,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;YAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;SAC1C,CAAC,CAAC,eAAe,EAAE,aAAU,CAElC;;YAAA,EAAE,SAAM,CAER;;YAAA,CAAC,SAAM,CAAC,KAAK,CAAC,eAAe,CAC3B;cAAA,CAAC,OAAI,CAAC,KAAK,CAAC,CAAC;YACX,cAAc,EAAE,QAAQ;SACzB,CAAC,CACA;gBAAA,CAAC,gBAAa,CACZ,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,MAAM;SACd,CAAC,CACF,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACb,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA;QACtB,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,eAAe,EACtB;gBAAA,CAAC,gBAAa,CACZ,WAAW,CAAC,aAAa,CACzB,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,MAAM;SACd,CAAC,CACF,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;YACb,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA;QACtB,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,gBAAgB,EACzB;cAAA,EAAE,OAAI,CACR;YAAA,EAAE,SAAM,CAEV;;UAAA,EAAE,OAAI,CACR;QAAA,EAAE,SAAM,CAIR;;;;QAAA,CAAC,aAAU,CACT,aAAa,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CACxC,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;YAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;SAC1C,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAA;QAClC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,aAAU,CAGnD;;;QAAA,CAAC,aAAU,CACT,aAAa,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CACxC,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;YAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;SAC1C,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE;YACZ,qBAAqB,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CAAC,UAAU,EAAE,aAAU,CAG7B;;;MAAA,EAAE,aAA0B,CAC5B;MAAA,CAAC,eAAY,CACX,KAAK,CAAC,CAAC;YACL,mBAAmB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC1C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;SAC5C,CAAC,CACF,QAAQ,CAAC,CAAC,sBAAsB,CAAC,CACjC,UAAU,CAAC,CAAC,mBAAmB,CAAC,CAChC,OAAO,CAAC,CAAC;YACP;gBACE,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,MAAM;aACb;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,MAAM;aACb;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,QAAQ;aACf;YACD;gBACE,EAAE,EAAE,SAAS;gBACb,KAAK,EAAE,SAAS;gBAChB,IAAI,EAAE,IAAA,oBAAY,EAAC,CAAC,gBAAa,CAC/B;cAAA,CAAC,cAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;wBACZ,sBAAsB,CAAC,SAAS,CAAC,CAAA;oBACnC,CAAC,CAAC,CACF,KAAK,CAAC,CAAC;wBACL,WAAW,EAAE,mBAAmB,IAAI,SAAS,CAAC,CAAC;4BAC7C,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;wBAC5C,MAAM,EAAE,CAAC;wBACT,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;wBAC9B,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;qBAC9B,CAAC;gBACF,kBAAkB;gBAClB,OAAO,CAAC,sDAAsD,EAElE;YAAA,EAAE,gBAAa,CAAC,CAAC;aAClB;SACF,CAAC,CACF,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACjB,kBAAkB,CAAC,CAAC,CAAC,CAAA;YACrB,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAA;QACnC,CAAC,CAAC,EAEJ;;MAAA,CAAC,mBAAW,CACV,KAAK,CAAC,OAAO,CACb,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE;YAC3C,qBAAqB,CAAC,KAAK,CAAC,CAAA;QAC9B,CAAC,CAAC,CACF;QAAA,CAAC,WAAQ,CAAC,gQAAgQ,EAAE,WAAQ,CAEpR;;QAAA,CAAC,WAAQ,CAAC,gQAAgQ,EAAE,WAAQ,CACpR;QAAA,CAAC,SAAM,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CACzC,KAAK,CAAC,CAAC;YACL,OAAO,EAAE,CAAC;YACV,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;SACxC,CAAC,CACF,oBAAoB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAE7C;UAAA,CAAC,OAAI,CACH;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE;YACzC,8BAAe,CAAC,aAAa,CAAC,8BAAe,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YACrE,QAAQ,CAAC,EAAE,CAAC,CAAA;QACd,CAAC,CAAC,EACF;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,EACtD;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAC/C;YAAA,CAAC,sBAAY,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EACjD;UAAA,EAAE,OAAI,CAER;;QAAA,EAAE,SAAM,CACV;MAAA,EAAE,mBAAW,CACf;IAAA,EAAE,OAAI,CAAC,CACR,CAAC;AACJ,CAAC;AA7WD,gCA6WC"}
1
+ {"version":3,"file":"demo.js","sourceRoot":"","sources":["../src/demo.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-boxes",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "A react native library for rapid development of UI using boxes",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/demo.tsx CHANGED
@@ -3,7 +3,7 @@ import * as React from 'react'
3
3
  import { LayoutAnimation, SafeAreaView } from 'react-native';
4
4
  import { BottomNavBar, ButtonView, Caption, Center, CompositeTextInputView, Expand, HBox, LoadingButton, PressableView, RightIconButton, SimpleToolbar, Subtitle, TextInputView, TextView, Theme, ThemeContext, Title, VBox } from '.';
5
5
  import FontAwesome from '@expo/vector-icons/FontAwesome';
6
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
6
+ import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
7
7
  import { AlertMessage } from './Message';
8
8
  import { BottomSheet } from './Modal';
9
9
  import { Avatar, Icon } from './Image';
@@ -22,7 +22,6 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
22
22
  const btnIcon = (<FontAwesome name='google'
23
23
  size={theme.dimens.icon.md}
24
24
  color={theme.colors.invert.text} />)
25
- const insets = useSafeAreaInsets();
26
25
  const [loading, setLoading] = useState(false)
27
26
  const [alert, setBs] = useState(`In this version, the icon used is always 'chevron-right' even when expanded.`)
28
27
  const [bottomsheetVisible, setbottomsheetVisible] = useState(false)
@@ -44,340 +43,342 @@ export function DemoScreen({ navigation }: DemoScreenProps) {
44
43
  const [, forceUpdate] = useReducer(x => x + 1, 0);
45
44
 
46
45
  return (
47
- <VBox
48
- style={{
49
- backgroundColor: theme.colors.background,
50
- padding: 0,
51
- paddingBottom: bottomBarHeight,
52
- margin: 0,
53
- height: '100%'
54
- }} >
55
- <SimpleToolbar
56
- title="Demo"
57
- homeIcon={
58
- ReactWrapper(<Icon color={theme.colors.invert.text} name="plus" />)
59
- }
60
- options={[
61
- {
62
- id: 'test',
63
- icon: 'gear',
64
- onClick: (id) => {
65
- }
66
- },
67
- {
68
- id: 'test2',
69
- icon: ReactWrapper(<PressableView>
70
- <Avatar
71
- style={{
72
- margin: 0,
73
- height: theme.dimens?.icon?.md * 1.25,
74
- width: theme.dimens?.icon?.md * 1.25,
75
- }}
76
- iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4" />
77
- </PressableView>),
78
- onClick: (id) => {
79
- }
80
- }
81
- ]} />
82
- <KeyboardAvoidingScrollView
83
- automaticallyAdjustKeyboardInsets={true}
84
- keyboardShouldPersistTaps={'handled'}
46
+ <SafeAreaProvider>
47
+ <VBox
85
48
  style={{
86
- flexGrow: 1,
87
- }}
88
- nestedScrollEnabled={true}
89
- showsHorizontalScrollIndicator={false}
90
- showsVerticalScrollIndicator={false}
91
- >
49
+ backgroundColor: theme.colors.background,
50
+ padding: 0,
51
+ paddingBottom: bottomBarHeight,
52
+ margin: 0,
53
+ height: '100%'
54
+ }} >
55
+ <SimpleToolbar
56
+ title="Demo"
57
+ homeIcon={
58
+ ReactWrapper(<Icon color={theme.colors.invert.text} name="plus" />)
59
+ }
60
+ options={[
61
+ {
62
+ id: 'test',
63
+ icon: 'gear',
64
+ onClick: (id) => {
65
+ }
66
+ },
67
+ {
68
+ id: 'test2',
69
+ icon: ReactWrapper(<PressableView>
70
+ <Avatar
71
+ style={{
72
+ margin: 0,
73
+ height: theme.dimens?.icon?.md * 1.25,
74
+ width: theme.dimens?.icon?.md * 1.25,
75
+ }}
76
+ iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4" />
77
+ </PressableView>),
78
+ onClick: (id) => {
79
+ }
80
+ }
81
+ ]} />
82
+ <KeyboardAvoidingScrollView
83
+ automaticallyAdjustKeyboardInsets={true}
84
+ keyboardShouldPersistTaps={'handled'}
85
+ style={{
86
+ flexGrow: 1,
87
+ }}
88
+ nestedScrollEnabled={true}
89
+ showsHorizontalScrollIndicator={false}
90
+ showsVerticalScrollIndicator={false}
91
+ >
92
92
 
93
- <Center style={{
94
- flexDirection: 'row',
95
- padding: 20
96
- }}>
93
+ <Center style={{
94
+ flexDirection: 'row',
95
+ padding: 20
96
+ }}>
97
97
 
98
- <Avatar
99
- onPress={() => {
100
- setbottomsheetVisible(true)
101
- }}
102
- style={{
103
- borderColor: theme.colors.success,
104
- }}
105
- iconNameProps={{
106
- name: 'user',
107
- color: theme.colors.success,
108
- size: theme.dimens.icon.lg
109
- }}
110
- />
111
- <Center>
112
98
  <Avatar
113
- style={{
114
- borderWidth: theme.dimens.space.sm,
115
- width: 100,
116
- height: 100,
117
- borderColor: theme.colors.success
118
- }}
119
- iconText='SN'
120
99
  onPress={() => {
121
100
  setbottomsheetVisible(true)
122
101
  }}
102
+ style={{
103
+ borderColor: theme.colors.success,
104
+ }}
123
105
  iconNameProps={{
124
106
  name: 'user',
125
107
  color: theme.colors.success,
126
108
  size: theme.dimens.icon.lg
127
109
  }}
128
- iconUrl='https://cdn.truelancer.com/user-picture/307510-5c1f11bad82e9.jpg' />
129
- <Subtitle>{mText}</Subtitle>
130
- </Center>
131
-
132
- <Avatar
133
- style={{
134
- borderColor: theme.colors.success,
135
- color: theme.colors.success
136
- }}
137
- onPress={() => {
138
- setbottomsheetVisible(true)
139
- }}
140
- iconText='SN' />
141
- </Center>
142
- <Expand title='Message Alert' initialExpand={false}
143
- style={{
144
- backgroundColor: theme.colors.forground
145
- }}
146
- titleBackgroundColor={theme.colors.forground}
147
- >
148
- <VBox>
149
- <AlertMessage text={alert} onDismiss={() => {
150
- LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
151
- setAlert('')
152
- }} />
153
- <AlertMessage text='Critial Message' type='critical' />
154
- <AlertMessage text='Success' type='success' />
155
- <AlertMessage text='Warning Message' type='warning' />
156
- </VBox>
157
-
158
- </Expand>
159
- <Expand
160
- style={{
161
- padding: 0,
162
- borderWidth: 0.1,
163
- borderColor: '#DCDCDC'
164
- }}
165
- duration={200}
166
- 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.'
167
- initialExpand={false} iconPosition='right'>
168
- <VBox>
169
- <Title>Text A</Title>
170
- <Subtitle>Text A Text A Text AText A Text AText A</Subtitle>
171
- <TextView>Text A</TextView>
172
- <Caption>Text Caption</Caption>
173
- </VBox>
174
- </Expand>
175
- <Expand title='Inputs'>
110
+ />
111
+ <Center>
112
+ <Avatar
113
+ style={{
114
+ borderWidth: theme.dimens.space.sm,
115
+ width: 100,
116
+ height: 100,
117
+ borderColor: theme.colors.success
118
+ }}
119
+ iconText='SN'
120
+ onPress={() => {
121
+ setbottomsheetVisible(true)
122
+ }}
123
+ iconNameProps={{
124
+ name: 'user',
125
+ color: theme.colors.success,
126
+ size: theme.dimens.icon.lg
127
+ }}
128
+ iconUrl='https://cdn.truelancer.com/user-picture/307510-5c1f11bad82e9.jpg' />
129
+ <Subtitle>{mText}</Subtitle>
130
+ </Center>
176
131
 
177
- <VBox>
178
- <TextInputView
179
- style={{
180
- fontFamily: theme.fonts.Bold
181
- }}
182
- initialText={mText}
183
- value={mText}
184
- onChangeText={t => setMText(t)} />
185
- <CompositeTextInputView
186
- onChangeText={t => setMText(t)}
187
- placeholder='A test'
188
- initialText='Test' />
189
- <CompositeTextInputView
190
- inputMode='decimal'
191
- icon={"close"}
132
+ <Avatar
192
133
  style={{
134
+ borderColor: theme.colors.success,
135
+ color: theme.colors.success
193
136
  }}
194
- alertTextColor={theme.colors.warning}
195
- placeholder='Enter your name'
196
- initialText='Test'
197
- value={mText}
198
- onChangeText={t => setMText(t)} />
199
- <CompositeTextInputView
200
- style={{
137
+ onPress={() => {
138
+ setbottomsheetVisible(true)
201
139
  }}
202
- placeholder='Enter number'
203
- alertText={mText?.indexOf("@") > -1 ? '' : 'Please enter @ or else I am gonna come down at your place and mess you up buddy !'}
204
- initialText='Test'
205
- value={mText}
206
- onChangeText={t => setMText(t)} />
207
- </VBox>
208
- </Expand>
209
-
210
- <Expand
211
- iconStyle={{
212
- name: 'chevron-right',
213
- color: 'red'
214
- }}
215
- title='Buttons'
216
- initialExpand={false}>
217
- <VBox style={{
218
- }}>
219
- <VBox >
220
- <ButtonView
221
- icon={btnIcon}
222
- style={{
223
- }}>Button Icon</ButtonView>
224
-
225
- <ButtonView style={{
226
- }}>Button Text</ButtonView>
140
+ iconText='SN' />
141
+ </Center>
142
+ <Expand title='Message Alert' initialExpand={false}
143
+ style={{
144
+ backgroundColor: theme.colors.forground
145
+ }}
146
+ titleBackgroundColor={theme.colors.forground}
147
+ >
148
+ <VBox>
149
+ <AlertMessage text={alert} onDismiss={() => {
150
+ LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
151
+ setAlert('')
152
+ }} />
153
+ <AlertMessage text='Critial Message' type='critical' />
154
+ <AlertMessage text='Success' type='success' />
155
+ <AlertMessage text='Warning Message' type='warning' />
227
156
  </VBox>
228
- <RightIconButton
229
- text='Click Me Icon'
230
- icon={btnIcon}>
231
- </RightIconButton>
232
157
 
233
- <Center>
234
- <LoadingButton
158
+ </Expand>
159
+ <Expand
160
+ style={{
161
+ padding: 0,
162
+ borderWidth: 0.1,
163
+ borderColor: '#DCDCDC'
164
+ }}
165
+ duration={200}
166
+ 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.'
167
+ initialExpand={false} iconPosition='right'>
168
+ <VBox>
169
+ <Title>Text A</Title>
170
+ <Subtitle>Text A Text A Text AText A Text AText A</Subtitle>
171
+ <TextView>Text A</TextView>
172
+ <Caption>Text Caption</Caption>
173
+ </VBox>
174
+ </Expand>
175
+ <Expand title='Inputs'>
235
176
 
236
- onPress={(e) => {
237
- setLoading(!loading)
177
+ <VBox>
178
+ <TextInputView
179
+ style={{
180
+ fontFamily: theme.fonts.Bold
238
181
  }}
239
- loading={loading}
240
- text='Click Me' />
241
-
242
- <ButtonView
243
- underlayColor={theme.colors.transparent}
182
+ initialText={mText}
183
+ value={mText}
184
+ onChangeText={t => setMText(t)} />
185
+ <CompositeTextInputView
186
+ onChangeText={t => setMText(t)}
187
+ placeholder='A test'
188
+ initialText='Test' />
189
+ <CompositeTextInputView
190
+ inputMode='decimal'
191
+ icon={"close"}
192
+ style={{
193
+ }}
194
+ alertTextColor={theme.colors.warning}
195
+ placeholder='Enter your name'
196
+ initialText='Test'
197
+ value={mText}
198
+ onChangeText={t => setMText(t)} />
199
+ <CompositeTextInputView
244
200
  style={{
245
- color: theme.colors.accent,
246
- backgroundColor: theme.colors.transparent,
247
- }}>Tertiary button</ButtonView>
201
+ }}
202
+ placeholder='Enter number'
203
+ alertText={mText?.indexOf("@") > -1 ? '' : 'Please enter @ or else I am gonna come down at your place and mess you up buddy !'}
204
+ initialText='Test'
205
+ value={mText}
206
+ onChangeText={t => setMText(t)} />
207
+ </VBox>
208
+ </Expand>
248
209
 
249
- </Center>
210
+ <Expand
211
+ iconStyle={{
212
+ name: 'chevron-right',
213
+ color: 'red'
214
+ }}
215
+ title='Buttons'
216
+ initialExpand={false}>
217
+ <VBox style={{
218
+ }}>
219
+ <VBox >
220
+ <ButtonView
221
+ icon={btnIcon}
222
+ style={{
223
+ }}>Button Icon</ButtonView>
224
+
225
+ <ButtonView style={{
226
+ }}>Button Text</ButtonView>
227
+ </VBox>
228
+ <RightIconButton
229
+ text='Click Me Icon'
230
+ icon={btnIcon}>
231
+ </RightIconButton>
250
232
 
251
- <Expand title='Nested expand'>
252
- <HBox style={{
253
- justifyContent: 'center',
254
- }}>
233
+ <Center>
255
234
  <LoadingButton
256
- style={{
257
- width: 'auto'
258
- }}
235
+
259
236
  onPress={(e) => {
260
237
  setLoading(!loading)
261
238
  }}
262
239
  loading={loading}
263
- text='Click Me left' />
264
- <LoadingButton
265
- loaderStyle='transparent'
240
+ text='Click Me' />
241
+
242
+ <ButtonView
243
+ underlayColor={theme.colors.transparent}
266
244
  style={{
267
- width: 'auto'
268
- }}
269
- onPress={(e) => {
270
- setLoading(!loading)
271
- }}
272
- loading={loading}
273
- text='Click Me right' />
274
- </HBox>
275
- </Expand>
245
+ color: theme.colors.accent,
246
+ backgroundColor: theme.colors.transparent,
247
+ }}>Tertiary button</ButtonView>
276
248
 
277
- </VBox>
278
- </Expand>
249
+ </Center>
279
250
 
251
+ <Expand title='Nested expand'>
252
+ <HBox style={{
253
+ justifyContent: 'center',
254
+ }}>
255
+ <LoadingButton
256
+ style={{
257
+ width: 'auto'
258
+ }}
259
+ onPress={(e) => {
260
+ setLoading(!loading)
261
+ }}
262
+ loading={loading}
263
+ text='Click Me left' />
264
+ <LoadingButton
265
+ loaderStyle='transparent'
266
+ style={{
267
+ width: 'auto'
268
+ }}
269
+ onPress={(e) => {
270
+ setLoading(!loading)
271
+ }}
272
+ loading={loading}
273
+ text='Click Me right' />
274
+ </HBox>
275
+ </Expand>
280
276
 
277
+ </VBox>
278
+ </Expand>
281
279
 
282
- <ButtonView
283
- underlayColor={theme.colors.transparent}
284
- style={{
285
- color: theme.colors.accent,
286
- backgroundColor: theme.colors.transparent,
287
- }}
288
- onPress={() => {
289
- setSelectedTheme(!selectedTheme)
290
- }}>{selectedTheme ? 'Light' : 'Dark'}</ButtonView>
291
280
 
292
281
 
293
- <ButtonView
294
- underlayColor={theme.colors.transparent}
295
- style={{
296
- color: theme.colors.accent,
297
- backgroundColor: theme.colors.transparent,
298
- }}
299
- onPress={() => {
300
- setbottomsheetVisible(true)
301
- }}>Show Sheet</ButtonView>
282
+ <ButtonView
283
+ underlayColor={theme.colors.transparent}
284
+ style={{
285
+ color: theme.colors.accent,
286
+ backgroundColor: theme.colors.transparent,
287
+ }}
288
+ onPress={() => {
289
+ setSelectedTheme(!selectedTheme)
290
+ }}>{selectedTheme ? 'Light' : 'Dark'}</ButtonView>
302
291
 
303
292
 
304
- </KeyboardAvoidingScrollView>
305
- <BottomNavBar
306
- style={{
307
- borderTopLeftRadius: theme.dimens.space.md,
308
- borderTopRightRadius: theme.dimens.space.md,
309
- }}
310
- onSelect={setSelectedBottomBarId}
311
- selectedId={selectedBottombarId}
312
- options={[
313
- {
314
- id: 'home',
315
- title: 'Home',
316
- icon: 'home'
317
- },
318
- {
319
- id: 'create',
320
- title: 'Create',
321
- icon: 'plus'
322
- },
323
- {
324
- id: 'search',
325
- title: 'Search',
326
- icon: 'search'
327
- },
328
- {
329
- id: 'profile',
330
- title: 'Profile',
331
- icon: ReactWrapper(<PressableView>
332
- <Avatar
333
- onPress={() => {
334
- setSelectedBottomBarId('profile')
335
- }}
336
- style={{
337
- borderColor: selectedBottombarId == 'profile' ?
338
- theme.colors.accent : theme.colors.caption,
339
- margin: 0,
340
- height: theme.dimens?.icon?.md,
341
- width: theme.dimens?.icon?.md,
342
- }}
343
- // iconName='user'
344
- iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"
345
- />
346
- </PressableView>)
347
- }
348
- ]}
349
- onDimens={(w, h) => {
350
- setBottombarHeight(h)
351
- console.log("bottomBarHeight", h)
352
- }} />
293
+ <ButtonView
294
+ underlayColor={theme.colors.transparent}
295
+ style={{
296
+ color: theme.colors.accent,
297
+ backgroundColor: theme.colors.transparent,
298
+ }}
299
+ onPress={() => {
300
+ setbottomsheetVisible(true)
301
+ }}>Show Sheet</ButtonView>
353
302
 
354
- <BottomSheet
355
- title="About"
356
- visible={bottomsheetVisible} onDismiss={() => {
357
- setbottomsheetVisible(false)
358
- }} >
359
- <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>
360
303
 
361
- <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>
362
- <Expand title='Types' initialExpand={false}
304
+ </KeyboardAvoidingScrollView>
305
+ <BottomNavBar
363
306
  style={{
364
- padding: 0,
365
- backgroundColor: theme.colors.forground
307
+ borderTopLeftRadius: theme.dimens.space.md,
308
+ borderTopRightRadius: theme.dimens.space.md,
366
309
  }}
367
- titleBackgroundColor={theme.colors.forground}
368
- >
369
- <VBox>
370
- <AlertMessage text={alert} onDismiss={() => {
371
- LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
372
- setAlert('')
373
- }} />
374
- <AlertMessage text='Tyrannosaurus rex' type='critical' />
375
- <AlertMessage text='Spinosaurus' type='success' />
376
- <AlertMessage text='Ankylosaurs' type='warning' />
377
- </VBox>
310
+ onSelect={setSelectedBottomBarId}
311
+ selectedId={selectedBottombarId}
312
+ options={[
313
+ {
314
+ id: 'home',
315
+ title: 'Home',
316
+ icon: 'home'
317
+ },
318
+ {
319
+ id: 'create',
320
+ title: 'Create',
321
+ icon: 'plus'
322
+ },
323
+ {
324
+ id: 'search',
325
+ title: 'Search',
326
+ icon: 'search'
327
+ },
328
+ {
329
+ id: 'profile',
330
+ title: 'Profile',
331
+ icon: ReactWrapper(<PressableView>
332
+ <Avatar
333
+ onPress={() => {
334
+ setSelectedBottomBarId('profile')
335
+ }}
336
+ style={{
337
+ borderColor: selectedBottombarId == 'profile' ?
338
+ theme.colors.accent : theme.colors.caption,
339
+ margin: 0,
340
+ height: theme.dimens?.icon?.md,
341
+ width: theme.dimens?.icon?.md,
342
+ }}
343
+ // iconName='user'
344
+ iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"
345
+ />
346
+ </PressableView>)
347
+ }
348
+ ]}
349
+ onDimens={(w, h) => {
350
+ setBottombarHeight(h)
351
+ console.log("bottomBarHeight", h)
352
+ }} />
353
+
354
+ <BottomSheet
355
+ title="About"
356
+ visible={bottomsheetVisible} onDismiss={() => {
357
+ setbottomsheetVisible(false)
358
+ }} >
359
+ <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>
360
+
361
+ <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>
362
+ <Expand title='Types' initialExpand={false}
363
+ style={{
364
+ padding: 0,
365
+ backgroundColor: theme.colors.forground
366
+ }}
367
+ titleBackgroundColor={theme.colors.forground}
368
+ >
369
+ <VBox>
370
+ <AlertMessage text={alert} onDismiss={() => {
371
+ LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
372
+ setAlert('')
373
+ }} />
374
+ <AlertMessage text='Tyrannosaurus rex' type='critical' />
375
+ <AlertMessage text='Spinosaurus' type='success' />
376
+ <AlertMessage text='Ankylosaurs' type='warning' />
377
+ </VBox>
378
378
 
379
- </Expand>
380
- </BottomSheet>
381
- </VBox>
379
+ </Expand>
380
+ </BottomSheet>
381
+ </VBox>
382
+ </SafeAreaProvider>
382
383
  );
383
384
  }