├── assets ├── images │ ├── icon.png │ ├── favicon.png │ ├── react-logo.png │ ├── adaptive-icon.png │ ├── react-logo@2x.png │ ├── react-logo@3x.png │ ├── splash-icon.png │ └── partial-react-logo.png └── fonts │ └── SpaceMono-Regular.ttf ├── styles ├── theme │ ├── borderRadius.ts │ ├── index.ts │ ├── spacing.ts │ ├── typography.ts │ ├── shadows.ts │ └── colors.ts └── globalStyles.ts ├── tsconfig.json ├── hooks └── useBottomTabOverflow.ts ├── app ├── +not-found.tsx ├── _layout.tsx ├── quranbookk.tsx ├── (tabs) │ ├── create.tsx │ ├── profile.tsx │ ├── notifications.tsx │ ├── explore.tsx │ ├── _layout.tsx │ └── index.tsx ├── about.tsx └── mixture.tsx ├── eas.json ├── .gitignore ├── utils └── icon_mapping.ts ├── components ├── ui │ ├── ExternalLink.tsx │ ├── HapticButton.tsx │ ├── WebViewContent.tsx │ ├── IconSymbol.tsx │ ├── IconSymbol.ios.tsx │ └── LargeScreenTab.tsx ├── HelloWave.tsx ├── Collapsable.tsx └── ParallaxEffect.tsx ├── constants └── customThemes.ts ├── app.json ├── README.md └── package.json /assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/icon.png -------------------------------------------------------------------------------- /assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/favicon.png -------------------------------------------------------------------------------- /assets/images/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/react-logo.png -------------------------------------------------------------------------------- /assets/images/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/adaptive-icon.png -------------------------------------------------------------------------------- /assets/images/react-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/react-logo@2x.png -------------------------------------------------------------------------------- /assets/images/react-logo@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/react-logo@3x.png -------------------------------------------------------------------------------- /assets/images/splash-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/splash-icon.png -------------------------------------------------------------------------------- /assets/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /assets/images/partial-react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhan7reza7/rename-and-push-7/HEAD/assets/images/partial-react-logo.png -------------------------------------------------------------------------------- /styles/theme/borderRadius.ts: -------------------------------------------------------------------------------- 1 | export const borderRadius = { 2 | none: 0, 3 | sm: 2, 4 | DEFAULT: 4, 5 | md: 6, 6 | lg: 8, 7 | xl: 12, 8 | "2xl": 16, 9 | "3xl": 24, 10 | full: 9999, 11 | }; 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "paths": { 6 | "@/*": [ 7 | "./*" 8 | ] 9 | } 10 | }, 11 | "include": [ 12 | "**/*.ts", 13 | "**/*.tsx", 14 | ".expo/types/**/*.ts", 15 | "expo-env.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /hooks/useBottomTabOverflow.ts: -------------------------------------------------------------------------------- 1 | import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"; 2 | import { useSafeAreaInsets } from "react-native-safe-area-context"; 3 | 4 | const useBottomTabOverflow = () => { 5 | const tabHeight = useBottomTabBarHeight(); 6 | const { bottom } = useSafeAreaInsets(); 7 | return tabHeight - bottom; 8 | }; 9 | 10 | export default useBottomTabOverflow; 11 | -------------------------------------------------------------------------------- /styles/globalStyles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | import theme from "./theme"; 3 | 4 | const globalStyles = StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | }, 8 | card: { 9 | padding: 16, 10 | backgroundColor: theme.colors.white, 11 | color: theme.colors.gray[900], 12 | borderRadius: theme.borderRadius.md, 13 | ...theme.shadows.md, 14 | }, 15 | }); 16 | 17 | export default globalStyles; 18 | -------------------------------------------------------------------------------- /app/+not-found.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet, Text, View } from "react-native"; 2 | 3 | export default function NotFound() { 4 | return ( 5 | 6 | Not Found - 404 7 | 8 | ); 9 | } 10 | 11 | const styles = StyleSheet.create({ 12 | container: { 13 | flex: 1, 14 | justifyContent: "center", 15 | alignItems: "center", 16 | }, 17 | text: { 18 | fontSize: 24, 19 | color: "#000", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /eas.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": { 3 | "version": ">= 15.0.12", 4 | "appVersionSource": "remote" 5 | }, 6 | "build": { 7 | "development": { 8 | "developmentClient": true, 9 | "distribution": "internal", 10 | "channel": "development" 11 | }, 12 | "preview": { 13 | "distribution": "internal", 14 | "channel": "preview" 15 | }, 16 | "production": { 17 | "autoIncrement": true, 18 | "channel": "production" 19 | } 20 | }, 21 | "submit": { 22 | "production": {} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | expo-env.d.ts 11 | 12 | # Native 13 | *.orig.* 14 | *.jks 15 | *.p8 16 | *.p12 17 | *.key 18 | *.mobileprovision 19 | 20 | # Metro 21 | .metro-health-check* 22 | 23 | # debug 24 | npm-debug.* 25 | yarn-debug.* 26 | yarn-error.* 27 | 28 | # macOS 29 | .DS_Store 30 | *.pem 31 | 32 | # local env files 33 | .env*.local 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | 38 | app-example 39 | -------------------------------------------------------------------------------- /utils/icon_mapping.ts: -------------------------------------------------------------------------------- 1 | import { MaterialIcons } from "@expo/vector-icons"; 2 | import { SymbolViewProps } from "expo-symbols"; 3 | import { ComponentProps } from "react"; 4 | 5 | const Icon_Mapping: Partial< 6 | Record["name"]> 7 | > = { 8 | "house.fill": "home", 9 | "paperplane.fill": "send", 10 | "square.and.pencil": "create", 11 | "bell.fill": "notifications", 12 | "person.fill": "person", 13 | "chevron.right": "chevron-right", 14 | "chevron.down": "expand-more", 15 | }; 16 | 17 | export default Icon_Mapping; 18 | -------------------------------------------------------------------------------- /components/ui/ExternalLink.tsx: -------------------------------------------------------------------------------- 1 | import { ExternalPathString, Link, type LinkProps } from "expo-router"; 2 | import { openBrowserAsync } from "expo-web-browser"; 3 | import { Platform } from "react-native"; 4 | 5 | type Props = Omit & { 6 | href: ExternalPathString; 7 | }; 8 | 9 | const ExternalLink = ({ href, ...rest }: Props) => ( 10 | { 15 | if (Platform.OS !== "web") { 16 | e.preventDefault(); 17 | openBrowserAsync(href); 18 | } 19 | }} 20 | /> 21 | ); 22 | 23 | export default ExternalLink; 24 | -------------------------------------------------------------------------------- /styles/theme/index.ts: -------------------------------------------------------------------------------- 1 | import { colors } from "./colors"; 2 | import { typography } from "./typography"; 3 | import { borderRadius } from "./borderRadius"; 4 | import { dropShadows, shadows } from "./shadows"; 5 | 6 | const theme = { 7 | colors, 8 | typography, 9 | borderRadius, 10 | shadows, 11 | dropShadows, 12 | } as const; 13 | 14 | export default theme; 15 | 16 | export type ThemeColors = typeof theme.colors; 17 | export type ThemeTypography = typeof theme.typography; 18 | export type ThemeBorderRadius = typeof theme.borderRadius; 19 | export type ThemeShadows = typeof theme.dropShadows; 20 | export type Shadows = typeof theme.shadows; 21 | export type Theme = typeof theme; 22 | -------------------------------------------------------------------------------- /styles/theme/spacing.ts: -------------------------------------------------------------------------------- 1 | export const spacing = { 2 | none: 0, 3 | xs: 4, 4 | sm: 8, 5 | md: 16, 6 | lg: 24, 7 | xl: 32, 8 | "2xl": 48, 9 | "3xl": 64, 10 | px: 1, 11 | 0: 0, 12 | 0.5: 2, 13 | 1: 4, 14 | 1.5: 6, 15 | 2: 8, 16 | 2.5: 10, 17 | 3: 12, 18 | 3.5: 14, 19 | 4: 16, 20 | 5: 20, 21 | 6: 24, 22 | 7: 28, 23 | 8: 32, 24 | 9: 36, 25 | 10: 40, 26 | 11: 44, 27 | 12: 48, 28 | 14: 56, 29 | 16: 64, 30 | 20: 80, 31 | 24: 96, 32 | 28: 112, 33 | 32: 128, 34 | 36: 144, 35 | 40: 160, 36 | 44: 176, 37 | 48: 192, 38 | 52: 208, 39 | 56: 224, 40 | 60: 240, 41 | 64: 256, 42 | 72: 288, 43 | 80: 320, 44 | 96: 384, 45 | }; 46 | -------------------------------------------------------------------------------- /components/ui/HapticButton.tsx: -------------------------------------------------------------------------------- 1 | import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; 2 | import { PlatformPressable } from "@react-navigation/elements"; 3 | import * as Haptics from "expo-haptics"; 4 | 5 | const HapticButton = (props: BottomTabBarButtonProps) => { 6 | //if (props.href === "/about") return; 7 | return ( 8 | { 11 | if (process.env.EXPO_OS !== "web") { 12 | Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch( 13 | () => {} 14 | ); 15 | } 16 | props.onPressIn?.(e); 17 | }} 18 | android_ripple={{ 19 | // Adjust the radius to control ripple size 20 | radius: 50, 21 | // Optionally, customize the ripple color 22 | //color: "rgba(0,0,0,0.1)", 23 | }} 24 | /> 25 | ); 26 | }; 27 | 28 | export default HapticButton; 29 | -------------------------------------------------------------------------------- /constants/customThemes.ts: -------------------------------------------------------------------------------- 1 | import { DarkTheme, DefaultTheme } from "@react-navigation/native"; 2 | 3 | const tintColorLight = "#0a7ea4"; 4 | const tintColorDark = "#fff"; 5 | 6 | const CustomDarkTheme = { 7 | ...DarkTheme, 8 | colors: { 9 | ...DarkTheme.colors, 10 | primary: "blue", 11 | tint: tintColorDark, 12 | icon: "#9BA1A6", 13 | tabIconDefault: "#9BA1A6", 14 | tabIconSelected: tintColorDark, 15 | }, 16 | }; 17 | 18 | const CustomLightTheme = { 19 | ...DefaultTheme, 20 | colors: { 21 | ...DefaultTheme.colors, 22 | primary: "deeppink", 23 | /*NavBar related 24 | //text: "red", 25 | //card: "red", 26 | //notification: "red", 27 | //border: "red",*/ 28 | tint: tintColorLight, 29 | icon: "#687076", 30 | tabIconDefault: "#687076", 31 | tabIconSelected: tintColorLight, 32 | }, 33 | }; 34 | 35 | export { CustomLightTheme, CustomDarkTheme }; 36 | -------------------------------------------------------------------------------- /components/HelloWave.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { StyleSheet, Text } from "react-native"; 3 | import Animated, { 4 | Easing, 5 | useAnimatedStyle, 6 | useSharedValue, 7 | withRepeat, 8 | withSequence, 9 | withTiming, 10 | } from "react-native-reanimated"; 11 | 12 | const HelloWave = () => { 13 | const deg = useSharedValue(0); 14 | 15 | useEffect(() => { 16 | deg.value = withRepeat( 17 | withSequence( 18 | withTiming(25, { duration: 150, easing: Easing.inOut(Easing.ease) }), 19 | withTiming(0, { duration: 150 }) 20 | ), 21 | 4 22 | ); 23 | }, []); 24 | 25 | const animatedStyle = useAnimatedStyle(() => ({ 26 | transform: [{ rotate: deg.value + "deg" }], 27 | })); 28 | 29 | return ( 30 | 31 | 👋 32 | 33 | ); 34 | }; 35 | 36 | const ss = StyleSheet.create({ 37 | animatedText: { 38 | fontSize: 28, 39 | marginTop: -10, 40 | }, 41 | }); 42 | 43 | export default HelloWave; 44 | -------------------------------------------------------------------------------- /app/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { ThemeProvider } from "@react-navigation/native"; 2 | import { Stack } from "expo-router"; 3 | import { useMemo } from "react"; 4 | import { useColorScheme } from "react-native"; 5 | import { SafeAreaProvider } from "react-native-safe-area-context"; 6 | import { CustomDarkTheme, CustomLightTheme } from "@/constants/customThemes"; 7 | import { GestureHandlerRootView } from "react-native-gesture-handler"; 8 | 9 | export default function RootLayout() { 10 | const colorScheme = useColorScheme(); 11 | 12 | const theme = useMemo( 13 | () => (colorScheme === "dark" ? CustomDarkTheme : CustomLightTheme), 14 | [colorScheme] 15 | ); 16 | 17 | return ( 18 | 19 | 20 | 21 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /components/ui/WebViewContent.tsx: -------------------------------------------------------------------------------- 1 | import { ExternalPathString } from "expo-router"; 2 | import { CSSProperties } from "react"; 3 | import { Platform, StyleProp, ViewStyle } from "react-native"; 4 | import WebView from "react-native-webview"; 5 | 6 | interface Props { 7 | source: { uri: ExternalPathString }; 8 | style?: StyleProp; 9 | } 10 | 11 | const WebViewContentScrollable = ({ source, style }: Props): JSX.Element => { 12 | if (Platform.OS === "web") { 13 | return ( 14 |