Skip to content

Commit

Permalink
ran prettier and fixed styling (removed top and bottom components and…
Browse files Browse the repository at this point in the history 
… added margin to every component individually)
  • Loading branch information
Marcos Hernandez committed Oct 21, 2023
1 parent c1cb6db commit 0dbc36a
Showing 1 changed file with 76 additions and 59 deletions.
135 changes: 76 additions & 59 deletions src/app/(tabs)/search/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ 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';

function htmlParser(htmlString: string) {
const regexHeading = /(<h2(.*?)h2>)/;
Expand Down Expand Up @@ -57,7 +56,7 @@ function StoryScreen() {
const [author, setAuthor] = useState(String);
const [genres, setGenres] = useState(['']);
const [image, setImage] = useState(String);
const ref = React.useRef<any>(null);
const scrollRef = React.useRef<any>(null);

// Load Wordpress API and its contents
const getStory = async (id: string) => {
Expand Down Expand Up @@ -101,7 +100,7 @@ function StoryScreen() {
};

const scrollUp = () => {
ref.current?.scrollTo({ x: 0, y: 0 });
scrollRef.current?.scrollTo({ x: 0, y: 0 });
};

useEffect(() => {
Expand All @@ -113,73 +112,75 @@ function StoryScreen() {
{isLoading ? (
<ActivityIndicator />
) : (
<ScrollView bounces ref={ref}>
<ScrollView
bounces
ref={scrollRef}
showsVerticalScrollIndicator={false}
>
<Image style={tempStyles.image} source={{ uri: image }} />

<View style={tempStyles.top}>
<Text style={tempStyles.title}>{title}</Text>
<Text style={tempStyles.title}>{title}</Text>

<View style={tempStyles.author}>
<Image style={tempStyles.authorImage} source={{ uri: '' }} />
<Text style={tempStyles.authorText}>By {author}</Text>
</View>
<View style={tempStyles.author}>
<Image style={tempStyles.authorImage} source={{ uri: '' }} />
<Text style={tempStyles.authorText}>By {author}</Text>
</View>

<View>
<FlatList
style={tempStyles.genres}
horizontal
data={genres}
renderItem={({ item }) => (
<View style={tempStyles.genresBorder}>
<Text style={tempStyles.genresText}>{item}</Text>
</View>
)}
/>
</View>
<View>
<FlatList
style={tempStyles.genres}
horizontal
data={genres}
renderItem={({ item }) => (
<View style={tempStyles.genresBorder}>
<Text style={tempStyles.genresText}>{item}</Text>
</View>
)}
/>
{/* </View> */}

<View style={{ alignItems: 'flex-start' }}>
<Button
textColor="black"
buttonColor="#D9D9D9"
icon="share"
onPress={onShare}
>
<Text style={tempStyles.shareButtonText}>Share Story</Text>
</Button>
</View>
<Button
textColor="black"
buttonColor="#D9D9D9"
icon="share"
onPress={onShare}
style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
>
<Text style={tempStyles.shareButtonText}>Share Story</Text>
</Button>
</View>

<Text style={tempStyles.heading}>{heading}</Text>

<Text style={tempStyles.story}>{story}</Text>

<View style={tempStyles.bottom}>
<View style={{ alignItems: 'flex-start' }}>
<Button
textColor="black"
buttonColor="#D9D9D9"
icon="share"
onPress={onShare}
>
<Text style={tempStyles.shareButtonText}>Share Story</Text>
</Button>
</View>

<Text style={globalStyles.h4}>Author's Process</Text>
<Button
textColor="black"
buttonColor="#D9D9D9"
icon="share"
onPress={onShare}
style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
>
<Text style={tempStyles.shareButtonText}>Share Story</Text>
</Button>

<Text style={tempStyles.process}>{process}</Text>
<Text style={tempStyles.authorProcess}>Author's Process</Text>

<View style={tempStyles.author}>
<Image style={tempStyles.authorImage} source={{ uri: '' }} />
<Text style={tempStyles.authorText}>By {author}</Text>
</View>
<Text style={tempStyles.process}>{process}</Text>

<View style={{ alignItems: 'flex-start' }}>
<Button textColor="black" icon="arrow-up" onPress={scrollUp}>
<Text style={tempStyles.backToTopButtonText}>Back To Top</Text>
</Button>
</View>
<View style={tempStyles.author}>
<Image style={tempStyles.authorImage} source={{ uri: '' }} />
<Text style={tempStyles.authorText}>By {author}</Text>
</View>

<Button
textColor="black"
icon="arrow-up"
onPress={scrollUp}
style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
>
<Text style={tempStyles.backToTopButtonText}>Back To Top</Text>
</Button>
</ScrollView>
)}
</SafeAreaView>
Expand All @@ -201,6 +202,7 @@ const tempStyles = StyleSheet.create({
image: {
width: '100%',
height: 153,
marginBottom: 16,
},
authorImage: {
backgroundColor: '#D9D9D9',
Expand All @@ -210,13 +212,14 @@ const tempStyles = StyleSheet.create({
},
top: {
justifyContent: 'space-between',
gap: 16,
gap: 14,
paddingTop: 20,
paddingBottom: 34,
paddingBottom: 32,
},
bottom: {
alignItems: 'flex-start',
justifyContent: 'space-between',
gap: 16,
gap: 14,
paddingBottom: 32,
},
title: {
Expand All @@ -225,11 +228,13 @@ const tempStyles = StyleSheet.create({
fontWeight: '400',
textAlign: 'left',
color: 'black',
marginBottom: 16,
},
author: {
display: 'flex',
flexDirection: 'row',
gap: 10,
marginBottom: 16,
},
authorText: {
fontFamily: 'Avenir',
Expand All @@ -243,6 +248,7 @@ const tempStyles = StyleSheet.create({
flexDirection: 'row',
flexWrap: 'wrap',
borderRadius: 10,
marginBottom: 16,
},
genresBorder: {
backgroundColor: '#D9D9D9',
Expand All @@ -267,6 +273,7 @@ const tempStyles = StyleSheet.create({
textAlign: 'left',
color: 'black',
textDecorationLine: 'underline',
backgroundColor: '#D9D9D9',
},
heading: {
fontFamily: 'Avenir',
Expand All @@ -282,18 +289,28 @@ const tempStyles = StyleSheet.create({
fontWeight: '400',
textAlign: 'left',
color: 'black',
marginBottom: 16,
},
authorProcess: {
fontFamily: 'Avenir',
fontSize: 16,
fontWeight: '600',
textAlign: 'left',
color: 'black',
marginBottom: 16,
},
process: {
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: '400',
textAlign: 'left',
color: 'black',
marginBottom: 16,
},
backToTopButtonText: {
fontFamily: 'Avenir',
fontSize: 12,
fontWeight: '600',
fontWeight: '800',
textAlign: 'left',
color: 'black',
},
Expand Down

0 comments on commit 0dbc36a

Please sign in to comment.