From d7027d7195c4f591277aafd0d1240e8958d0e8e2 Mon Sep 17 00:00:00 2001
From: chirag-singhal <csinghal208@gmail.com>
Date: Thu, 13 Aug 2020 18:06:23 +0530
Subject: [PATCH] use cases for keyboard avoiding view

---
 .../KeyboardAvoidingViewExample.js            | 220 ++++++++++++++----
 1 file changed, 169 insertions(+), 51 deletions(-)

diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
index 1e6fb8a8765c8d..b0220db615c0b8 100644
--- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
+++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -13,71 +13,164 @@ const React = require('react');
 const {
   KeyboardAvoidingView,
   Modal,
-  SegmentedControlIOS,
   StyleSheet,
   Text,
   TextInput,
-  TouchableHighlight,
+  Button,
+  Pressable,
+  TouchableOpacity,
   View,
 } = require('react-native');
 
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
+const { useState } = require('react');
 
-type Props = $ReadOnly<{||}>;
-type State = {|
-  behavior: string,
-  modalOpen: boolean,
-|};
+const TextInputForm = () => {
+  return (
+    <View>
+      <TextInput placeholder="Email" style={styles.textInput} />
+      <TextInput placeholder="Username" style={styles.textInput} />
+      <TextInput placeholder="Password" style={styles.textInput} />
+      <TextInput placeholder="Confirm Password" style={styles.textInput} />
+      <Button title="Register"></Button>
+    </View>
+  );
+};
 
-class KeyboardAvoidingViewExample extends React.Component<Props, State> {
-  state = {
-    behavior: 'padding',
-    modalOpen: false,
-  };
+const CloseButton = (props) => {
+  return (
+    <View
+      style={[
+        styles.closeView,
+        {marginHorizontal: props.behavior === 'position' ? 0 : 25},
+      ]}>
+      <Pressable
+        onPress={() => props.setModdalOpen(false)}
+        style={styles.closeButton}>
+        <Text>Close</Text>
+      </Pressable>
+    </View>
+  );
+};
 
-  onSegmentChange = (segment: String) => {
-    this.setState({behavior: segment.toLowerCase()});
-  };
-
-  renderExample = () => {
+const KeyboardAvoidingViewBehaviour = () => {
+  const [modalOpen, setModdalOpen] = useState(false);
+  const [behavior, setBehavior] = useState('padding');
     return (
       <View style={styles.outerContainer}>
-        <Modal animationType="fade" visible={this.state.modalOpen}>
+        <Modal animationType="fade" visible={modalOpen}>
           <KeyboardAvoidingView
-            behavior={this.state.behavior}
+            behavior={behavior}
             style={styles.container}>
-            <SegmentedControlIOS
-              onValueChange={this.onSegmentChange}
-              selectedIndex={this.state.behavior === 'padding' ? 0 : 1}
-              style={styles.segment}
-              values={['Padding', 'Position']}
-            />
-            <TextInput placeholder="<TextInput />" style={styles.textInput} />
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'center',
+              }}>
+              <TouchableOpacity
+                onPress={() => setBehavior('padding')}
+                style={[
+                  styles.pillStyle,
+                  {
+                    backgroundColor:
+                      behavior === 'padding' ? 'blue' : 'white',
+                  },
+                ]}>
+                <Text
+                  style={{
+                    color: behavior === 'padding' ? 'white' : 'blue',
+                  }}>
+                  Padding
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => setBehavior('position')}
+                style={[
+                  styles.pillStyle,
+                  {
+                    backgroundColor:
+                      behavior === 'position' ? 'blue' : 'white',
+                  },
+                ]}>
+                <Text
+                  style={{
+                    color:
+                      behavior === 'position' ? 'white' : 'blue',
+                  }}>
+                  Position
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => setBehavior('height')}
+                style={[
+                  styles.pillStyle,
+                  {
+                    backgroundColor:
+                      behavior === 'height' ? 'blue' : 'white',
+                  },
+                ]}>
+                <Text
+                  style={{
+                    color: behavior === 'height' ? 'white' : 'blue',
+                  }}>
+                  Height
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <CloseButton behavior={behavior} setModdalOpen={setModdalOpen} />
+            <TextInputForm />
           </KeyboardAvoidingView>
