html user bio fix

src/screens/InAppScreens/ProfileScreen/Components/PersonalInfo.tsx

@@ -1,5 +1,5 @@
-import { FC, useCallback, useEffect, useState } from 'react';
-import { TouchableOpacity, View, Text, Image, Dimensions } from 'react-native';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { TouchableOpacity, View, Text, Image, Dimensions, useWindowDimensions } from 'react-native';
 import {
   Series,
   usePostAuthenticateMutation,
@@ -11,6 +11,7 @@ import Modal from 'react-native-modal';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import RegionsRenderer from '../RegionsRenderer';
 import moment from 'moment';
+import RenderHtml from 'react-native-render-html';
 
 import CompassIcon from 'assets/icons/travels-section/compass.svg';
 import FlagsIcon from 'assets/icons/travels-section/flags.svg';
@@ -90,6 +91,17 @@ export const PersonalInfo: FC<PersonalInfoProps> = ({
   isPublicView,
   token
 }) => {
+  const { width: windowWidth } = useWindowDimensions();
+  const contentWidth = windowWidth * 0.9;
+  const htmlBaseStyle: any = useMemo(
+    () => ({
+      color: Colors.DARK_BLUE,
+      fontWeight: '600',
+      fontSize: 12
+    }),
+    []
+  );
+
   const [showMoreSeries, setShowMoreSeries] = useState(false);
   const [type, setType] = useState<string>('nm');
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -541,7 +553,11 @@ export const PersonalInfo: FC<PersonalInfoProps> = ({
 
         {data.bio && data.bio.length > 0 && (
           <InfoItem title={'BIO'}>
-            <Text style={[styles.titleText, { flex: 0 }]}>{data.bio}</Text>
+            <RenderHtml
+              contentWidth={contentWidth}
+              source={{ html: data.bio }}
+              baseStyle={htmlBaseStyle}
+            />
           </InfoItem>
         )}
       </View>