highlighter, thumbnail and simplified checks

package.json

@@ -74,6 +74,7 @@
     "react-native-extended-stylesheet": "^0.10.0",
     "react-native-fast-image": "^8.3.2",
     "react-native-gesture-handler": "^1.4.1",
+    "react-native-highlight-words": "^1.0.1",
     "react-native-iap": "3.4.15",
     "react-native-image-crop-picker": "^0.35.2",
     "react-native-image-size": "^1.1.3",

src/screens/searchResult/screen/tabs/best/view/postsResults.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { SafeAreaView, FlatList, View, Text, TouchableOpacity } from 'react-native';
+import { SafeAreaView, FlatList, View, Text, TouchableOpacity, Dimensions } from 'react-native';
 import get from 'lodash/get';
 import isUndefined from 'lodash/isUndefined';
 import FastImage from 'react-native-fast-image';
 import { useIntl } from 'react-intl';
+import Highlighter from 'react-native-highlight-words';
 
 // Components
 import { PostHeaderDescription, FilterBar } from '../../../../../../components';
@@ -19,15 +20,26 @@ import { getTimeFromNow } from '../../../../../../utils/time';
 import styles from './postsResultsStyles';
 
 import DEFAULT_IMAGE from '../../../../../../assets/no_image.png';
+import ProgressiveImage from '../../../../../../components/progressiveImage';
+
+const dim = Dimensions.get('window');
 
 const filterOptions = ['relevance', 'popularity', 'newest'];
 
 const PostsResults = ({ navigation, searchValue }) => {
   const intl = useIntl();
+  const [calcImgHeight, setCalcImgHeight] = useState(300);
 
   const _renderItem = (item, index) => {
     const reputation =
       get(item, 'author_rep', undefined) || get(item, 'author_reputation', undefined);
+    //console.log(item);
+    const image = get(item, 'img_url', undefined) || get(item, 'image', undefined);
+    const thumbnail =
+      get(item, 'thumbnail', undefined) ||
+      `https://images.ecency.com/6x5/${get(item, 'img_url', undefined)}`;
+    const votes = get(item, 'up_votes', 0) || get(item, 'stats.total_votes', 0);
+    const body = get(item, 'summary', '') || get(item, 'body_marked', '');
 
     return (
       <View style={[styles.itemWrapper, index % 2 !== 0 && styles.itemWrapperGray]}>
@@ -36,15 +48,28 @@ const PostsResults = ({ navigation, searchValue }) => {
           name={get(item, 'author')}
           reputation={Math.floor(reputation)}
           size={36}
-          tag={item.category}
+          content={item}
         />
-        <FastImage source={item.img_url} style={styles.thumbnail} defaultSource={DEFAULT_IMAGE} />
+        {image && (
+          <ProgressiveImage
+            source={{ uri: image }}
+            thumbnailSource={{ uri: thumbnail }}
+            style={[
+              styles.thumbnail,
+              { width: dim.width - 18, height: Math.min(calcImgHeight, dim.height) },
+            ]}
+          />
+        )}
         <View style={[styles.postDescription]}>
           <Text style={styles.title}>{item.title}</Text>
-          {!!item.body && (
+          {!!body && (
-            <Text style={styles.summary} numberOfLines={2}>
+            <Highlighter
-              {item.body}
+              highlightStyle={{ backgroundColor: 'yellow' }}
-            </Text>
+              searchWords={[searchValue]}
+              textToHighlight={body.replace(/<mark>/g, '').replace(/<\/mark>/g, '')}
+              style={styles.summary}
+              numberOfLines={2}
+            />
           )}
         </View>
         <View style={styles.stats}>
@@ -56,7 +81,7 @@ const PostsResults = ({ navigation, searchValue }) => {
             textStyle={styles.postIconText}
             iconStyle={styles.postIcon}
             iconType="MaterialCommunityIcons"
-            text={get(item, 'up_votes', 0)}
+            text={votes}
           />
           <TextWithIcon
             iconName="comment-outline"

src/screens/searchResult/screen/tabs/best/view/postsResultsStyles.js

@@ -16,10 +16,10 @@ export default EStyleSheet.create({
     color: '$primaryDarkGray',
   },
   itemWrapper: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 9,
+    //marginHorizontal: 9,
     paddingTop: 16,
-    paddingBottom: 8,
+    paddingBottom: 16,
-    borderRadius: 8,
     backgroundColor: '$primaryBackgroundColor',
   },
   itemWrapperGray: {
@@ -41,4 +41,13 @@ export default EStyleSheet.create({
     fontSize: 13,
     alignSelf: 'center',
   },
+  thumbnail: {
+    margin: 0,
+    alignItems: 'center',
+    alignSelf: 'center',
+    //height: 200,
+    //width: '$deviceWidth - 16',
+    borderRadius: 8,
+    backgroundColor: '$primaryLightGray',
+  },
 });

yarn.lock

@@ -4439,6 +4439,11 @@ hermes-engine@^0.2.1:
   resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.2.1.tgz#25c0f1ff852512a92cb5c5cc47cf967e1e722ea2"
   integrity sha512-eNHUQHuadDMJARpaqvlCZoK/Nitpj6oywq3vQ3wCwEsww5morX34mW5PmKWQTO7aU0ck0hgulxR+EVDlXygGxQ==
 
+highlight-words-core@^1.0.3:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
+  integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
+
 hive-uri@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/hive-uri/-/hive-uri-0.2.2.tgz#60d57a77a2c7a6394471f700e436f3f9822c737d"
@@ -7368,7 +7373,7 @@ prop-types@15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7567,6 +7572,14 @@ react-native-gesture-handler@^1.4.1:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+react-native-highlight-words@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-highlight-words/-/react-native-highlight-words-1.0.1.tgz#d998f8eb88765820367c6e8a12e1392df7fd58c7"
+  integrity sha512-cza6kbXeX2bWIwog6iatcMoWX6xogWvSKK1esCA7EQnQ/2hmqvdYGdGjvzTwLXyLmcBRySgreARNNKuDrKh7dg==
+  dependencies:
+    highlight-words-core "^1.0.3"
+    prop-types "^15.5.7"
+
 react-native-iap@3.4.15:
   version "3.4.15"
   resolved "https://registry.yarnpkg.com/react-native-iap/-/react-native-iap-3.4.15.tgz#0bf0f83c0591634ab562a5ec14d5a2b4e9c53c1d"