unicorn-demo-app 7.21.2 → 7.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "7.21.2",
+  "version": "7.22.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/assets/Assets.ts

@@ -0,0 +1,25 @@
+import {Assets} from 'react-native-ui-lib';
+Assets.loadAssetsGroup('icons.demo', {
+  chevronDown: require('./icons/chevronDown.png'),
+  chevronRight: require('./icons/chevronRight.png'),
+  add: require('./icons/add.png'),
+  camera: require('./icons/cameraSelected.png'),
+  close: require('./icons/close.png'),
+  dashboard: require('./icons/dashboard.png'),
+  drag: require('./icons/drag.png'),
+  image: require('./icons/image.png'),
+  plus: require('./icons/plus.png'),
+  refresh: require('./icons/refresh.png'),
+  search: require('./icons/search.png'),
+  settings: require('./icons/settings.png'),
+  share: require('./icons/share.png')
+});
+
+Assets.loadAssetsGroup('images.demo', {
+  brokenImage: require('./images/placeholderMissingImage.png')
+});
+
+Assets.loadAssetsGroup('svgs.demo', {
+  logo: require('./svgs/headerLogo.svg').default
+});
+export default Assets as typeof Assets;

package/src/configurations.js

@@ -1,30 +1,7 @@
-import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-lib'; // eslint-disable-line
+import {Colors, Typography, Spacings, TextField} from 'react-native-ui-lib'; // eslint-disable-line
 
 export const loadDemoConfigurations = () => {
-  Assets.loadAssetsGroup('icons.demo', {
-    chevronDown: require('./assets/icons/chevronDown.png'),
-    chevronRight: require('./assets/icons/chevronRight.png'),
-    add: require('./assets/icons/add.png'),
-    camera: require('./assets/icons/cameraSelected.png'),
-    close: require('./assets/icons/close.png'),
-    dashboard: require('./assets/icons/dashboard.png'),
-    drag: require('./assets/icons/drag.png'),
-    image: require('./assets/icons/image.png'),
-    plus: require('./assets/icons/plus.png'),
-    refresh: require('./assets/icons/refresh.png'),
-    search: require('./assets/icons/search.png'),
-    settings: require('./assets/icons/settings.png'),
-    share: require('./assets/icons/share.png')
-  });
-
-  Assets.loadAssetsGroup('images.demo', {
-    brokenImage: require('./assets/images/placeholderMissingImage.png')
-  });
-
-  Assets.loadAssetsGroup('svgs.demo', {
-    logo: require('./assets/svgs/headerLogo.svg').default
-  });
-
+  require('./assets/Assets');
   Typography.loadTypographies({
     h1: {...Typography.text40},
     h2: {...Typography.text50},
@@ -56,5 +33,5 @@ export const loadDemoConfigurations = () => {
   });
 
   /* Components */
-  Incubator.TextField.defaultProps = {...Incubator.TextField.defaultProps, preset: 'default'};
+  TextField.defaultProps = {...TextField.defaultProps, preset: TextField.presets.UNDERLINE};
 };

package/src/screens/componentScreens/DrawerScreen.tsx

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
-import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
+import {Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import conversations from '../../data/conversations';
+import Assets from '../../assets/Assets';
 
 import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
 

package/src/screens/componentScreens/HintsScreen.tsx

@@ -1,8 +1,9 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert, ViewStyle} from 'react-native';
-import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
+import {Colors, View, Text, Hint, Button, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
+import Assets from '../../assets/Assets';
 
 const settingsIcon = require('../../assets/icons/settings.png');
 const reactions = ['❤️', '😮', '😔', '😂', '😡'];

package/src/screens/componentScreens/ImageScreen.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Icon, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
+import {View, Text, Icon, Image, Colors, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
+import Assets from '../../assets/Assets';
 
 const IMAGE_URL =
   'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
@@ -69,7 +70,8 @@ class ImageScreen extends Component<{}, State> {
     showErrorImage: false,
     showSvg: false,
     svgType: SvgType.File,
-    sizeType: SizeType.None
+    sizeType: SizeType.None,
+    borderRadius: 0
   };
 
   getSvgSource() {
@@ -112,7 +114,7 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderImage() {
-    const {cover, overlayType, overlayIntensity, margin, showErrorImage} = this.state;
+    const {cover, overlayType, overlayIntensity, margin, showErrorImage, borderRadius} = this.state;
     return (
       <Image
         key={`${overlayType}-${overlayIntensity}`}
@@ -126,6 +128,7 @@ class ImageScreen extends Component<{}, State> {
         height={!cover ? DEFAULT_SIZE : undefined}
         customOverlayContent={this.renderOverlayContent()}
         {...{[`margin-${margin}`]: true}}
+        borderRadius={borderRadius}
       />
     );
   }
@@ -156,6 +159,7 @@ class ImageScreen extends Component<{}, State> {
           {renderRadioGroup.call(this, 'Overlay Intensity', 'overlayIntensity', Image.overlayIntensityType)}
         </View>
         {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
+        {renderSliderOption.call(this, 'Border Radius', 'borderRadius', {step: 5, min: 0, max: 100})}
       </>
     );
   }

package/src/screens/componentScreens/ModalScreen.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import {Colors, Carousel, PageControl, Modal, View, Text, Assets} from 'react-native-ui-lib'; // eslint-disable-line
+import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+import Assets from '../../assets/Assets';
 
 const BUTTONS_HIT_SLOP = {right: 5, left: 5, top: 10, bottom: 10};
 interface ModalScreenProps {

package/src/screens/componentScreens/SortableGridListScreen.tsx

@@ -100,6 +100,7 @@ class SortableGridListScreen extends Component {
         </View>
         <View flex>
           <SortableGridList
+            flexMigration
             data={items}
             renderItem={this.renderItem}
             // numColumns={2}

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -8,10 +8,10 @@ import {
   TouchableOpacity,
   Text,
   Icon,
-  Assets,
   Colors,
   Button
 } from 'react-native-ui-lib';
+import Assets from '../../assets/Assets';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 interface Item extends SortableListItemProps {
@@ -112,6 +112,7 @@ const SortableListScreen = () => {
       </View>
       <View flex useSafeArea>
         <SortableList
+          flexMigration
           data={items}
           renderItem={renderItem}
           keyExtractor={keyExtractor}

package/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -2,7 +2,6 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {
-  Assets,
   TabController,
   Colors,
   View,
@@ -12,6 +11,7 @@ import {
   TabControllerImperativeMethods
 } from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+import Assets from '../../../assets/Assets';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';

package/src/screens/componentScreens/TextFieldScreen.tsx

@@ -1,22 +1,23 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
-import {Assets, Colors, Spacings, View, Text, Button, Keyboard, TextField, TextFieldRef} from 'react-native-ui-lib';
+import {Colors, Spacings, View, Text, Button, Keyboard, TextField, TextFieldRef, SegmentedControl} from 'react-native-ui-lib';
+import Assets from '../../assets/Assets';
 const {KeyboardAwareInsetsView} = Keyboard;
-
 const priceFormatter = Intl.NumberFormat('en-US');
 
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextFieldRef>();
   input2 = React.createRef<TextFieldRef>();
+  input3 = React.createRef<TextFieldRef>();
   inputWithValidation = React.createRef<TextFieldRef>();
+  
   state = {
-    errorPosition: TextField.validationMessagePositions.TOP,
-    shouldDisable: false,
+    errorPosition: TextField.validationMessagePositions.BOTTOM,
+    isDisabled: false,
     isReadonly: false,
     value: 'Initial Value',
-    searching: false,
-    preset: 'withUnderline',
+    isSearching: false,
+    customPreset: 'underline',
     price: ''
   };
 
@@ -28,9 +29,62 @@ export default class TextFieldScreen extends Component {
     this.input2.current?.clear();
   };
 
+  renderDefaultExample() {
+    return (
+      <>
+        <Text h3 marginB-s1>
+          Default
+        </Text>
+
+        <TextField ref={this.input} placeholder="Enter full name" preset={null}/>
+      </>
+    );
+  }
+
+  renderPresetExample() {
+    return (
+      <>
+        <Text h3 marginB-s1 marginT-s4>
+          Underline Preset
+        </Text>
+
+        <TextField ref={this.input} placeholder="Enter full name"/>
+      </>
+    );
+  }
+
+  renderPlaceholdersExample() {
+    return (
+      <>
+        <Text h3 marginB-s1 marginT-s4>
+          Static vs Floating Placeholder
+        </Text>
+        
+        <View row bottom>
+          <TextField
+            placeholder="Floating placeholder"
+            floatingPlaceholder
+            floatingPlaceholderColor={{
+              focus: Colors.$textDefault,
+              default: Colors.$textNeutral
+            }}
+            // floatingPlaceholderStyle={Typography.text60}
+            // style={Typography.text60}
+            containerStyle={{flex: 1}}
+          />
+          <TextField
+            placeholder="Placeholder"
+            containerStyle={{flex: 1, marginLeft: Spacings.s6}}
+          />
+        </View>
+      </>
+    );
+  }
+
   renderTrailingAccessory() {
-    const {searching} = this.state;
-    if (searching) {
+    const {isSearching} = this.state;
+    
+    if (isSearching) {
       return <ActivityIndicator color={Colors.$iconDefault}/>;
     } else {
       return (
@@ -40,9 +94,9 @@ export default class TextFieldScreen extends Component {
           marginL-s2
           $iconDefault
           onPress={() => {
-            this.setState({searching: true});
+            this.setState({isSearching: true});
             setTimeout(() => {
-              this.setState({searching: false});
+              this.setState({isSearching: false});
             }, 1200);
           }}
         />
@@ -50,253 +104,293 @@ export default class TextFieldScreen extends Component {
     }
   }
 
-  render() {
-    const {errorPosition, shouldDisable, isReadonly, price, preset} = this.state;
+  renderAccessoriesExample() {
     return (
-      <ScrollView keyboardShouldPersistTaps="always">
-        <View flex padding-page>
-          <Text h1>TextField</Text>
-          <Text h3 marginV-s4>
-            Default
-          </Text>
-          <TextField ref={this.input} label="Name" placeholder="Enter full name"/>
-          <Text h3 marginV-s4>
-            Static vs Floating Placeholder
-          </Text>
-          <View row bottom>
-            <TextField
-              placeholder="Floating placeholder"
-              floatingPlaceholder
-              floatingPlaceholderColor={{
-                focus: Colors.$textDefault,
-                default: Colors.$textNeutral
-              }}
-              // floatingPlaceholderStyle={Typography.text60}
-              // style={Typography.text60}
-              containerStyle={{flex: 1}}
-              fieldStyle={styles.withUnderline}
-            />
-            <TextField
-              placeholder="Placeholder"
-              containerStyle={{flex: 1, marginLeft: Spacings.s4}}
-              fieldStyle={styles.withUnderline}
-            />
-          </View>
-          <Text h3 marginV-s4>
-            Accessories
-          </Text>
-
-          <TextField
-            ref={this.input2}
-            placeholder="Enter search term"
-            text70
-            trailingAccessory={this.renderTrailingAccessory()}
-            fieldStyle={styles.withUnderline}
-            marginB-s4
-          />
-
-          <TextField
-            ref={this.input2}
-            placeholder="Enter URL"
-            floatingPlaceholder
-            text70
-            leadingAccessory={
-              <Text text70 blue30 marginR-2>
-                Https://
-              </Text>
-            }
-            fieldStyle={styles.withUnderline}
-            marginB-s4
-          />
-
-          <TextField
-            ref={this.input2}
-            placeholder="Enter weight"
-            text70
-            trailingAccessory={
-              <Text text70 $textNeutral>
-                Kg.
-              </Text>
-            }
-            fieldStyle={styles.withUnderline}
-            keyboardType="numeric"
-          />
+      <>
+        <Text h3 marginB-s3 marginT-s4>
+          Accessories
+        </Text>
+        
+        <Text marginB-s2 $textPrimary>Trailing Accessory:</Text>
+        <TextField
+          ref={this.input2}
+          placeholder="Enter search term"
+          trailingAccessory={this.renderTrailingAccessory()}
+        />
+        <TextField
+          ref={this.input2}
+          placeholder="Enter weight"
+          keyboardType="numeric"
+          trailingAccessory={
+            <Text text70 $textNeutral>
+              Kg.
+            </Text>
+          }
+        />
 
-          <View row marginV-s4 spread>
-            <Text h3>
-              Validation
+        <Text marginB-s2 $textPrimary>Leading Accessory:</Text>
+        <TextField
+          ref={this.input2}
+          placeholder="Enter URL"
+          leadingAccessory={
+            <Text text70 blue30 marginR-2>
+              Https://
             </Text>
+          }
+        />
+      </>
+    );
+  }
 
-            <Button
-              size={Button.sizes.xSmall}
-              label={`Error Position: ${_.upperCase(errorPosition)}`}
-              onPress={() =>
-                this.setState({
-                  errorPosition:
-                    errorPosition === TextField.validationMessagePositions.TOP
-                      ? TextField.validationMessagePositions.BOTTOM
-                      : TextField.validationMessagePositions.TOP
-                })
-              }
-            />
-          </View>
+  onChangeIndexValidation = (index: number) => {
+    this.setState({errorPosition: index === 0 ? 
+      TextField.validationMessagePositions.BOTTOM : TextField.validationMessagePositions.TOP});
+  };
 
+  renderValidationExample() {
+    const {errorPosition} = this.state;
+    
+    return (
+      <>
+        <View>
+          <Text h3 marginB-s1>Validation</Text>
+          <View row centerV>
+            <Text marginR-s4 $textPrimary>Error Position:</Text>
+            <SegmentedControl segments={[{label: 'Bottom'}, {label: 'Top'}]} onChangeIndex={this.onChangeIndexValidation}/>
+          </View>
+        </View>
+        
+        <TextField
+          value={this.state.value}
+          onChangeText={value => this.setState({value})}
+          label="Email"
+          placeholder="Enter email"
+          enableErrors
+          validationMessage={['Email is required', 'Email is invalid']}
+          // validationMessageStyle={Typography.text90R}
+          validationMessagePosition={errorPosition}
+          validate={['required', 'email']}
+          validateOnChange
+          onChangeValidity={(isValid: boolean) => console.warn('validity changed:', isValid, Date.now())}
+          // validateOnStart
+          // validateOnBlur
+        />
+        <View row spread center marginV-s3>
           <TextField
-            value={this.state.value}
-            onChangeText={value => this.setState({value})}
-            label="Email"
-            placeholder="Enter email"
-            enableErrors
-            validationMessage={['Email is required', 'Email is invalid']}
-            // validationMessageStyle={Typography.text90R}
+            ref={this.inputWithValidation}
+            label="Name"
+            placeholder="Enter full name"
+            validate="required"
+            validationMessage="This field is required"
+            containerStyle={{flexGrow: 1}}
             validationMessagePosition={errorPosition}
-            validate={['required', 'email']}
-            validateOnChange
-            onChangeValidity={(isValid: boolean) => console.warn('validity changed:', isValid, Date.now())}
-            // validateOnStart
-            // validateOnBlur
-            fieldStyle={styles.withUnderline}
-            marginB-s4
           />
+          <Button
+            outline
+            marginL-s5
+            label="Validate"
+            size={Button.sizes.xSmall}
+            onPress={() => {
+              this.inputWithValidation.current?.validate?.();
+            }}
+          />
+        </View>
+      </>
+    );
+  }
 
-          <View row top marginT-s4>
-            <TextField
-              ref={this.inputWithValidation}
-              placeholder="Enter full name"
-              validate="required"
-              validationMessage="This field is required"
-              containerStyle={{flexGrow: 1}}
-              fieldStyle={styles.withUnderline}
-            />
-            <Button
-              marginL-s5
-              label="Validate"
-              size={Button.sizes.xSmall}
-              onPress={() => {
-                this.inputWithValidation.current?.validate?.();
-              }}
-            />
-          </View>
+  onChangeIndexColors = (index: number) => {
+    let readonly, disabled = false;
+    
+    switch (index) {
+      case 0:
+        // this.input3.current?.clear();
+        break;
+      case 1:
+        this.input3.current?.focus();
+        break;
+      case 2:
+        this.input3.current?.clear();
+        this.input3.current?.validate();
+        break;
+      case 3:
+        readonly = true;
+        break;
+      case 4:
+        disabled = true;
+        break;
+      default:
+        break;
+    }
+    this.setState({isReadonly: readonly, isDisabled: disabled});
+  };
 
-          <View row centerV spread>
-            <Text h3 marginV-s4>
+  renderStateColorsExample() {
+    const {isReadonly, isDisabled} = this.state;
+
+    return (
+      <>
+        <View row centerV spread>
+          <View marginB-s3>
+            <Text h3 marginB-s2>
               Colors By State
             </Text>
-            <View row>
-              <Button
-                label={isReadonly ? 'Enable' : 'Readonly'}
-                onPress={() => this.setState({isReadonly: !isReadonly})}
-                size={Button.sizes.xSmall}
-                marginR-s4
-              />
-              <Button
-                label={shouldDisable ? 'Enable' : 'Disable'}
-                onPress={() => this.setState({shouldDisable: !shouldDisable})}
-                size={Button.sizes.xSmall}
-              />
-            </View>
+            <SegmentedControl segments={[{label: 'Empty'}, {label: 'Focus'}, {label: 'Error'}, {label: 'Readonly'}, {label: 'Disable'}]} onChangeIndex={this.onChangeIndexColors}/>
           </View>
+        </View>
 
-          <TextField
-            label="Email"
-            labelColor={{
-              default: Colors.$textDefault,
-              focus: Colors.$textGeneral,
-              error: Colors.$textDangerLight,
-              disabled: Colors.$textDisabled,
-              readonly: Colors.$textNeutral
-            }}
-            placeholder="Enter valid email"
-            validationMessage="Email is invalid"
-            validate={'email'}
-            validateOnChange
-            fieldStyle={styles.withFrame}
-            editable={!shouldDisable}
-            readonly={isReadonly}
-          />
+        <TextField
+          ref={this.input3}
+          label="Email"
+          labelColor={{
+            default: Colors.purple10,
+            focus: Colors.green40,
+            error: Colors.orange40,
+            readonly: Colors.purple50,
+            disabled: Colors.cyan60
+          }}
+          placeholder="Enter valid email"
+          validationMessage="Email is invalid"
+          validate={'email'}
+          validateOnChange
+          readonly={isReadonly}
+          editable={!isDisabled}
+        />
+      </>
+    );
+  }
 
-          <View row spread centerV>
-            <Text h3 marginV-s4>
-              Custom Field Style
-            </Text>
-            <Button
-              label={preset}
-              onPress={() => this.setState({preset: preset === 'withUnderline' ? 'withFrame' : 'withUnderline'})}
-              size={Button.sizes.xSmall}
-            />
-          </View>
+  onChangeIndexFieldStyle = (index: number) => {
+    this.setState({customPreset: index === 0 ? 'underline' : 'outline'});
+  };
 
-          <TextField
-            label="Label"
-            placeholder="Enter text..."
-            preset={preset}
-            dynamicFieldStyle={(_state, {preset}) =>
-              preset === 'withUnderline' ? styles.withUnderline : styles.withFrame
-            }
-            editable={!shouldDisable}
-            readonly={isReadonly}
-          />
+  renderDynamicFieldExample() {
+    const {customPreset, isDisabled, isReadonly} = this.state;
 
-          <Text h3 marginV-s4>
-            Char Counter
+    return (
+      <>
+        <View>
+          <Text h3 marginB-s3>
+            Dynamic Field Style
           </Text>
+          <View row centerV>
+            <Text marginR-s4 $textPrimary>Custom style:</Text>
+            <SegmentedControl segments={[{label: 'Underline'}, {label: 'Outline'}]} onChangeIndex={this.onChangeIndexFieldStyle}/>
+          </View>
+        </View>
 
-          <TextField
-            label="Description"
-            placeholder="Enter text..."
-            multiline
-            showCharCounter
-            bottomAccessory={
-              <Text text100>
-                {Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}
-              </Text>
-            }
-            charCounterStyle={{color: Colors.$textGeneral}}
-            maxLength={20}
-            fieldStyle={styles.withFrame}
-          />
-          <Text h3 marginV-s4>
-            Hint
-          </Text>
-          <TextField
-            label="Password"
-            placeholder="Enter password"
-            hint="1-6 chars including numeric chars"
-            fieldStyle={styles.withUnderline}
-          />
-          <Text h3 marginV-s4>
-            Formatter
-          </Text>
-          <TextField
-            value={price}
-            onChangeText={value => this.setState({price: value})}
-            label="Price"
-            placeholder="Enter price"
-            validate={'number'}
-            validationMessage="Invalid price"
-            // @ts-expect-error
-            formatter={value => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
-            leadingAccessory={
-              <Text marginR-s1 $textNeutral>
-                $
-              </Text>
-            }
-            fieldStyle={styles.withUnderline}
-          />
+        <TextField
+          label="Label"
+          placeholder="Enter text..."
+          preset={customPreset}
+          dynamicFieldStyle={(_state, {preset}) =>
+            preset === 'underline' ? styles.underline : styles.outline
+          }
+          editable={!isDisabled}
+          readonly={isReadonly}
+        />
+      </>
+    );
+  }
 
-          <Text h3 marginV-s4>
-            Custom Alignments
-          </Text>
+  renderCherCounterExample() {
+    return (
+      <>
+        <Text h3 marginB-s3>
+          Char Counter
+        </Text>
+        
+        <TextField
+          label="Description"
+          placeholder="Enter text..."
+          multiline
+          showCharCounter
+          bottomAccessory={<Text text100>{Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}</Text>}
+          charCounterStyle={{color: Colors.$textGeneral}}
+          maxLength={20}
+        />
+      </>
+    );
+  }
 
-          <Text marginB-s1>Centered</Text>
-          <TextField label="PIN" placeholder="XXXX" centered/>
+  renderHintExample() {
+    return (
+      <>
+        <Text h3>
+          Hint
+        </Text>
 
-          <Text marginB-s1>Inline</Text>
-          <View row>
-            <TextField placeholder="hours"/>
-            <Text marginT-s1> : </Text>
-            <TextField placeholder="minutes"/>
-          </View>
+        <TextField
+          placeholder="Enter password"
+          floatingPlaceholder
+          floatOnFocus
+          hint="1-6 chars including numeric chars"
+        />
+      </>
+    );
+  }
+
+  renderFormatterExample() {
+    const {price} = this.state;
+
+    return (
+      <>
+        <Text h3 marginB-s3 marginT-s4>
+          Formatter
+        </Text>
+
+        <TextField
+          value={price}
+          onChangeText={value => this.setState({price: value})}
+          label="Price"
+          placeholder="Enter price"
+          validate={'number'}
+          validationMessage="Invalid price"
+          // @ts-expect-error
+          formatter={value => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
+          leadingAccessory={<Text marginR-s1 $textNeutral>$</Text>}
+        />
+      </>
+    );
+  }
+
+  renderCustomAlignmentExample() {
+    return (
+      <>
+        <Text h3 marginB-3>
+          Custom Alignments
+        </Text>
+
+        <Text marginB-s1 $textPrimary>Centered:</Text>
+        <TextField label="PIN" placeholder="XXXX" centered/>
+        
+        <Text marginB-s1 $textPrimary>Inline:</Text>
+        <View row>
+          <TextField placeholder="hours"/>
+          <Text marginT-s1 marginH-s1>:</Text>
+          <TextField placeholder="minutes"/>
+        </View>
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <ScrollView keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={false}>
+        <View flex padding-page>
+          <Text h1 marginB-s4>TextField</Text>
+
+          {this.renderDefaultExample()}
+          {this.renderPresetExample()}
+          {this.renderPlaceholdersExample()}
+          {this.renderValidationExample()}
+          {this.renderStateColorsExample()}
+          {this.renderHintExample()}
+          {this.renderCherCounterExample()}
+          {this.renderAccessoriesExample()}
+          {this.renderDynamicFieldExample()}
+          {this.renderFormatterExample()}
+          {this.renderCustomAlignmentExample()}
         </View>
         <KeyboardAwareInsetsView/>
       </ScrollView>
@@ -305,16 +399,15 @@ export default class TextFieldScreen extends Component {
 }
 
 const styles = StyleSheet.create({
-  container: {},
-  withUnderline: {
+  underline: {
     borderBottomWidth: 1,
-    borderColor: Colors.$outlineDisabledHeavy,
+    borderColor: Colors.cyan20,
     paddingBottom: 4
   },
-  withFrame: {
+  outline: {
     borderWidth: 1,
-    borderColor: Colors.$outlineDisabledHeavy,
+    borderColor: Colors.cyan20,
     padding: 4,
-    borderRadius: 2
+    borderRadius: 4
   }
 });

package/src/screens/componentScreens/TimelineScreen.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useRef, useState} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Assets, Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
-
+import {Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
+import Assets from '../../assets/Assets';
 const contents = [
   'CURRENT (default) state with dashed line.\nAligned to title',
   'SUCCESS state with label.',

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Assets, Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
+import {Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-
+import Assets from '../../assets/Assets';
 const {Toast} = Incubator;
 
 const TOAST_ACTIONS = {

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {GestureHandlerRootView, FlatList} from 'react-native-gesture-handler';
 import {
-  Assets,
   View,
   Text,
   Colors,
@@ -15,7 +14,7 @@ import {
   TouchableOpacity
 } from 'react-native-ui-lib';
 const {PanView} = Incubator;
-
+import Assets from '../../assets/Assets';
 interface Item {
   value: string;
   label: string;

package/src/screens/realExamples/Pinterest/index.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Assets, Colors, Spacings, View, Card, Text, Image, Button, Constants} from 'react-native-ui-lib';
+import {Colors, Spacings, View, Card, Text, Image, Button, Constants} from 'react-native-ui-lib';
 import _ from 'lodash';
+import Assets from '../../../assets/Assets';
 
 import './configurations';
 

package/src/screens/realExamples/ProductPage/index.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker, PickerValue} from 'react-native-ui-lib';
+import {View, Text, Icon, Colors, Image, Button, Carousel, Picker, PickerValue} from 'react-native-ui-lib';
 import _ from 'lodash';
+import Assets from '../../../assets/Assets';
 
 const colorOptions: {[key: string]: {name: string; color: string}} = {
   red: {name: 'Red', color: Colors.red30},