From 0e3826069358d9136c097009a805e07f6fa34395 Mon Sep 17 00:00:00 2001 From: Akshay Thakur Date: Wed, 1 Nov 2023 19:53:54 -0700 Subject: [PATCH] fixed (tabs) routing and added styles sheets --- src/app/(tabs)/_layout.tsx | 11 +- src/app/(tabs)/library/_layout.tsx | 11 ++ .../{mycontent.tsx => library/index.tsx} | 8 +- src/app/(tabs)/library/styles.ts | 5 + src/app/(tabs)/search/_layout.tsx | 1 - src/app/(tabs)/search/index.tsx | 48 +----- src/app/(tabs)/search/styles.ts | 48 ++++++ src/app/(tabs)/story/index.tsx | 155 +++--------------- src/app/(tabs)/story/styles.ts | 118 +++++++++++++ 9 files changed, 217 insertions(+), 188 deletions(-) create mode 100644 src/app/(tabs)/library/_layout.tsx rename src/app/(tabs)/{mycontent.tsx => library/index.tsx} (53%) create mode 100644 src/app/(tabs)/library/styles.ts create mode 100644 src/app/(tabs)/search/styles.ts diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx index 22b4f221..9a5f56bf 100644 --- a/src/app/(tabs)/_layout.tsx +++ b/src/app/(tabs)/_layout.tsx @@ -38,10 +38,17 @@ function TabNav() { }} /> + diff --git a/src/app/(tabs)/library/_layout.tsx b/src/app/(tabs)/library/_layout.tsx new file mode 100644 index 00000000..d021a461 --- /dev/null +++ b/src/app/(tabs)/library/_layout.tsx @@ -0,0 +1,11 @@ +import { Stack } from 'expo-router'; + +function StackLayout() { + return ( + + + + ); +} + +export default StackLayout; diff --git a/src/app/(tabs)/mycontent.tsx b/src/app/(tabs)/library/index.tsx similarity index 53% rename from src/app/(tabs)/mycontent.tsx rename to src/app/(tabs)/library/index.tsx index 738080e7..8a05bef0 100644 --- a/src/app/(tabs)/mycontent.tsx +++ b/src/app/(tabs)/library/index.tsx @@ -1,14 +1,14 @@ import { Text } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; -import globalStyles from '../../styles/globalStyles'; +import globalStyles from '../../../styles/globalStyles'; -function MyContentScreen() { +function LibraryScreen() { return ( - My Content + Library ); } -export default MyContentScreen; +export default LibraryScreen; diff --git a/src/app/(tabs)/library/styles.ts b/src/app/(tabs)/library/styles.ts new file mode 100644 index 00000000..ebaf5c77 --- /dev/null +++ b/src/app/(tabs)/library/styles.ts @@ -0,0 +1,5 @@ +import { StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({}); + +export default styles; diff --git a/src/app/(tabs)/search/_layout.tsx b/src/app/(tabs)/search/_layout.tsx index 950db7b2..d021a461 100644 --- a/src/app/(tabs)/search/_layout.tsx +++ b/src/app/(tabs)/search/_layout.tsx @@ -4,7 +4,6 @@ function StackLayout() { return ( - ); } diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index 7558fb41..df4c54a1 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -1,9 +1,10 @@ import { SearchBar } from '@rneui/themed'; import { Link } from 'expo-router'; import React, { useEffect, useState } from 'react'; -import { Button, FlatList, StyleSheet, Dimensions, View } from 'react-native'; +import { Button, FlatList, View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; +import styles from './styles'; import FilterModal from '../../../components/FilterModal/FilterModal'; import SearchCard from '../../../components/SearchCard/SearchCard'; import { fetchAllStoryPreviews } from '../../../queries/stories'; @@ -90,48 +91,3 @@ function SearchScreen() { } export default SearchScreen; - -const { width, height } = Dimensions.get('window'); - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - justifyContent: 'flex-start', - paddingLeft: 24, - paddingRight: 24, - paddingTop: 20, - gap: 14, - }, - searchContainer: { - backgroundColor: 'transparent', - borderRadius: 10, - borderColor: 'transparent', - padding: 0, - marginBottom: 16, - }, - inputContainer: { - backgroundColor: '#D9D9D9', - margin: 0, - borderRadius: 10, - }, - greyOverlay: { - flex: 1, - position: 'absolute', - left: 0, - top: 0, - opacity: 0.2, - backgroundColor: 'black', - width, - height, - zIndex: 1, - }, - noOverlay: { - flex: 1, - position: 'absolute', - left: 0, - top: 0, - width, - height, - }, -}); diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts new file mode 100644 index 00000000..f069ff55 --- /dev/null +++ b/src/app/(tabs)/search/styles.ts @@ -0,0 +1,48 @@ +import { Dimensions, StyleSheet } from 'react-native'; + +const { width, height } = Dimensions.get('window'); + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + justifyContent: 'flex-start', + paddingLeft: 24, + paddingRight: 24, + paddingTop: 20, + gap: 14, + }, + searchContainer: { + backgroundColor: 'transparent', + borderRadius: 10, + borderColor: 'transparent', + padding: 0, + marginBottom: 16, + }, + inputContainer: { + backgroundColor: '#D9D9D9', + margin: 0, + borderRadius: 10, + }, + greyOverlay: { + flex: 1, + position: 'absolute', + left: 0, + top: 0, + opacity: 0.2, + backgroundColor: 'black', + width, + height, + zIndex: 1, + }, + noOverlay: { + flex: 1, + position: 'absolute', + left: 0, + top: 0, + width, + height, + }, +}); + +export default styles; diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx index c70c29ef..0ac8f35a 100644 --- a/src/app/(tabs)/story/index.tsx +++ b/src/app/(tabs)/story/index.tsx @@ -8,11 +8,11 @@ import { Share, Text, View, - StyleSheet, } from 'react-native'; import { Button } from 'react-native-paper'; import { SafeAreaView } from 'react-native-safe-area-context'; +import styles from './styles'; import jsonStory from '../../../utils/story.json'; function htmlParser(htmlString: string) { @@ -108,7 +108,7 @@ function StoryScreen() { }, []); return ( - + {isLoading ? ( ) : ( @@ -117,23 +117,23 @@ function StoryScreen() { ref={scrollRef} showsVerticalScrollIndicator={false} > - + - {title} + {title} - - - By {author} + + + By {author} ( - - {item} + + {item} )} /> @@ -145,13 +145,13 @@ function StoryScreen() { onPress={onShare} style={{ width: 125, marginBottom: 16, borderRadius: 10 }} > - Share Story + Share Story - {heading} + {heading} - {story} + {story} - Author's Process + Author's Process - {process} + {process} - - - By {author} + + + By {author} )} @@ -187,118 +187,3 @@ function StoryScreen() { } export default StoryScreen; - -const tempStyles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - alignItems: 'flex-start', - justifyContent: 'flex-start', - paddingLeft: 24, - paddingRight: 24, - paddingTop: 48, - }, - image: { - width: '100%', - height: 153, - marginBottom: 16, - }, - authorImage: { - backgroundColor: '#D9D9D9', - width: 21, - height: 21, - borderRadius: 100 / 2, - }, - title: { - fontFamily: 'Avenir', - fontSize: 24, - fontWeight: '400', - textAlign: 'left', - color: 'black', - marginBottom: 16, - }, - author: { - display: 'flex', - flexDirection: 'row', - gap: 10, - marginBottom: 16, - }, - authorText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - textAlign: 'left', - color: 'black', - }, - genres: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - borderRadius: 10, - marginBottom: 16, - }, - genresBorder: { - backgroundColor: '#D9D9D9', - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 10, - paddingRight: 10, - borderRadius: 10, - marginRight: 8, - }, - genresText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - color: 'black', - backgroundColor: '#D9D9D9', - }, - shareButtonText: { - fontFamily: 'Avenir', - fontSize: 12, - fontWeight: '400', - textAlign: 'left', - color: 'black', - textDecorationLine: 'underline', - backgroundColor: '#D9D9D9', - }, - heading: { - fontFamily: 'Avenir', - fontSize: 16, - fontWeight: '400', - textAlign: 'left', - color: 'black', - paddingBottom: 34, - }, - story: { - fontFamily: 'Avenir', - fontSize: 12, - 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: '800', - textAlign: 'left', - color: 'black', - }, -}); diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts index e69de29b..aec766ba 100644 --- a/src/app/(tabs)/story/styles.ts +++ b/src/app/(tabs)/story/styles.ts @@ -0,0 +1,118 @@ +import { StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + alignItems: 'flex-start', + justifyContent: 'flex-start', + paddingLeft: 24, + paddingRight: 24, + paddingTop: 48, + }, + image: { + width: '100%', + height: 153, + marginBottom: 16, + }, + authorImage: { + backgroundColor: '#D9D9D9', + width: 21, + height: 21, + borderRadius: 100 / 2, + }, + title: { + fontFamily: 'Avenir', + fontSize: 24, + fontWeight: '400', + textAlign: 'left', + color: 'black', + marginBottom: 16, + }, + author: { + display: 'flex', + flexDirection: 'row', + gap: 10, + marginBottom: 16, + }, + authorText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + }, + genres: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + borderRadius: 10, + marginBottom: 16, + }, + genresBorder: { + backgroundColor: '#D9D9D9', + paddingTop: 5, + paddingBottom: 5, + paddingLeft: 10, + paddingRight: 10, + borderRadius: 10, + marginRight: 8, + }, + genresText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + color: 'black', + backgroundColor: '#D9D9D9', + }, + shareButtonText: { + fontFamily: 'Avenir', + fontSize: 12, + fontWeight: '400', + textAlign: 'left', + color: 'black', + textDecorationLine: 'underline', + backgroundColor: '#D9D9D9', + }, + heading: { + fontFamily: 'Avenir', + fontSize: 16, + fontWeight: '400', + textAlign: 'left', + color: 'black', + paddingBottom: 34, + }, + story: { + fontFamily: 'Avenir', + fontSize: 12, + 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: '800', + textAlign: 'left', + color: 'black', + }, +}); + +export default styles;