fixed text ghosting away issue on android oreo

src/components/editorElements/selectCommunityArea/view/selectCommunityAreStyles.js

@@ -1,10 +1,12 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
+import isAndroidOreo from '../../../../utils/isAndroidOreo';
 
 export default EStyleSheet.create({
   selectCommunityAreaViewContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    paddingVertical: 8,
+    paddingTop: isAndroidOreo() ? 0 : 8,
+    paddingBottom: isAndroidOreo() ? 4 : 8,
   },
   chooseACommunityText: {
     marginHorizontal: 8,

src/components/editorElements/tagInput/view/tagInputStyles.js

@@ -1,8 +1,9 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
+import isAndroidOreo from '../../../../utils/isAndroidOreo';
 
 export default EStyleSheet.create({
   container: {
-    height: 40,
+    height: isAndroidOreo() ? 28 : 40,
   },
   textInput: {
     color: '$primaryBlack',

src/components/editorElements/titleArea/view/titleAreaStyles.js

@@ -1,10 +1,11 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
+import isAndroidOreo from '../../../../utils/isAndroidOreo';
 
 export default EStyleSheet.create({
   textInput: {
     color: '$primaryBlack',
     fontWeight: 'bold',
-    fontSize: 24,
+    fontSize: isAndroidOreo() ? 16 : 24,
     fontFamily: '$editorFont',
     textAlignVertical: 'top',
     paddingVertical: 0,

src/components/editorElements/titleArea/view/titleAreaView.js

@@ -9,6 +9,7 @@ import { ThemeContainer } from '../../../../containers';
 // Styles
 import styles from './titleAreaStyles';
 import globalStyles from '../../../../globalStyles';
+import isAndroidOreo from '../../../../utils/isAndroidOreo';
 
 export default class TitleAreaView extends Component {
   /* Props
@@ -48,12 +49,14 @@ export default class TitleAreaView extends Component {
     const { intl, isPreviewActive, autoFocus } = this.props;
     const { text, height } = this.state;
 
+    const maxHeight = isAndroidOreo() ? 24 : 35;
+
     return (
-      <View style={[globalStyles.containerHorizontal16, { height: Math.max(35, height) }]}>
+      <View style={[globalStyles.containerHorizontal16, { height: Math.max(maxHeight, height) }]}>
         <ThemeContainer>
           {({ isDarkTheme }) => (
             <TextInput
-              style={[styles.textInput, { height: Math.max(35, height) }]}
+              style={[styles.textInput, { height: Math.max(maxHeight, height) }]}
               placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
               editable={!isPreviewActive}
               maxLength={250}

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -1,5 +1,6 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { Platform } from 'react-native';
+import isAndroidOreo from '../../../utils/isAndroidOreo';
 
 export default EStyleSheet.create({
   container: {
@@ -9,7 +10,7 @@ export default EStyleSheet.create({
   },
   textWrapper: {
     fontSize: 12,
-    paddingTop: 16,
+    paddingTop: isAndroidOreo() ? 6 : 16,
     paddingBottom: Platform.OS === 'ios' ? 32 : 0, // On android side, textinput has default padding
     paddingHorizontal: 16,
     color: '$primaryBlack',

src/components/markdownEditor/view/markdownEditorView.js

@@ -45,6 +45,7 @@ import { ThemeContainer } from '../../../containers';
 import styles from './markdownEditorStyles';
 import applySnippet from './formats/applySnippet';
 import { MainButton } from '../../mainButton';
+import isAndroidOreo from '../../../utils/isAndroidOreo';
 
 const MIN_BODY_INPUT_HEIGHT = 300;
 
@@ -363,86 +364,91 @@ const MarkdownEditorView = ({
     }
   };
 
+  const _renderEditor = () => (
+    <>
+      {isReply && !isEdit && <SummaryArea summary={post.summary} />}
+      {!isReply && (
+        <TitleArea value={fields.title} onChange={onTitleChanged} componentID="title" intl={intl} />
+      )}
+      {!isReply && !isPreviewActive && (
+        <TagInput
+          value={fields.tags}
+          componentID="tag-area"
+          intl={intl}
+          handleTagChanged={onTagChanged}
+          setCommunity={getCommunity}
+        />
+      )}
+      {!isReply && isPreviewActive && (
+        <TagArea
+          draftChips={fields.tags.length > 0 ? fields.tags : null}
+          componentID="tag-area"
+          intl={intl}
+        />
+      )}
+      {isReply && (
+        <View style={styles.replySection}>
+          <TouchableOpacity style={styles.accountTile} onPress={() => changeUser()}>
+            <View style={styles.avatarAndNameContainer}>
+              <UserAvatar noAction username={currentAccount.username} />
+              <View style={styles.nameContainer}>
+                <Text style={styles.name}>{`@${currentAccount.username}`}</Text>
+              </View>
+              <Icon
+                size={24}
+                iconStyle={styles.leftIcon}
+                style={styles.iconArrow}
+                name="arrow-drop-down"
+                iconType="MaterialIcons"
+              />
+            </View>
+          </TouchableOpacity>
+        </View>
+      )}
+      {!isPreviewActive ? (
+        <ThemeContainer>
+          {({ isDarkTheme }) => (
+            <TextInput
+              multiline
+              autoCorrect={true}
+              autoFocus={isReply ? true : false}
+              onChangeText={_changeText}
+              onSelectionChange={_handleOnSelectionChange}
+              placeholder={intl.formatMessage({
+                id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
+              })}
+              placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
+              selectionColor="#357ce6"
+              style={{ ...styles.textWrapper, height: bodyInputHeight }}
+              underlineColorAndroid="transparent"
+              innerRef={inputRef}
+              editable={editable}
+              contextMenuHidden={false}
+              autoGrow={false}
+              scrollEnabled={false}
+              onContentSizeChange={_handleOnContentSizeChange}
+            />
+          )}
+        </ThemeContainer>
+      ) : (
+        _renderPreview()
+      )}
+    </>
+  );
+
+  const _renderEditorWithScroll = () => (
+    <ScrollView style={styles.container}>{_renderEditor()}</ScrollView>
+  );
+
+  const _renderEditorWithoutScroll = () => <View style={styles.container}>{_renderEditor()}</View>;
+
   return (
     <KeyboardAvoidingView
       style={styles.container}
       keyboardVerticalOffset={Platform.select({ ios: 0, android: 30 })}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
-      <ScrollView>
-        {isReply && !isEdit && <SummaryArea summary={post.summary} />}
-        {!isReply && (
-          <TitleArea
-            value={fields.title}
-            onChange={onTitleChanged}
-            componentID="title"
-            intl={intl}
-          />
-        )}
-        {!isReply && !isPreviewActive && (
-          <TagInput
-            value={fields.tags}
-            componentID="tag-area"
-            intl={intl}
-            handleTagChanged={onTagChanged}
-            setCommunity={getCommunity}
-          />
-        )}
-        {!isReply && isPreviewActive && (
-          <TagArea
-            draftChips={fields.tags.length > 0 ? fields.tags : null}
-            componentID="tag-area"
-            intl={intl}
-          />
-        )}
-        {isReply && (
-          <View style={styles.replySection}>
-            <TouchableOpacity style={styles.accountTile} onPress={() => changeUser()}>
-              <View style={styles.avatarAndNameContainer}>
-                <UserAvatar noAction username={currentAccount.username} />
-                <View style={styles.nameContainer}>
-                  <Text style={styles.name}>{`@${currentAccount.username}`}</Text>
-                </View>
-                <Icon
-                  size={24}
-                  iconStyle={styles.leftIcon}
-                  style={styles.iconArrow}
-                  name="arrow-drop-down"
-                  iconType="MaterialIcons"
-                />
-              </View>
-            </TouchableOpacity>
-          </View>
-        )}
-        {!isPreviewActive ? (
-          <ThemeContainer>
-            {({ isDarkTheme }) => (
-              <TextInput
-                multiline
-                autoCorrect={true}
-                autoFocus={isReply ? true : false}
-                onChangeText={_changeText}
-                onSelectionChange={_handleOnSelectionChange}
-                placeholder={intl.formatMessage({
-                  id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
-                })}
-                placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
-                selectionColor="#357ce6"
-                style={{ ...styles.textWrapper, height: bodyInputHeight }}
-                underlineColorAndroid="transparent"
-                innerRef={inputRef}
-                editable={editable}
-                contextMenuHidden={false}
-                autoGrow={false}
-                scrollEnabled={false}
-                onContentSizeChange={_handleOnContentSizeChange}
-              />
-            )}
-          </ThemeContainer>
-        ) : (
-          _renderPreview()
-        )}
-      </ScrollView>
+      {isAndroidOreo() ? _renderEditorWithoutScroll() : _renderEditorWithScroll()}
 
       {_renderFloatingDraftButton()}
       {!isPreviewActive && _renderEditorButtons()}

src/utils/isAndroidOreo.ts

@@ -0,0 +1,5 @@
+import { Platform } from "react-native"
+
+export default () => {
+    return Platform.OS === 'android' && Platform.Version === 26
+}