@developer_tribe/react-native-comnyx 0.7.6 → 0.9.0

package/src/components/CustomerForm.tsx

@@ -7,8 +7,6 @@ import {
   ScrollView,
   StatusBar,
   ActivityIndicator,
-  KeyboardAvoidingView,
-  Platform,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { createCustomer } from '../api';
@@ -124,234 +122,218 @@ export function CustomerForm({
         animated={false}
         translucent
       />
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        style={{ flex: 1 }}
+      <TouchableOpacity
+        style={[styles.container, { backgroundColor: themeColors.background }]}
+        onPress={Keyboard.dismiss}
+        activeOpacity={1}
       >
-        <TouchableOpacity
-          style={[
-            styles.container,
-            { backgroundColor: themeColors.background },
-          ]}
-          onPress={Keyboard.dismiss}
-          activeOpacity={1}
+        <ScrollView
+          contentContainerStyle={styles.scrollContainer}
+          keyboardShouldPersistTaps="handled"
         >
-          <ScrollView
-            contentContainerStyle={styles.scrollContainer}
-            keyboardShouldPersistTaps="handled"
+          <View
+            style={[
+              styles.container,
+              { backgroundColor: themeColors.background },
+            ]}
           >
+            <TouchableOpacity
+              activeOpacity={1}
+              style={[
+                styles.iconContainer,
+                { backgroundColor: themeColors.dark_background },
+              ]}
+              onPress={onBack}
+            >
+              <Image
+                source={closeIcon}
+                style={[
+                  styles.closeIcon,
+                  { tintColor: themeColors.light_text },
+                ]}
+              />
+            </TouchableOpacity>
             <View
               style={[
-                styles.container,
-                { backgroundColor: themeColors.background },
+                styles.headerContainer,
+                { backgroundColor: themeColors.dark_background },
               ]}
             >
-              <TouchableOpacity
-                activeOpacity={1}
+              <AppText
+                localization="customer.form.title"
+                style={[styles.headerText, { color: themeColors.gainsboro }]}
+              />
+              <AppText
+                localization="customer.form.instructions"
+                style={[styles.headerText, { color: themeColors.light_text }]}
+              />
+            </View>
+            <View style={styles.titleContainer}>
+              <AppText
                 style={[
-                  styles.iconContainer,
-                  { backgroundColor: themeColors.dark_background },
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
                 ]}
-                onPress={onBack}
               >
-                <Image
-                  source={closeIcon}
-                  style={[
-                    styles.closeIcon,
-                    { tintColor: themeColors.light_text },
-                  ]}
-                />
-              </TouchableOpacity>
-              <View
+                {localize('customer.form.name')}
+              </AppText>
+              <Controller
+                control={control}
+                rules={{
+                  required: {
+                    value: true,
+                    message: localize('customer.form.validation.name.required'),
+                  },
+                  maxLength: {
+                    value: 30,
+                    message: localize(
+                      'customer.form.validation.name.maxLength'
+                    ),
+                  },
+                }}
+                render={({ field: { onChange, value } }) => (
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.name')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                    />
+                    {errors.name && (
+                      <InfoButton
+                        title={'customer.form.failed.name'}
+                        description={'customer.form.failed.name.desc'}
+                      />
+                    )}
+                  </View>
+                )}
+                name="name"
+              />
+              <AppText
                 style={[
-                  styles.headerContainer,
-                  { backgroundColor: themeColors.dark_background },
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
                 ]}
               >
-                <AppText
-                  localization="customer.form.title"
-                  style={[styles.headerText, { color: themeColors.gainsboro }]}
-                />
-                <AppText
-                  localization="customer.form.instructions"
-                  style={[styles.headerText, { color: themeColors.light_text }]}
-                />
-              </View>
-              <View style={styles.titleContainer}>
-                <AppText
-                  style={[
-                    styles.title,
-                    {
-                      color: themeColors.slate,
-                    },
-                  ]}
-                >
-                  {localize('customer.form.name')}
-                </AppText>
-                <Controller
-                  control={control}
-                  rules={{
-                    required: {
-                      value: true,
-                      message: localize(
-                        'customer.form.validation.name.required'
-                      ),
-                    },
-                    maxLength: {
-                      value: 30,
-                      message: localize(
-                        'customer.form.validation.name.maxLength'
-                      ),
-                    },
-                  }}
-                  render={({ field: { onChange, value } }) => (
-                    <View
-                      style={[
-                        styles.inputContainer,
-                        { borderBottomColor: themeColors.ghost },
-                      ]}
-                    >
-                      <TextInput
-                        style={inputStyle}
-                        placeholder={localize('customer.form.placeholder.name')}
-                        placeholderTextColor={themeColors.gainsboro}
-                        value={value}
-                        onChangeText={onChange}
-                      />
-                      {errors.name && (
-                        <InfoButton
-                          title={'customer.form.failed.name'}
-                          description={'customer.form.failed.name.desc'}
-                        />
-                      )}
-                    </View>
-                  )}
-                  name="name"
-                />
-                <AppText
-                  style={[
-                    styles.title,
-                    {
-                      color: themeColors.slate,
-                    },
-                  ]}
-                >
-                  Email
-                </AppText>
-                <Controller
-                  control={control}
-                  rules={{
-                    pattern: {
-                      value: /^\S+@\S+$/i,
-                      message: localize(
-                        'customer.form.validation.email.pattern'
-                      ),
-                    },
-                  }}
-                  render={({ field: { onChange, value } }) => (
-                    <View
-                      style={[
-                        styles.inputContainer,
-                        { borderBottomColor: themeColors.ghost },
-                      ]}
-                    >
-                      <TextInput
-                        style={inputStyle}
-                        placeholder={localize(
-                          'customer.form.placeholder.email'
-                        )}
-                        placeholderTextColor={themeColors.gainsboro}
-                        value={value}
-                        onChangeText={onChange}
-                        keyboardType="email-address"
+                Email
+              </AppText>
+              <Controller
+                control={control}
+                rules={{
+                  pattern: {
+                    value: /^\S+@\S+$/i,
+                    message: localize('customer.form.validation.email.pattern'),
+                  },
+                }}
+                render={({ field: { onChange, value } }) => (
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.email')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                      keyboardType="email-address"
+                    />
+                    {errors.email && (
+                      <InfoButton
+                        title={'customer.form.failed.email'}
+                        description={'customer.form.failed.email.desc'}
                       />
-                      {errors.email && (
-                        <InfoButton
-                          title={'customer.form.failed.email'}
-                          description={'customer.form.failed.email.desc'}
-                        />
-                      )}
-                    </View>
-                  )}
-                  name="email"
-                />
-                <AppText
-                  style={[
-                    styles.title,
-                    {
-                      color: themeColors.slate,
-                    },
-                  ]}
-                >
-                  Phone
-                </AppText>
-                <Controller
-                  control={control}
-                  rules={{
-                    validate: (value) => {
-                      if (!value) return true;
-                      return (
-                        typeof value === 'string' ||
-                        localize('customer.form.validation.phone.invalid')
-                      );
-                    },
-                  }}
-                  render={({ field: { onChange, value } }) => (
-                    <View
-                      style={[
-                        styles.inputContainer,
-                        { borderBottomColor: themeColors.ghost },
-                      ]}
-                    >
-                      <TextInput
-                        style={inputStyle}
-                        placeholder={localize(
-                          'customer.form.placeholder.phone'
-                        )}
-                        placeholderTextColor={themeColors.gainsboro}
-                        value={value}
-                        onChangeText={onChange}
-                        keyboardType="phone-pad"
+                    )}
+                  </View>
+                )}
+                name="email"
+              />
+              <AppText
+                style={[
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
+                ]}
+              >
+                Phone
+              </AppText>
+              <Controller
+                control={control}
+                rules={{
+                  validate: (value) => {
+                    if (!value) return true;
+                    return (
+                      typeof value === 'string' ||
+                      localize('customer.form.validation.phone.invalid')
+                    );
+                  },
+                }}
+                render={({ field: { onChange, value } }) => (
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.phone')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                      keyboardType="phone-pad"
+                    />
+                    {errors.phone && (
+                      <InfoButton
+                        title={'customer.form.failed.phone'}
+                        description={'customer.form.failed.phone.desc'}
                       />
-                      {errors.phone && (
-                        <InfoButton
-                          title={'customer.form.failed.phone'}
-                          description={'customer.form.failed.phone.desc'}
-                        />
-                      )}
-                    </View>
-                  )}
-                  name="phone"
-                />
-              </View>
+                    )}
+                  </View>
+                )}
+                name="phone"
+              />
             </View>
-          </ScrollView>
-          <TouchableOpacity
-            activeOpacity={activeOpacity}
-            style={[
-              styles.button,
-              { backgroundColor: themeColors.dark_background },
-            ]}
-            onPress={handleSubmit(onSubmit)}
-          >
-            <AppText
-              localization="customer.form.submit"
-              style={[styles.buttonText, { color: themeColors.light_text }]}
-            />
-          </TouchableOpacity>
-          <CustomPopup
-            isVisible={popupVisible}
-            onClose={() => setPopupVisible(false)}
-            title={popupContent.title}
-            description={popupContent.description}
-            onCancelButton={() => {
-              setPopupVisible(false);
-              setPopupContent({ title: '', description: '' });
-            }}
-            buttonText={'customer.form.cancel' as keyof LocalizationKeys}
+          </View>
+        </ScrollView>
+        <TouchableOpacity
+          activeOpacity={activeOpacity}
+          style={[
+            styles.button,
+            { backgroundColor: themeColors.dark_background },
+          ]}
+          onPress={handleSubmit(onSubmit)}
+        >
+          <AppText
+            localization="customer.form.submit"
+            style={[styles.buttonText, { color: themeColors.light_text }]}
           />
         </TouchableOpacity>
-      </KeyboardAvoidingView>
+        <CustomPopup
+          isVisible={popupVisible}
+          onClose={() => setPopupVisible(false)}
+          title={popupContent.title}
+          description={popupContent.description}
+          onCancelButton={() => {
+            setPopupVisible(false);
+            setPopupContent({ title: '', description: '' });
+          }}
+          buttonText={'customer.form.cancel' as keyof LocalizationKeys}
+        />
+      </TouchableOpacity>
     </>
   );
 }

package/src/components/EmptyList.tsx

@@ -1,4 +1,4 @@
-import { View, Image, Platform } from 'react-native';
+import { View, Image } from 'react-native';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
@@ -11,15 +11,7 @@ export function EmptyList() {
 
   return (
     <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: themeColors.background,
-          transform: [
-            Platform.OS === 'ios' ? { scaleY: -1 } : { rotate: '180deg' },
-          ],
-        },
-      ]}
+      style={[styles.container, { backgroundColor: themeColors.background }]}
     >
       <Image
         source={notificationIcon}
@@ -45,6 +37,7 @@ const styles = ScaledSheet.create({
     paddingHorizontal: '20@s',
     paddingVertical: '20@vs',
     gap: 15,
+    transform: [{ rotate: '180deg' }],
   },
   title: {
     fontSize: '18@vs',