revert editorScreen animations

src/components/markdownEditor/view/markdownEditorView.js

@@ -32,8 +32,6 @@ const MarkdownEditorView = ({
   handleIsValid,
   componentID,
   uploadedImage,
-  onFocus,
-  onScrollToTop,
 }) => {
   const [text, setText] = useState(draftBody || '');
   const [selection, setSelection] = useState({ start: 0, end: 0 });
@@ -219,8 +217,8 @@ const MarkdownEditorView = ({
   return (
     <KeyboardAvoidingView
       style={styles.container}
-      keyboardVerticalOffset={Platform.select({ ios: 0, android: 25 })}
-      behavior="padding"
+      keyboardVerticalOffset={Platform.select({ ios: 0, android: 30 })}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
       {!isPreviewActive ? (
         <ThemeContainer>
@@ -228,7 +226,7 @@ const MarkdownEditorView = ({
             <TextInput
               multiline
               autoCorrect={true}
-              autoFocus={false}
+              autoFocus={true}
               onChangeText={_changeText}
               onSelectionChange={_handleOnSelectionChange}
               placeholder={intl.formatMessage({
@@ -242,8 +240,6 @@ const MarkdownEditorView = ({
               editable={editable}
               contextMenuHidden={false}
               autoGrow={false}
-              onFocus={onFocus}
-              onScrollToTop={onScrollToTop}
             />
           )}
         </ThemeContainer>

src/components/textInput/view/textInputView.js

@@ -6,7 +6,7 @@ import { ThemeContainer } from '../../../containers';
 // Styles
 import styles from './textInputStyles';
 
-const TextInputView = ({ innerRef, height, style, onScrollToTop, ...props }) => (
+const TextInputView = ({ innerRef, height, style, ...props }) => (
   <ThemeContainer>
     {({ isDarkTheme }) => (
       <TextInput
@@ -14,7 +14,6 @@ const TextInputView = ({ innerRef, height, style, onScrollToTop, ...props }) =>
         keyboardAppearance={isDarkTheme ? 'dark' : 'light'}
         {...props}
         style={[styles.input, { minHeight: height }, style]}
-        onScroll={(event) => event.nativeEvent.contentOffset.y === 0 && onScrollToTop()}
       />
     )}
   </ThemeContainer>

src/screens/editor/screen/editorScreen.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import { View, Animated } from 'react-native';
+import { View } from 'react-native';
 import { injectIntl } from 'react-intl';
 import { get, isNull } from 'lodash';
-import { PanGestureHandler } from 'react-native-gesture-handler';
 
 // Utils
 import { getWordsCount } from '../../../utils/editor';
@@ -53,9 +52,6 @@ class EditorScreen extends Component {
       },
       isCommunitiesListModalOpen: false,
       selectedCommunity: null,
-      animatedViewHeight: new Animated.Value(150),
-      animatedViewOpacity: new Animated.Value(1),
-      showFields: true,
     };
   }
 
@@ -203,7 +199,7 @@ class EditorScreen extends Component {
     });
   };
 
-  _handleOnTagAdded = (tags) => {
+  _handleOnTagAdded = async (tags) => {
     const { selectedCommunity } = this.state;
 
     if (tags.length > 0 && !isNull(selectedCommunity) && !isCommunity(tags[0])) {
@@ -217,16 +213,6 @@ class EditorScreen extends Component {
     });
   };
 
-  _handleChangeTitle = (text) => {
-    const { fields: _fields } = this.state;
-
-    _fields.title = text;
-
-    this.setState({ fields: _fields }, () => {
-      this._handleFormUpdate('title', _fields.title);
-    });
-  };
-
   _handlePressCommunity = (community) => {
     const { fields, selectedCommunity } = this.state;
 
@@ -255,40 +241,6 @@ class EditorScreen extends Component {
       });
   };
 
-  _handleDisappearAnimatedContainer = () => {
-    const { animatedViewHeight, animatedViewOpacity } = this.state;
-
-    Animated.timing(animatedViewHeight, {
-      toValue: 0,
-      duration: 300, // <-- animation duration
-      useNativeDriver: false, // <-- need to set false to prevent yellow box warning
-    }).start(() => this.setState({ showFields: false }));
-
-    Animated.timing(animatedViewOpacity, {
-      toValue: 0,
-      duration: 300, // <-- animation duration
-      useNativeDriver: false, // <-- need to set false to prevent yellow box warning
-    }).start();
-  };
-
-  _handleShowAnimatedContainer = () => {
-    const { animatedViewHeight, animatedViewOpacity } = this.state;
-
-    this.setState({ showFields: true });
-
-    Animated.timing(animatedViewHeight, {
-      toValue: 150,
-      duration: 300, // <-- animation duration
-      useNativeDriver: false, // <-- need to set false to prevent yellow box warning
-    }).start();
-
-    Animated.timing(animatedViewOpacity, {
-      toValue: 1,
-      duration: 300, // <-- animation duration
-      useNativeDriver: false, // <-- need to set false to prevent yellow box warning
-    }).start();
-  };
-
   render() {
     const {
       fields,
@@ -298,9 +250,6 @@ class EditorScreen extends Component {
       isRemoveTag,
       isCommunitiesListModalOpen,
       selectedCommunity,
-      animatedViewHeight,
-      animatedViewOpacity,
-      showFields,
     } = this.state;
     const {
       handleOnImagePicker,
@@ -324,111 +273,89 @@ class EditorScreen extends Component {
       id: isEdit ? 'basic_header.update' : isReply ? 'basic_header.reply' : 'basic_header.publish',
     });
     return (
-      <PanGestureHandler
-        onGestureEvent={(event) =>
-          event.nativeEvent.translationY >= 25 && this._handleShowAnimatedContainer()
-        }
-        activeOffsetY={[-20, 20]}
-      >
-        <View style={globalStyles.defaultContainer}>
-          <Modal
-            isOpen={isCommunitiesListModalOpen}
-            animationType="animationType"
-            presentationStyle="pageSheet"
-            style={styles.modal}
-          >
-            <SelectCommunityModalContainer
-              onPressCommunity={this._handlePressCommunity}
-              currentAccount={currentAccount}
-            />
-          </Modal>
-          <BasicHeader
-            handleDatePickerChange={(date) => handleDatePickerChange(date, fields)}
-            handleRewardChange={handleRewardChange}
-            handleBeneficiaries={handleBeneficiaries}
-            handleOnBackPress={handleOnBackPress}
-            handleOnPressPreviewButton={this._handleOnPressPreviewButton}
-            handleOnSaveButtonPress={this._handleOnSaveButtonPress}
-            handleOnSubmit={this._handleOnSubmit}
-            isDraftSaved={isDraftSaved}
-            isDraftSaving={isDraftSaving}
-            isEdit={isEdit}
-            isFormValid={isFormValid}
-            isHasIcons
-            isLoading={isPostSending || isUploading}
-            isLoggedIn={isLoggedIn}
-            isPreviewActive={isPreviewActive}
-            isReply={isReply}
-            quickTitle={wordsCount > 0 && `${wordsCount} words`}
-            rightButtonText={rightButtonText}
+      <View style={globalStyles.defaultContainer}>
+        <Modal
+          isOpen={isCommunitiesListModalOpen}
+          animationType="animationType"
+          presentationStyle="pageSheet"
+          style={styles.modal}
+        >
+          <SelectCommunityModalContainer
+            onPressCommunity={this._handlePressCommunity}
+            currentAccount={currentAccount}
           />
-          <PostForm
-            handleFormUpdate={this._handleFormUpdate}
-            handleOnSubmit={this._handleOnSubmit}
-            isFormValid={isFormValid}
-            isPreviewActive={isPreviewActive}
-          >
-            <Animated.View style={{ maxHeight: animatedViewHeight, opacity: animatedViewOpacity }}>
-              {showFields && (
-                <>
-                  {!isReply && !isEdit && (
-                    <SelectCommunityAreaView
-                      currentAccount={currentAccount}
-                      mode={!isNull(selectedCommunity) ? 'community' : 'user'}
-                      community={selectedCommunity}
-                      // because of the bug in react-native-modal
-                      // https://github.com/facebook/react-native/issues/26892
-                      onPressOut={() => this.setState({ isCommunitiesListModalOpen: true })}
-                      onPressIn={() => this.setState({ isCommunitiesListModalOpen: false })}
-                    />
-                  )}
-                  {isReply && !isEdit && <SummaryArea summary={post.summary} />}
-                  {!isReply && (
-                    <TitleArea
-                      value={fields.title}
-                      componentID="title"
-                      intl={intl}
-                      onChange={this._handleChangeTitle}
-                    />
-                  )}
-                  {!isReply && !isPreviewActive && (
-                    <TagInput
-                      value={fields.tags}
-                      componentID="tag-area"
-                      intl={intl}
-                      handleTagChanged={this._handleOnTagAdded}
-                      setCommunity={this._getCommunity}
-                    />
-                  )}
-                  {!isReply && isPreviewActive && (
-                    <TagArea
-                      draftChips={fields.tags.length > 0 ? fields.tags : null}
-                      componentID="tag-area"
-                      intl={intl}
-                    />
-                  )}
-                </>
-              )}
-            </Animated.View>
-            <MarkdownEditor
-              componentID="body"
-              draftBody={fields && fields.body}
-              handleOnTextChange={this._setWordsCount}
-              handleFormUpdate={this._handleFormUpdate}
-              handleIsFormValid={this._handleIsFormValid}
-              isFormValid={isFormValid}
-              handleOpenImagePicker={handleOnImagePicker}
-              intl={intl}
-              uploadedImage={uploadedImage}
-              initialFields={this._initialFields}
-              isReply={isReply}
-              isLoading={isPostSending || isUploading}
-              onFocus={this._handleDisappearAnimatedContainer}
-              onScrollToTop={this._handleShowAnimatedContainer}
+        </Modal>
+        <BasicHeader
+          handleDatePickerChange={(date) => handleDatePickerChange(date, fields)}
+          handleRewardChange={handleRewardChange}
+          handleBeneficiaries={handleBeneficiaries}
+          handleOnBackPress={handleOnBackPress}
+          handleOnPressPreviewButton={this._handleOnPressPreviewButton}
+          handleOnSaveButtonPress={this._handleOnSaveButtonPress}
+          handleOnSubmit={this._handleOnSubmit}
+          isDraftSaved={isDraftSaved}
+          isDraftSaving={isDraftSaving}
+          isEdit={isEdit}
+          isFormValid={isFormValid}
+          isHasIcons
+          isLoading={isPostSending || isUploading}
+          isLoggedIn={isLoggedIn}
+          isPreviewActive={isPreviewActive}
+          isReply={isReply}
+          quickTitle={wordsCount > 0 && `${wordsCount} words`}
+          rightButtonText={rightButtonText}
+        />
+        <PostForm
+          handleFormUpdate={this._handleFormUpdate}
+          handleOnSubmit={this._handleOnSubmit}
+          isFormValid={isFormValid}
+          isPreviewActive={isPreviewActive}
+        >
+          {!isReply && !isEdit && (
+            <SelectCommunityAreaView
+              currentAccount={currentAccount}
+              mode={!isNull(selectedCommunity) ? 'community' : 'user'}
+              community={selectedCommunity}
+              // because of the bug in react-native-modal
+              // https://github.com/facebook/react-native/issues/26892
+              onPressOut={() => this.setState({ isCommunitiesListModalOpen: true })}
+              onPressIn={() => this.setState({ isCommunitiesListModalOpen: false })}
             />
-          </PostForm>
-        </View>
-      </PanGestureHandler>
+          )}
+          {isReply && !isEdit && <SummaryArea summary={post.summary} />}
+          {!isReply && <TitleArea value={fields.title} componentID="title" intl={intl} />}
+          {!isReply && !isPreviewActive && (
+            <TagInput
+              value={fields.tags}
+              componentID="tag-area"
+              intl={intl}
+              handleTagChanged={this._handleOnTagAdded}
+              setCommunity={(hive) => this._getCommunity(hive)}
+            />
+          )}
+          {!isReply && isPreviewActive && (
+            <TagArea
+              draftChips={fields.tags.length > 0 ? fields.tags : null}
+              componentID="tag-area"
+              intl={intl}
+            />
+          )}
+          <MarkdownEditor
+            componentID="body"
+            draftBody={fields && fields.body}
+            handleOnTextChange={this._setWordsCount}
+            handleFormUpdate={this._handleFormUpdate}
+            handleIsFormValid={this._handleIsFormValid}
+            isFormValid={isFormValid}
+            handleOpenImagePicker={handleOnImagePicker}
+            intl={intl}
+            uploadedImage={uploadedImage}
+            initialFields={this._initialFields}
+            isReply={isReply}
+            isLoading={isPostSending || isUploading}
+          />
+        </PostForm>
+      </View>
     );
   }
 }