unicorn-demo-app 6.11.3 → 6.12.0

package/package.json

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

package/src/screens/MenuStructure.js

@@ -135,7 +135,7 @@ export const navigationData = {
         tags: 'KeyboardTracking',
         screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
       },
-      {title: 'KeyboardAccessoryView', tags: 'KeyboardInput', screen: 'unicorn.nativeComponents.KeyboardInputViewScreen'}
+      {title: 'KeyboardAccessoryView', tags: 'KeyboardInput', screen: 'unicorn.nativeComponents.KeyboardAccessoryViewScreen'}
     ]
   },
   AnimationsAndGestures: {

package/src/screens/PlaygroundScreen.tsx

@@ -8,7 +8,7 @@ export default class PlaygroundScreen extends Component {
     return (
       <View bg-grey80 flex padding-20>
         <View marginT-20>
-          <TextField placeholder="Placeholder" />
+          <TextField migrate placeholder="Placeholder" />
         </View>
         <Card height={100} center padding-20>
           <Text text50>Playground Screen</Text>

package/src/screens/SettingsScreen.js

@@ -73,11 +73,13 @@ class SettingsScreen extends Component {
             testID={'uilib.defaultScreenPicker'}
             placeholder="Pick default screen..."
             showSearch
-            value={defaultScreen}
+            value={defaultScreen?.value}
+            label={'Default Screen'}
             onChange={this.setDefaultScreen}
+            migrateTextField
           >
             {_.map(filteredScreens, screen => (
-              <Picker.Item key={screen.value} value={screen}/>
+              <Picker.Item key={screen.value} value={screen.value} label={screen.label}/>
             ))}
           </Picker>
 

package/src/screens/componentScreens/ButtonsScreen.tsx

@@ -11,8 +11,8 @@ import {
 } from 'react-native-ui-lib'; //eslint-disable-line
 
 const ButtonSpace = 20;
-const plusIcon = require('../../assets/icons/plus.png');
-const settingsIcon = require('../../assets/icons/settings.png');
+const plusIcon = Assets.getAssetByPath('icons.demo.plus');
+const settingsIcon = Assets.getAssetByPath('icons.demo.settings');
 const labelButton = {label: 'Animated'};
 const iconButton = {round: true, iconStyle: {tintColor: Colors.white}};
 

package/src/screens/componentScreens/GridViewScreen.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import {View, Text, Image, Colors, Constants, Avatar, GridView, Shadows, Card} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Constants, Avatar, GridView, Card} from 'react-native-ui-lib';
 import React, {Component} from 'react';
 import {Alert, ScrollView} from 'react-native';
 import conversations from '../../data/conversations';
@@ -153,7 +153,7 @@ class GridViewScreen extends Component {
             items={contacts}
             // viewWidth={300}
             numColumns={6}
-            lastItemOverlayColor={Colors.primary}
+            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
             lastItemLabel={7}
           />
 
@@ -163,7 +163,7 @@ class GridViewScreen extends Component {
           <GridView
             items={products}
             numColumns={4}
-            lastItemOverlayColor={Colors.primary}
+            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
             lastItemLabel={42}
             keepItemSize
           />

package/src/screens/componentScreens/{PickerScreen.js → PickerScreen.tsx}

@@ -11,14 +11,17 @@ import {
   Avatar,
   Assets,
   PanningProvider,
-  Typography
+  Typography,
+  PickerProps,
+  DialogProps
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
-import tagIcon from '../../assets/icons/tags.png';
-import dropdown from '../../assets/icons/chevronDown.png';
 import {longOptions} from './PickerScreenLongOptions';
 
-const contacts = _.map(contactsData, c => ({...c, value: c.name, label: c.name}));
+const tagIcon = require('../../assets/icons/tags.png');
+const dropdown = require('../../assets/icons/chevronDown.png');
+
+const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
 
 const options = [
   {label: 'JavaScript', value: 'js'},
@@ -35,26 +38,19 @@ const filters = [
 ];
 
 export default class PickerScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      itemsCount: 1,
-      // language: {value: 'java', label: 'Java'},
-      language: undefined,
-      language2: options[2].value, // for migrated picker example
-      languages: [],
-      nativePickerValue: 'java',
-      customModalValues: [],
-      filter: filters[0],
-      contact: contacts[0],
-      tags: [{label: 'Amit'}, {label: 'Ethan'}],
-      tags2: ['Tags', 'Input'],
-      tags3: ['Non', 'Removable', 'Tags']
-    };
-  }
+  state = {
+    itemsCount: 1,
+    // language: {value: 'java', label: 'Java'},
+    language: undefined,
+    language2: options[2].value, // for migrated picker example
+    languages: [],
+    nativePickerValue: 'java',
+    customModalValues: [],
+    filter: filters[0],
+    contact: 0
+  };
 
-  dialogHeader = props => {
+  dialogHeader: DialogProps['renderPannableHeader'] = props => {
     const {title} = props;
     return (
       <Text margin-15 text60>
@@ -63,7 +59,7 @@ export default class PickerScreen extends Component {
     );
   };
 
-  renderDialog = modalProps => {
+  renderDialog: PickerProps['renderCustomModal'] = modalProps => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
@@ -99,19 +95,18 @@ export default class PickerScreen extends Component {
             enableModalBlur={false}
             onChange={item => this.setState({language: item})}
             topBarProps={{title: 'Languages'}}
-            style={{color: Colors.red20}}
+            // style={{color: Colors.red20}}
             showSearch
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             // onSearchChange={value => console.warn('value', value)}
           >
             {_.map(longOptions, option => (
-              <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
             ))}
           </Picker>
 
           <Picker
-            marginT-20
             placeholder="Favorite Languages (up to 3)"
             value={this.state.languages}
             onChange={items => this.setState({languages: items})}
@@ -120,7 +115,7 @@ export default class PickerScreen extends Component {
             rightIconSource={dropdown}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
             ))}
           </Picker>
 
@@ -131,7 +126,7 @@ export default class PickerScreen extends Component {
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             rightIconSource={dropdown}
-            containerStyle={{marginTop: 20}}
+            // containerStyle={{marginTop: 20}}
             // renderPicker={() => {
             //   return (
             //     <View>
@@ -154,7 +149,6 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            marginT-20
             title="Custom modal"
             placeholder="Pick multiple Languages"
             value={this.state.customModalValues}
@@ -174,13 +168,13 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Text marginT-20 marginB-10 text70 grey60>
+          <Text marginB-10 text70>
             Custom Picker:
           </Text>
           <Picker
             value={this.state.filter}
             onChange={filter => this.setState({filter})}
-            renderPicker={({label}) => {
+            renderPicker={(_value?: any, label?: string) => {
               return (
                 <View row>
                   <Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
@@ -192,24 +186,40 @@ export default class PickerScreen extends Component {
             }}
           >
             {_.map(filters, filter => (
-              <Picker.Item key={filter.value} value={filter}/>
+              <Picker.Item key={filter.value} value={filter} label={''}/>
             ))}
           </Picker>
 
-          <Text marginT-20 marginB-10 text70 grey60>
+          <Text text60 marginT-s5>
+            Migrated Pickers
+          </Text>
+
+          <Text marginT-20 marginB-10 text70>
             Custom Picker Items:
           </Text>
           <Picker
+            migrate
             value={this.state.contact}
-            onChange={contact => this.setState({contact})}
-            getItemValue={contact => contact.name}
-            renderPicker={contact => {
+            onChange={contact => {
+              this.setState({contact});
+            }}
+            // getItemValue={contact => contact?.value}
+            renderPicker={(contactValue?: number) => {
+              const contact = contacts[contactValue!] ?? undefined;
               return (
                 <View row>
-                  <Avatar size={30} source={{uri: contact.thumbnail}}/>
-                  <Text text70 marginL-10>
-                    {contact.name}
-                  </Text>
+                  {contact ? (
+                    <>
+                      <Avatar size={30} source={{uri: contact?.thumbnail}}/>
+                      <Text text70 marginL-10>
+                        {contact?.name}
+                      </Text>
+                    </>
+                  ) : (
+                    <Text text70 grey30>
+                      Pick a contact
+                    </Text>
+                  )}
                 </View>
               );
             }}
@@ -217,37 +227,37 @@ export default class PickerScreen extends Component {
             {_.map(contacts, contact => (
               <Picker.Item
                 key={contact.name}
-                value={contact}
-                renderItem={(item, props) => (
-                  <View
-                    style={{
-                      height: 56,
-                      borderBottomWidth: 1,
-                      borderColor: Colors.grey80
-                    }}
-                    paddingH-15
-                    row
-                    centerV
-                    spread
-                  >
-                    <View row centerV>
-                      <Avatar size={35} source={{uri: item.thumbnail}}/>
-                      <Text marginL-10 text70 grey10>
-                        {item.name}
-                      </Text>
+                value={contact.value}
+                label={contact.label}
+                renderItem={(contactValue, props) => {
+                  const contact = contacts[contactValue as number];
+                  return (
+                    <View
+                      style={{
+                        height: 56,
+                        borderBottomWidth: 1,
+                        borderColor: Colors.grey80
+                      }}
+                      paddingH-15
+                      row
+                      centerV
+                      spread
+                    >
+                      <View row centerV>
+                        <Avatar size={35} source={{uri: contact?.thumbnail}}/>
+                        <Text marginL-10 text70 grey10>
+                          {contact?.name}
+                        </Text>
+                      </View>
+                      {props.isSelected && <Icon source={Assets.icons.check}/>}
                     </View>
-                    {props.isSelected && <Icon source={Assets.icons.check}/>}
-                  </View>
-                )}
-                getItemLabel={item => item.name}
+                  );
+                }}
+                getItemLabel={contactValue => contacts[contactValue as number]?.name}
               />
             ))}
           </Picker>
 
-          <Text text60 marginT-s5 marginB-s2>
-            Migrated Picker
-          </Text>
-
           <Picker
             migrate
             migrateTextField
@@ -259,6 +269,7 @@ export default class PickerScreen extends Component {
             showSearch
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
+            marginT-s4
             // mode={Picker.modes.MULTI}
             // useNativePicker
           >

package/src/screens/componentScreens/{PickerScreenLongOptions.js → PickerScreenLongOptions.ts}

@@ -3,13 +3,13 @@ export const longOptions = [
   {label: 'ABAP2', value: 'ABAP2'},
   {label: 'ABAP3', value: 'ABAP3'},
   {label: 'ABAP4', value: 'ABAP4'},
-  {label: 'ABAP5', value: 'ABAP5'},
+  {label: 'ABAP5', value: 'ABAP5', disabled: true},
   {label: 'ActionScript1', value: 'ActionScript1'},
   {label: 'ActionScript2', value: 'ActionScript2'},
   {label: 'ActionScript3', value: 'ActionScript3'},
   {label: 'ActionScript4', value: 'ActionScript4'},
   {label: 'ActionScript5', value: 'ActionScript5'},
-  {label: 'Ada1', value: 'Ada1'},
+  {label: 'Ada1', value: 'Ada1', disabled: true},
   {label: 'Ada2', value: 'Ada2'},
   {label: 'Ada3', value: 'Ada3'},
   {label: 'Ada4', value: 'Ada4'},

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

@@ -150,7 +150,7 @@ class TabControllerScreen extends Component<{}, State> {
   render() {
     const {key, initialIndex, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
     return (
-      <View flex bg-grey70>
+      <View flex bg-$backgroundDefault>
         <TabController
           key={key}
           asCarousel={asCarousel}

package/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -30,14 +30,14 @@ export default class TextFieldScreen extends Component {
   renderTrailingAccessory() {
     const {searching} = this.state;
     if (searching) {
-      return <ActivityIndicator color={Colors.grey10}/>;
+      return <ActivityIndicator color={Colors.$iconDefault}/>;
     } else {
       return (
         <Button
           iconSource={Assets.icons.demo.search}
           link
           marginL-s2
-          grey10
+          $iconDefault
           onPress={() => {
             this.setState({searching: true});
             setTimeout(() => {
@@ -68,8 +68,8 @@ export default class TextFieldScreen extends Component {
               placeholder="Floating placeholder"
               floatingPlaceholder
               floatingPlaceholderColor={{
-                focus: Colors.grey10,
-                default: Colors.grey30
+                focus: Colors.$textDefault,
+                default: Colors.$textNeutral
               }}
               // floatingPlaceholderStyle={Typography.text60}
               // style={Typography.text60}
@@ -114,7 +114,7 @@ export default class TextFieldScreen extends Component {
             placeholder="Enter weight"
             text70
             trailingAccessory={
-              <Text text70 grey30>
+              <Text text70 $textNeutral>
                 Kg.
               </Text>
             }
@@ -191,7 +191,12 @@ export default class TextFieldScreen extends Component {
 
           <TextField
             label="Email"
-            labelColor={{default: Colors.grey10, focus: Colors.blue20, error: Colors.red30, disabled: Colors.grey40}}
+            labelColor={{
+              default: Colors.$textDefault,
+              focus: Colors.$textGeneral,
+              error: Colors.$textDangerLight,
+              disabled: Colors.$textDisabled
+            }}
             placeholder="Enter valid email"
             validationMessage="Email is invalid"
             validate={'email'}
@@ -215,7 +220,9 @@ export default class TextFieldScreen extends Component {
             label="Label"
             placeholder="Enter text..."
             preset={preset}
-            dynamicFieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
+            dynamicFieldStyle={(_state, {preset}) =>
+              preset === 'withUnderline' ? styles.withUnderline : styles.withFrame
+            }
             editable={!shouldDisable}
           />
 
@@ -233,7 +240,7 @@ export default class TextFieldScreen extends Component {
                 {Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}
               </Text>
             }
-            charCounterStyle={{color: Colors.blue30}}
+            charCounterStyle={{color: Colors.$textGeneral}}
             maxLength={20}
             fieldStyle={styles.withFrame}
           />
@@ -257,8 +264,12 @@ export default class TextFieldScreen extends Component {
             validate={'number'}
             validationMessage="Invalid price"
             // @ts-expect-error
-            formatter={(value) => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
-            leadingAccessory={<Text marginR-s1 grey30>$</Text>}
+            formatter={value => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
+            leadingAccessory={
+              <Text marginR-s1 $textNeutral>
+                $
+              </Text>
+            }
             fieldStyle={styles.withUnderline}
           />
         </View>
@@ -272,12 +283,12 @@ const styles = StyleSheet.create({
   container: {},
   withUnderline: {
     borderBottomWidth: 1,
-    borderColor: Colors.grey40,
+    borderColor: Colors.$outlineDisabledHeavy,
     paddingBottom: 4
   },
   withFrame: {
     borderWidth: 1,
-    borderColor: Colors.grey40,
+    borderColor: Colors.$outlineDisabledHeavy,
     padding: 4,
     borderRadius: 2
   }

package/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js

@@ -1,21 +1,19 @@
+import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {
+  Constants,
+  Colors,
+  Spacings,
   Keyboard,
-  Text,
   View,
+  Text,
   TextField,
-  Image,
   Button,
-  Colors,
-  Switch,
-  Constants,
-  Spacings
+  Switch
 } from 'react-native-ui-lib';
-import _ from 'lodash';
 
 const KeyboardTrackingView = Keyboard.KeyboardTrackingView;
-
 const messages = [
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   'integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor',
@@ -68,6 +66,7 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={trackInteractive ? 'interactive' : 'none'}
+          showsVerticalScrollIndicator={false}
         >
           <Text h1 grey10 marginB-s1>
             Keyboard Tracking View
@@ -88,23 +87,18 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
         <KeyboardTrackingView
           style={styles.trackingToolbarContainer}
           trackInteractive={trackInteractive}
+          useSafeArea
         >
           <View bg-white row spread centerV paddingH-s5 paddingV-s3>
             <TextField
-              containerStyle={{
-                flex: 1,
-                backgroundColor: Colors.grey60,
-                paddingVertical: Spacings.s2,
-                paddingHorizontal: Spacings.s4,
-                borderRadius: 8
-              }}
-              hideUnderline
+              migrate
+              containerStyle={styles.textField}
+              preset={null}
               placeholder={'Message'}
               floatingPlaceholder={false}
-              floatOnFocus
               enableErrors={false}
             />
-            <Button label="Send" link marginL-s4 />
+            <Button label="Send" link marginL-s4/>
           </View>
         </KeyboardTrackingView>
       </View>
@@ -116,15 +110,18 @@ const styles = StyleSheet.create({
   scrollContainer: {
     paddingHorizontal: Spacings.s5
   },
-  image: {
-    height: 250,
-    marginBottom: Spacings.s3
-  },
   trackingToolbarContainer: {
     position: Constants.isIOS ? 'absolute' : 'relative',
     bottom: 0,
     width: '100%',
     borderWidth: 1,
     borderColor: Colors.grey60
+  },
+  textField: {
+    flex: 1,
+    backgroundColor: Colors.grey60,
+    paddingVertical: Spacings.s2,
+    paddingHorizontal: Spacings.s4,
+    borderRadius: 8
   }
 });

package/src/screens/nativeComponentScreens/index.js

@@ -3,6 +3,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.nativeComponents.SafeAreaSpacerViewScreen', () => require('./SafeAreaSpacerViewScreen').default);
   registrar('unicorn.nativeComponents.WheelPickerViewScreen', () => require('./WheelPickerViewScreen').default);
   registrar('unicorn.nativeComponents.KeyboardTrackingViewScreen', () => require('./KeyboardTrackingViewScreen').default);
-  registrar('unicorn.nativeComponents.KeyboardInputViewScreen', () => require('./keyboardInput/KeyboardInputViewScreen').default);
+  registrar('unicorn.nativeComponents.KeyboardAccessoryViewScreen', () => require('./keyboardAccessory/KeyboardAccessoryViewScreen').default);
 }
-

package/src/screens/nativeComponentScreens/{keyboardInput/KeyboardInputViewScreen.js → keyboardAccessory/KeyboardAccessoryViewScreen.js}

@@ -1,18 +1,18 @@
+import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {ScrollView, StyleSheet, TextInput} from 'react-native';
+import {ScrollView, StyleSheet} from 'react-native';
 import {
-  Keyboard,
-  Text,
-  View,
+  Constants,
+  Assets,
   Colors,
   Spacings,
-  Constants,
-  Typography,
+  Keyboard,
+  View,
+  Text,
+  TextField,
   Button,
-  Switch,
-  Assets
+  Switch
 } from 'react-native-ui-lib';
-import _ from 'lodash';
 import './demoKeyboards';
 
 const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
@@ -20,7 +20,7 @@ const KeyboardUtils = Keyboard.KeyboardUtils;
 const KeyboardRegistry = Keyboard.KeyboardRegistry;
 const TrackInteractive = true;
 
-const keyboards = [
+const demoKeyboards = [
   {
     id: 'unicorn.ImagesKeyboard',
     icon: Assets.icons.demo.image
@@ -31,7 +31,7 @@ const keyboards = [
   }
 ];
 
-export default class KeyboardInputViewScreen extends PureComponent {
+export default class KeyboardAccessoryViewScreen extends PureComponent {
   state = {
     customKeyboard: {
       component: undefined,
@@ -105,21 +105,24 @@ export default class KeyboardInputViewScreen extends PureComponent {
   renderKeyboardAccessoryViewContent = () => {
     return (
       <View style={styles.keyboardContainer} paddingV-s4>
-        <View row paddingH-s4>
-          <TextInput
-            style={styles.textInput}
+        <View bg-white row spread centerV paddingH-s5 paddingV-s3>
+          <TextField
+            migrate
             ref={r => {
               this.textInputRef = r;
             }}
+            containerStyle={styles.textField}
+            preset={null}
             placeholder={'Message'}
-            underlineColorAndroid="transparent"
+            floatingPlaceholder={false}
+            enableErrors={false}
             onFocus={this.resetKeyboardView}
           />
           <Button link grey10 iconSource={Assets.icons.demo.close} onPress={KeyboardUtils.dismiss} marginL-s2/>
         </View>
         <View row paddingH-s4 marginT-s2 spread>
           <View row>
-            {keyboards.map(keyboard => (
+            {demoKeyboards.map(keyboard => (
               <Button
                 key={keyboard.id}
                 grey10
@@ -170,8 +173,9 @@ export default class KeyboardInputViewScreen extends PureComponent {
   };
 
   render() {
-    const {message} = this.props;
+    const {message/* , isModal */} = this.props;
     const {receivedKeyboardData, customKeyboard, useSafeArea} = this.state;
+
     return (
       <View flex bg-grey80>
         <Text h2 marginT-page marginL-page>
@@ -180,6 +184,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={TrackInteractive ? 'interactive' : 'none'}
+          showsVerticalScrollIndicator={false}
         >
           <Text text40 grey10 marginV-20 center>
             {message}
@@ -201,6 +206,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
           revealKeyboardInteractive
           onRequestShowKeyboard={this.onRequestShowKeyboard}
           useSafeArea={useSafeArea}
+          // usesBottomTabs={!isModal}
         />
       </View>
     );
@@ -213,13 +219,11 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center'
   },
-  textInput: {
+  textField: {
     flex: 1,
-    paddingVertical: Spacings.s2,
-    paddingHorizontal: Spacings.s3,
-    ...Typography.text70,
-    lineHeight: undefined,
     backgroundColor: Colors.grey60,
+    paddingVertical: Spacings.s2,
+    paddingHorizontal: Spacings.s4,
     borderRadius: 8
   },
   button: {

package/src/screens/nativeComponentScreens/{keyboardInput → keyboardAccessory}/demoKeyboards.js

@@ -1,9 +1,9 @@
+import _ from 'lodash';
 import React from 'react';
 import {ScrollView} from 'react-native';
 import {Keyboard, View, Text, Image, Spacings} from 'react-native-ui-lib';
-import _ from 'lodash';
-const KeyboardRegistry = Keyboard.KeyboardRegistry;
 
+const KeyboardRegistry = Keyboard.KeyboardRegistry;
 const images = [
   'https://images.pexels.com/photos/1148521/pexels-photo-1148521.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
   'https://images.pexels.com/photos/1528975/pexels-photo-1528975.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
@@ -43,11 +43,5 @@ function CustomKeyboard() {
   );
 }
 
-KeyboardRegistry.registerKeyboard(
-  'unicorn.ImagesKeyboard',
-  () => ImagesKeyboard
-);
-KeyboardRegistry.registerKeyboard(
-  'unicorn.CustomKeyboard',
-  () => CustomKeyboard
-);
+KeyboardRegistry.registerKeyboard('unicorn.ImagesKeyboard', () => ImagesKeyboard);
+KeyboardRegistry.registerKeyboard('unicorn.CustomKeyboard', () => CustomKeyboard);