-          <TouchableHighlight
-            onPress={() => this.setState({modalOpen: false})}
-            style={styles.closeButton}>
-            <Text>Close</Text>
-          </TouchableHighlight>
         </Modal>
+        <View>
+        <Pressable onPress={() => setModdalOpen(true)}>
+          <Text>Open Example</Text>
+        </Pressable>
+        </View>
+      </View>
+    );
+}
 
-        <TouchableHighlight onPress={() => this.setState({modalOpen: true})}>
+const KeyboardAvoidingDisabled = () => {
+  const [modalOpen, setModdalOpen] = useState(false);
+    return (
+      <View style={styles.outerContainer}>
+        <Modal animationType="fade" visible={modalOpen}>
+          <KeyboardAvoidingView
+            enabled={false}
+            behavior={'height'}
+            style={styles.container}>
+            <CloseButton behavior={'height'} setModdalOpen={setModdalOpen} />
+            <TextInputForm />
+          </KeyboardAvoidingView>
+        </Modal>
+        <View>
+        <Pressable onPress={() => setModdalOpen(true)}>
           <Text>Open Example</Text>
-        </TouchableHighlight>
+        </Pressable>
+        </View>
       </View>
     );
-  };
+}
 
-  render() {
+const KeyboardAvoidingVerticalOffset = () => {
+  const [modalOpen, setModdalOpen] = useState(false);
     return (
-      <RNTesterPage title="Keyboard Avoiding View">
-        <RNTesterBlock title="Keyboard-avoiding views move out of the way of the keyboard.">
-          {this.renderExample()}
-        </RNTesterBlock>
-      </RNTesterPage>
+      <View style={styles.outerContainer}>
+        <Modal animationType="fade" visible={modalOpen}>
+          <KeyboardAvoidingView
+            keyboardVerticalOffset={20}
+            behavior={'padding'}
+            style={styles.container}>
+            <CloseButton behavior={'height'} setModdalOpen={setModdalOpen} />
+            <TextInputForm />
+          </KeyboardAvoidingView>
+        </Modal>
+        <View>
+        <Pressable onPress={() => setModdalOpen(true)}>
+          <Text>Open Example</Text>
+        </Pressable>
+        </View>
+      </View>
     );
-  }
 }
 
 const styles = StyleSheet.create({
@@ -87,6 +180,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
+    alignItems: 'center',
     paddingHorizontal: 20,
     paddingTop: 20,
   },
@@ -94,15 +188,25 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     borderWidth: 1,
     height: 44,
+    width: 300,
+    marginBottom: 20,
     paddingHorizontal: 10,
   },
-  segment: {
-    marginBottom: 10,
+  closeView: {
+    alignSelf: 'stretch',
+  },
+  pillStyle: {
+    padding: 10,
+    marginHorizontal: 5,
+    marginVertical: 10,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: 'blue',
   },
   closeButton: {
-    position: 'absolute',
-    top: 40,
-    left: 10,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginVertical: 10,
     padding: 10,
   },
 });
@@ -112,9 +216,23 @@ exports.description =
   'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
 exports.examples = [
   {
-    title: 'Simple keyboard view',
-    render: function(): React.Element<typeof KeyboardAvoidingViewExample> {
-      return <KeyboardAvoidingViewExample />;
+    title: 'Keyboard Avoiding View with different behaviors',
+    description: 'Specify how to react to the presence of the keyboard. Android and iOS both interact with this prop differently. On both iOS and Android, setting behavior is recommended.',
+    render(): React.Node {
+      return <KeyboardAvoidingViewBehaviour />;
+    },
+  },
+  {
+    title: 'Keyboard Avoiding View with keyboardVerticalOffset={distance}',
+    description: 'This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. Defaults to 0.',
+    render(): React.Node {
+      return <KeyboardAvoidingVerticalOffset />;
+    },
+  },
+  {
+    title: 'Keyboard Avoiding View with enabled={false}',
+    render(): React.Node {
+      return <KeyboardAvoidingDisabled />;
     },
   },
 ];