@computools/react-native-template-controller 1.0.41 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@computools/react-native-template-controller",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "Computools react native template by using mobx as controllers",
   "main": "template.config.js",
   "scripts": {

package/template/src/app/infrastructure/auth/screens/login/Login.screen.tsx

@@ -12,6 +12,7 @@ import {InputField} from '@ui-kit/InputField.component';
 import {Button} from '@ui-kit/buttons/Button.component';
 import {localization} from '@localization/localization';
 import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {KeyboardView} from '@ui-kit/keyboard-view/keyboard-view.component';
 import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
 
 enum LoginField {
@@ -71,7 +72,7 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
   );
 
   return (
-    <View style={styles.screen}>
+    <KeyboardView style={styles.screen}>
       <View style={[styles.headerContainer, styles.row]}>
         <View style={styles.iconWrapper}>
           <Computools />
@@ -83,16 +84,14 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
       <Text style={[styles.forgetPassword, styles.row]}>{localization.t('forgotPass')}</Text>
       <Button style={styles.row} onPress={handleSubmit(onLogin)} text={localization.t('buttons.login')} />
       <Button style={styles.row} onPress={onSignUp} text={localization.t('buttons.signup')} />
-    </View>
+    </KeyboardView>
   );
 };
 
 const styles = StyleSheet.create({
   screen: {
-    flex: 1,
     justifyContent: 'center',
     paddingHorizontal: 30,
-    paddingTop: 25,
   },
   headerContainer: {
     alignItems: 'center',

package/template/src/app/infrastructure/auth/screens/sign-up/SignUp.screen.tsx

@@ -1,8 +1,8 @@
 import {z} from 'zod';
 import React from 'react';
 import {zodResolver} from '@hookform/resolvers/zod';
+import {View, Text, StyleSheet, Alert} from 'react-native';
 import {useForm, Controller, ControllerProps} from 'react-hook-form';
-import {View, Text, StyleSheet, Alert, SafeAreaView} from 'react-native';
 import {type NativeStackScreenProps} from '@react-navigation/native-stack';
 
 import {InputField} from '@ui-kit/InputField.component';
@@ -10,6 +10,7 @@ import {Button} from '@ui-kit/buttons/Button.component';
 import {HeaderBack} from '@ui-kit/HeaderBack.component';
 import {localization} from '@localization/localization';
 import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {KeyboardView} from '@ui-kit/keyboard-view/keyboard-view.component';
 import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
 
 enum SignUpField {
@@ -77,7 +78,7 @@ export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainSt
   );
 
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <KeyboardView>
       <HeaderBack goBack={navigation.goBack} />
       <View style={styles.screen}>
         <View style={[styles.headerContainer, styles.row]}>
@@ -91,14 +92,11 @@ export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainSt
         <Controller name={SignUpField.RepeatPassword} control={control} render={renderRepeatPassword} />
         <Button style={styles.row} onPress={handleSubmit(onSignUp)} text={localization.t('buttons.signup')} />
       </View>
-    </SafeAreaView>
+    </KeyboardView>
   );
 };
 
 const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
   screen: {
     flex: 1,
     justifyContent: 'center',

package/template/src/app/ui-kit/keyboard-view/keyboard-view.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Keyboard, KeyboardAvoidingView, KeyboardAvoidingViewProps, Platform, StyleSheet} from 'react-native';
+
+export const KeyboardView: React.FC<KeyboardAvoidingViewProps> = ({children, style, ...props}) => {
+  const {top} = useSafeAreaInsets();
+
+  return (
+    <KeyboardAvoidingView
+      onTouchStart={Keyboard.dismiss}
+      style={[styles.keyboardView, {paddingTop: top}, style]}
+      behavior={Platform.select({ios: 'padding', android: 'height'})}
+      {...props}>
+      {children}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  keyboardView: {flex: 1},
+});