diff --git a/src/app/(tabs)/search/story.tsx b/src/app/(tabs)/search/story.tsx index 35466903..dfefe15b 100644 --- a/src/app/(tabs)/search/story.tsx +++ b/src/app/(tabs)/search/story.tsx @@ -5,32 +5,34 @@ import { ScrollView, Share, Text, + View, } from 'react-native'; import HTMLView from 'react-native-htmlview'; import { Button } from 'react-native-paper'; import { SafeAreaView } from 'react-native-safe-area-context'; import jsonStory from '../../../database/story.json'; import globalStyles from '../../../styles/globalStyles'; - -const storyStyles = { - image: { - width: '100%', - height: '5%', - }, -}; +import temp from '../../../styles/temp'; function htmlParser(htmlString: string) { const regexHeading = /()/; const regexStory = /(\n+)+/; // regex grabs heading and paragraph tags for story - const regexTitle = /

 (.*?)p>/; + const regexProcess = /

 (.*?)p>/; const heading = regexHeading.exec(htmlString); const story = regexStory.exec(htmlString); - const title = regexTitle.exec(htmlString); + const process = regexProcess.exec(htmlString); - const storyContent = story ? story[0] : ''; //

heading

paragraph1

... - const storyTitle = title ? title[0] : ''; - return [storyContent, storyTitle]; + const contentHeading = heading + ? heading[0].replace('', '

') + : ''; //

heading

+ const contentStory = story ? story[0].replace(/(\n)+/gi, '') : ''; //

paragraph1

... + const contentProcess = process ? process[0].replace(' ', '') : ''; + return { + heading: contentHeading, + story: contentStory, + process: contentProcess, + }; } function StoryScreen() { @@ -52,12 +54,10 @@ function StoryScreen() { setContent(json.content.rendered); setAuthor(jsonStory.author); setGenres( - `${ - jsonStory['genre-medium'] - .map(txt => `${txt}`) - .toString() - .replace(',', '') // ${txt} - }`, + `
    ${jsonStory['genre-medium'] + .map(txt => `
  • ${txt}
    • `) + .toString() + .replace(',', '')}
`, ); setImage(jsonStory.featured_media); } catch (error) { @@ -72,7 +72,12 @@ function StoryScreen() { try { const result = await Share.share({ message: - 'React Native | A framework for building native apps using React', + `${title}\n` + + `By ${author}\n\n\n` + + `${htmlParser(content).heading.replace(/<[^>]+>/g, '\n')}` + + `${htmlParser(content).story.replace(/<[^>]+>/g, '\n')}\n\n\n` + + `Author's Process:\n` + + `${htmlParser(content).process.replace(/<[^>]+>/g, '')}`, }); if (result.action === Share.sharedAction) { if (result.activityType) { @@ -98,26 +103,86 @@ function StoryScreen() { ) : ( - - - By {author} - {/* style={{backgroundColor: '#D9D9D9', display: 'flex', flexDirection: 'row-reverse'}} */} - - - - - - - - Author's Process - - By {author} + {/* STYLING & URI WARNING */} + + + +

${title}

`)} + /> + + + + + By {author} + {'\n'} + + + + + + {'\n'} + + + + + {'\n'} + + + + + {'\n'} + + + + + {'\n'} + + Author's Process + {'\n'} + + + {'\n'} + + + + By {author} + + {'\n\n'} + {/* + + {'\n\n\n\n\n\n\n\n\n\n'} )} diff --git a/src/styles/temp.ts b/src/styles/temp.ts new file mode 100644 index 00000000..8e3171d7 --- /dev/null +++ b/src/styles/temp.ts @@ -0,0 +1,14 @@ +import { StyleSheet } from 'react-native'; + +export default StyleSheet.create({ + image: { + width: '100%', + height: '5%', + }, + body: { + fontSize: 16, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, +});