feat: example screen

kirillzyusko · Dec 22, 2023 · f660ced · f660ced
1 parent 8d09ccb
commit f660ced
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 0 deletions.
diff --git a/FabricExample/src/constants/screenNames.ts b/FabricExample/src/constants/screenNames.ts
@@ -14,4 +14,5 @@ export enum ScreenNames {
   NATIVE_STACK = 'NATIVE_STACK',
   KEYBOARD_AVOIDING_VIEW = 'KEYBOARD_AVOIDING_VIEW',
   ENABLED_DISABLED = 'ENABLED_DISABLED',
+  CLOSE = 'CLOSE',
 }
diff --git a/FabricExample/src/navigation/ExamplesStack/index.tsx b/FabricExample/src/navigation/ExamplesStack/index.tsx
@@ -16,6 +16,7 @@ import NativeStack from '../NestedStack';
 import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoidingView';
 import EnabledDisabled from '../../screens/Examples/EnabledDisabled';
 import AwareScrollViewStickyFooter from '../../screens/Examples/AwareScrollViewStickyFooter';
+import CloseScreen from '../../screens/Examples/Close';
 
 export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
@@ -31,6 +32,7 @@ export type ExamplesStackParamList = {
   [ScreenNames.NATIVE_STACK]: undefined;
   [ScreenNames.KEYBOARD_AVOIDING_VIEW]: undefined;
   [ScreenNames.ENABLED_DISABLED]: undefined;
+  [ScreenNames.CLOSE]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -76,6 +78,9 @@ const options = {
   [ScreenNames.ENABLED_DISABLED]: {
     title: 'Enabled/disabled',
   },
+  [ScreenNames.CLOSE]: {
+    title: 'Close keyboard',
+  },
 };
 
 const ExamplesStack = () => (
@@ -145,6 +150,11 @@ const ExamplesStack = () => (
       component={EnabledDisabled}
       options={options[ScreenNames.ENABLED_DISABLED]}
     />
+    <Stack.Screen
+      name={ScreenNames.CLOSE}
+      component={CloseScreen}
+      options={options[ScreenNames.CLOSE]}
+    />
   </Stack.Navigator>
 );
 

diff --git a/FabricExample/src/screens/Examples/Close/index.tsx b/FabricExample/src/screens/Examples/Close/index.tsx
@@ -0,0 +1,30 @@
+import { Button, StyleSheet, TextInput, View } from "react-native";
+import { KeyboardController } from "react-native-keyboard-controller";
+
+function CloseScreen() {
+  return (
+    <View>
+      <Button
+        title="Close keyboard"
+        onPress={() => KeyboardController.dismiss()}
+        testID="close_keyboard_button"
+      />
+      <TextInput style={styles.input} placeholder="Touch to open the keyboard..." placeholderTextColor="#7C7C7C" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 50,
+    width: "84%",
+    borderWidth: 2,
+    borderColor: "#3C3C3C",
+    borderRadius: 8,
+    alignSelf: 'center',
+    paddingHorizontal: 8,
+    marginTop: 16,
+  },
+});
+
+export default CloseScreen;
diff --git a/FabricExample/src/screens/Examples/Main/constants.ts b/FabricExample/src/screens/Examples/Main/constants.ts
@@ -80,4 +80,10 @@ export const examples: Example[] = [
     info: ScreenNames.ENABLED_DISABLED,
     icons: '💡',
   },
+  {
+    title: 'Close',
+    testID: 'close',
+    info: ScreenNames.CLOSE,
+    icons: '❌',
+  },
 ];
diff --git a/example/src/constants/screenNames.ts b/example/src/constants/screenNames.ts
@@ -15,4 +15,5 @@ export enum ScreenNames {
   NATIVE_STACK = 'NATIVE_STACK',
   KEYBOARD_AVOIDING_VIEW = 'KEYBOARD_AVOIDING_VIEW',
   ENABLED_DISABLED = 'ENABLED_DISABLED',
+  CLOSE = 'CLOSE',
 }
diff --git a/example/src/navigation/ExamplesStack/index.tsx b/example/src/navigation/ExamplesStack/index.tsx
@@ -17,6 +17,7 @@ import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoiding
 import ReanimatedChatFlatlist from '../../screens/Examples/ReanimatedChatFlatlist';
 import EnabledDisabled from '../../screens/Examples/EnabledDisabled';
 import AwareScrollViewStickyFooter from '../../screens/Examples/AwareScrollViewStickyFooter';
+import CloseScreen from '../../screens/Examples/Close';
 
 export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
@@ -32,6 +33,7 @@ export type ExamplesStackParamList = {
   [ScreenNames.NATIVE_STACK]: undefined;
   [ScreenNames.KEYBOARD_AVOIDING_VIEW]: undefined;
   [ScreenNames.ENABLED_DISABLED]: undefined;
+  [ScreenNames.CLOSE]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -80,6 +82,9 @@ const options = {
   [ScreenNames.ENABLED_DISABLED]: {
     title: 'Enabled/disabled',
   },
+  [ScreenNames.CLOSE]: {
+    title: 'Close keyboard',
+  },
 };
 
 const ExamplesStack = () => (
@@ -154,6 +159,11 @@ const ExamplesStack = () => (
       component={EnabledDisabled}
       options={options[ScreenNames.ENABLED_DISABLED]}
     />
+    <Stack.Screen
+      name={ScreenNames.CLOSE}
+      component={CloseScreen}
+      options={options[ScreenNames.CLOSE]}
+    />
   </Stack.Navigator>
 );
 

diff --git a/example/src/screens/Examples/Close/index.tsx b/example/src/screens/Examples/Close/index.tsx
@@ -0,0 +1,30 @@
+import { Button, StyleSheet, TextInput, View } from "react-native";
+import { KeyboardController } from "react-native-keyboard-controller";
+
+function CloseScreen() {
+  return (
+    <View>
+      <Button
+        title="Close keyboard"
+        onPress={() => KeyboardController.dismiss()}
+        testID="close_keyboard_button"
+      />
+      <TextInput style={styles.input} placeholder="Touch to open the keyboard..." placeholderTextColor="#7C7C7C" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    height: 50,
+    width: "84%",
+    borderWidth: 2,
+    borderColor: "#3C3C3C",
+    borderRadius: 8,
+    alignSelf: 'center',
+    paddingHorizontal: 8,
+    marginTop: 16,
+  },
+});
+
+export default CloseScreen;
diff --git a/example/src/screens/Examples/Main/constants.ts b/example/src/screens/Examples/Main/constants.ts
@@ -86,4 +86,10 @@ export const examples: Example[] = [
     info: ScreenNames.ENABLED_DISABLED,
     icons: '💡',
   },
+  {
+    title: 'Close',
+    testID: 'close',
+    info: ScreenNames.CLOSE,
+    icons: '❌',
+  },
 ];