Skip to content

Instantly share code, notes, and snippets.

@burakorkmez

burakorkmez/CategoryFilter.jsx

Last active December 9, 2025 09:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save burakorkmez/11bc1e5939bcc8d0a4b2f6bf1c2c6a3d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save burakorkmez/11bc1e5939bcc8d0a4b2f6bf1c2c6a3d to your computer and use it in GitHub Desktop.
Download ZIP
REACT NATIVE -- Recipe Finder App
Raw
auth.styles.js
import { StyleSheet, Dimensions } from "react-native";
import { COLORS } from "../../constants/colors";
const { height } = Dimensions.get("window");
export const authStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
keyboardView: {
flex: 1,
},
scrollContent: {
flexGrow: 1,
paddingHorizontal: 24,
paddingTop: 40,
},
imageContainer: {
height: height * 0.3,
marginBottom: 30,
justifyContent: "center",
alignItems: "center",
},
image: {
width: 320,
height: 320,
},
title: {
fontSize: 28,
fontWeight: "bold",
color: COLORS.text,
textAlign: "center",
marginBottom: 40,
},
subtitle: {
fontSize: 16,
color: COLORS.textLight,
textAlign: "center",
marginBottom: 30,
},
formContainer: {
flex: 1,
},
inputContainer: {
marginBottom: 20,
position: "relative",
},
textInput: {
fontSize: 16,
color: COLORS.text,
paddingVertical: 16,
paddingHorizontal: 20,
backgroundColor: COLORS.background,
borderRadius: 12,
borderWidth: 1,
borderColor: COLORS.border,
},
eyeButton: {
position: "absolute",
right: 16,
top: 16,
padding: 4,
},
authButton: {
backgroundColor: COLORS.primary,
paddingVertical: 18,
borderRadius: 12,
marginTop: 20,
marginBottom: 30,
},
buttonDisabled: {
opacity: 0.7,
},
buttonText: {
fontSize: 16,
fontWeight: "600",
color: COLORS.white,
textAlign: "center",
},
linkContainer: {
alignItems: "center",
paddingBottom: 20,
},
linkText: {
fontSize: 16,
color: COLORS.textLight,
},
link: {
color: COLORS.primary,
fontWeight: "600",
},
});
Raw
CategoryFilter.jsx
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { Image } from "expo-image";
import { homeStyles } from "../assets/styles/home.styles";
export default function CategoryFilter({ categories, selectedCategory, onSelectCategory }) {
return (
<View style={homeStyles.categoryFilterContainer}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={homeStyles.categoryFilterScrollContent}
>
{categories.map((category) => {
const isSelected = selectedCategory === category.name;
return (
<TouchableOpacity
key={category.id}
style={[homeStyles.categoryButton, isSelected && homeStyles.selectedCategory]}
onPress={() => onSelectCategory(category.name)}
activeOpacity={0.7}
>
<Image
source={{ uri: category.image }}
style={[homeStyles.categoryImage, isSelected && homeStyles.selectedCategoryImage]}
contentFit="cover"
transition={300}
/>
<Text
style={[homeStyles.categoryText, isSelected && homeStyles.selectedCategoryText]}
>
{category.name}
</Text>
</TouchableOpacity>
);
})}
</ScrollView>
</View>
);
}
Raw
colors.js
const coffeeTheme = {
primary: "#8B593E",
background: "#FFF8F3",
text: "#4A3428",
border: "#E5D3B7",
white: "#FFFFFF",
textLight: "#9A8478",
card: "#FFFFFF",
shadow: "#000000",
};
const forestTheme = {
primary: "#2E7D32",
background: "#E8F5E9",
text: "#1B5E20",
border: "#C8E6C9",
white: "#FFFFFF",
textLight: "#66BB6A",
card: "#FFFFFF",
shadow: "#000000",
};
const purpleTheme = {
primary: "#6A1B9A",
background: "#F3E5F5",
text: "#4A148C",
border: "#D1C4E9",
white: "#FFFFFF",
textLight: "#BA68C8",
card: "#FFFFFF",
shadow: "#000000",
};
const oceanTheme = {
primary: "#0277BD",
background: "#E1F5FE",
text: "#01579B",
border: "#B3E5FC",
white: "#FFFFFF",
textLight: "#4FC3F7",
card: "#FFFFFF",
shadow: "#000000",
};
const sunsetTheme = {
primary: "#FF7E67",
background: "#FFF3F0",
text: "#2C1810",
border: "#FFD5CC",
white: "#FFFFFF",
textLight: "#FFA494",
card: "#FFFFFF",
shadow: "#000000",
};
const mintTheme = {
primary: "#00B5B5",
background: "#E8F6F6",
text: "#006666",
border: "#B2E8E8",
white: "#FFFFFF",
textLight: "#66D9D9",
card: "#FFFFFF",
shadow: "#000000",
};
const midnightTheme = {
primary: "#2C3E50",
background: "#F4F6F7",
text: "#1A2530",
border: "#D5D8DC",
white: "#FFFFFF",
textLight: "#7F8C8D",
card: "#FFFFFF",
shadow: "#000000",
};
const roseGoldTheme = {
primary: "#E0BFB8",
background: "#FDF6F5",
text: "#4A3B38",
border: "#F2D9D5",
white: "#FFFFFF",
textLight: "#C9A9A6",
card: "#FFFFFF",
shadow: "#000000",
};
export const THEMES = {
coffee: coffeeTheme,
forest: forestTheme,
purple: purpleTheme,
ocean: oceanTheme,
sunset: sunsetTheme,
mint: mintTheme,
midnight: midnightTheme,
roseGold: roseGoldTheme,
};
// 👇 change this to switch theme
export const COLORS = THEMES.purple;
Raw
favorites.styles.js
import { StyleSheet } from "react-native";
import { COLORS } from "../../constants/colors";
export const favoritesStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
header: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: 20,
paddingVertical: 16,
},
title: {
fontSize: 32,
fontWeight: "800",
color: COLORS.text,
letterSpacing: -0.5,
},
logoutButton: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: COLORS.card,
justifyContent: "center",
alignItems: "center",
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
},
statsContainer: {
flexDirection: "row",
paddingHorizontal: 16,
marginTop: 24,
gap: 12,
},
statCard: {
flex: 1,
backgroundColor: COLORS.card,
borderRadius: 16,
padding: 16,
alignItems: "center",
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
statIcon: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
marginBottom: 8,
},
statValue: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
},
recipesSection: {
paddingHorizontal: 16,
marginTop: 24,
paddingBottom: 32,
},
recipesGrid: {
gap: 16,
},
row: {
justifyContent: "space-between",
},
emptyState: {
alignItems: "center",
paddingVertical: 64,
paddingHorizontal: 32,
},
emptyIconContainer: {
width: 120,
height: 120,
borderRadius: 60,
backgroundColor: COLORS.card,
justifyContent: "center",
alignItems: "center",
marginBottom: 24,
borderWidth: 2,
borderColor: COLORS.border,
borderStyle: "dashed",
},
emptyTitle: {
fontSize: 24,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 24,
},
exploreButton: {
flexDirection: "row",
alignItems: "center",
backgroundColor: COLORS.primary,
paddingHorizontal: 24,
paddingVertical: 12,
borderRadius: 24,
gap: 8,
},
exploreButtonText: {
fontSize: 16,
fontWeight: "600",
color: COLORS.white,
},
});
Raw
home.styles.js
import { StyleSheet, Dimensions } from "react-native";
import { COLORS } from "../../constants/colors";
const { width } = Dimensions.get("window");
const cardWidth = (width - 48) / 2;
export const homeStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
scrollContent: {
paddingBottom: 32,
},
welcomeSection: {
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom: 16,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
welcomeText: {
fontSize: 32,
fontWeight: "800",
color: COLORS.text,
letterSpacing: -0.5,
},
featuredSection: {
paddingHorizontal: 20,
marginBottom: 24,
},
featuredCard: {
borderRadius: 24,
overflow: "hidden",
backgroundColor: COLORS.card,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 12,
},
featuredImageContainer: {
height: 240,
backgroundColor: COLORS.primary,
position: "relative",
},
featuredImage: {
width: "100%",
height: "100%",
},
featuredOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.3)",
justifyContent: "space-between",
padding: 20,
},
featuredBadge: {
backgroundColor: COLORS.primary,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 20,
alignSelf: "flex-start",
},
featuredBadgeText: {
color: COLORS.white,
fontSize: 12,
fontWeight: "600",
},
featuredContent: {
justifyContent: "flex-end",
},
featuredTitle: {
fontSize: 24,
fontWeight: "800",
color: COLORS.white,
marginBottom: 12,
textShadowColor: "rgba(0,0,0,0.3)",
textShadowOffset: { width: 0, height: 2 },
textShadowRadius: 4,
},
featuredMeta: {
flexDirection: "row",
gap: 16,
},
metaItem: {
flexDirection: "row",
alignItems: "center",
gap: 4,
},
metaText: {
fontSize: 14,
color: COLORS.white,
fontWeight: "600",
},
recipesSection: {
paddingHorizontal: 20,
marginTop: 8,
},
sectionHeader: {
marginBottom: 16,
},
sectionTitle: {
fontSize: 22,
fontWeight: "800",
color: COLORS.text,
letterSpacing: -0.5,
},
recipesGrid: {
gap: 16,
},
row: {
justifyContent: "space-between",
gap: 16,
},
emptyState: {
alignItems: "center",
paddingVertical: 64,
paddingHorizontal: 32,
},
emptyTitle: {
fontSize: 20,
fontWeight: "700",
color: COLORS.text,
marginTop: 16,
marginBottom: 8,
},
emptyDescription: {
fontSize: 14,
color: COLORS.textLight,
textAlign: "center",
},
categoryFilterContainer: {
marginVertical: 16,
},
categoryFilterScrollContent: {
paddingHorizontal: 16,
gap: 12,
},
categoryButton: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundColor: COLORS.card,
paddingVertical: 12,
paddingHorizontal: 16,
borderRadius: 20,
borderWidth: 1,
borderColor: COLORS.border,
minWidth: 80,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
selectedCategory: {
backgroundColor: COLORS.primary,
borderColor: COLORS.primary,
shadowOpacity: 0.15,
},
categoryImage: {
width: 40,
height: 40,
borderRadius: 20,
marginBottom: 4,
backgroundColor: COLORS.border,
},
selectedCategoryImage: {
borderWidth: 2,
borderColor: COLORS.white,
},
categoryText: {
fontSize: 12,
fontWeight: "600",
color: COLORS.text,
textAlign: "center",
},
selectedCategoryText: {
color: COLORS.white,
},
});
export const recipeCardStyles = StyleSheet.create({
container: {
width: cardWidth,
backgroundColor: COLORS.card,
borderRadius: 16,
marginBottom: 16,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
overflow: "hidden",
},
imageContainer: {
position: "relative",
height: 140,
},
image: {
width: "100%",
height: "100%",
backgroundColor: COLORS.border,
},
content: {
padding: 12,
},
title: {
fontSize: 15,
fontWeight: "700",
color: COLORS.text,
marginBottom: 4,
lineHeight: 20,
},
description: {
fontSize: 12,
color: COLORS.textLight,
marginBottom: 8,
lineHeight: 16,
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
timeContainer: {
flexDirection: "row",
alignItems: "center",
},
timeText: {
fontSize: 11,
color: COLORS.textLight,
marginLeft: 4,
fontWeight: "500",
},
servingsContainer: {
flexDirection: "row",
alignItems: "center",
},
servingsText: {
fontSize: 11,
color: COLORS.textLight,
marginLeft: 4,
fontWeight: "500",
},
});
Raw
LoadingSpinner.jsx
import { View, ActivityIndicator, Text, StyleSheet } from "react-native";
import { COLORS } from "../constants/colors";
export default function LoadingSpinner({ message = "Loading...", size = "large" }) {
return (
<View style={styles.container}>
<View style={styles.content}>
<ActivityIndicator size={size} color={COLORS.primary} />
<Text style={styles.message}>{message}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 32,
},
content: {
alignItems: "center",
gap: 16,
},
message: {
fontSize: 16,
color: COLORS.textLight,
textAlign: "center",
},
});
Raw
NoFavoritesFound.jsx
import { useRouter } from "expo-router";
import { View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { COLORS } from "@/constants/colors";
import { favoritesStyles } from "@/assets/styles/favorites.styles";
function NoFavoritesFound() {
const router = useRouter();
return (
<View style={favoritesStyles.emptyState}>
<View style={favoritesStyles.emptyIconContainer}>
<Ionicons name="heart-outline" size={80} color={COLORS.textLight} />
</View>
<Text style={favoritesStyles.emptyTitle}>No favorites yet</Text>
<TouchableOpacity style={favoritesStyles.exploreButton} onPress={() => router.push("/")}>
<Ionicons name="search" size={18} color={COLORS.white} />
<Text style={favoritesStyles.exploreButtonText}>Explore Recipes</Text>
</TouchableOpacity>
</View>
);
}
export default NoFavoritesFound;
Raw
recipe-detail.styles.js
import { StyleSheet, Dimensions } from "react-native";
import { COLORS } from "../../constants/colors";
const { height } = Dimensions.get("window");
export const recipeDetailStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
headerContainer: {
height: height * 0.5,
position: "relative",
},
imageContainer: {
...StyleSheet.absoluteFillObject,
},
headerImage: {
width: "100%",
height: "120%",
},
gradientOverlay: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: "60%",
},
floatingButtons: {
position: "absolute",
top: 50,
left: 16,
right: 16,
flexDirection: "row",
justifyContent: "space-between",
},
floatingButton: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: "rgba(0, 0, 0, 0.3)",
justifyContent: "center",
alignItems: "center",
backdropFilter: "blur(10px)",
},
titleSection: {
position: "absolute",
bottom: 30,
left: 16,
right: 16,
},
categoryBadge: {
alignSelf: "flex-start",
backgroundColor: COLORS.primary,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 20,
marginBottom: 12,
},
categoryText: {
color: COLORS.white,
fontSize: 12,
fontWeight: "600",
textTransform: "uppercase",
letterSpacing: 1,
},
recipeTitle: {
fontSize: 32,
fontWeight: "bold",
color: COLORS.white,
marginBottom: 8,
textShadowColor: "rgba(0, 0, 0, 0.75)",
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 3,
},
locationRow: {
flexDirection: "row",
alignItems: "center",
gap: 6,
marginBottom: 10,
},
locationText: {
color: COLORS.white,
fontSize: 16,
fontWeight: "500",
textShadowColor: "rgba(0, 0, 0, 0.75)",
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 2,
},
contentSection: {
backgroundColor: COLORS.background,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
marginTop: -30,
paddingTop: 30,
paddingHorizontal: 16,
paddingBottom: 40,
},
statsContainer: {
flexDirection: "row",
gap: 12,
marginBottom: 32,
},
statCard: {
flex: 1,
backgroundColor: COLORS.card,
borderRadius: 20,
padding: 20,
alignItems: "center",
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
statIconContainer: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
marginBottom: 12,
},
statValue: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 4,
},
statLabel: {
fontSize: 12,
color: COLORS.textLight,
textAlign: "center",
fontWeight: "500",
},
sectionContainer: {
marginBottom: 32,
},
sectionTitleRow: {
flexDirection: "row",
alignItems: "center",
gap: 12,
flex: 1,
marginBottom: 16,
},
sectionIcon: {
width: 32,
height: 32,
borderRadius: 16,
justifyContent: "center",
alignItems: "center",
},
sectionTitle: {
fontSize: 22,
fontWeight: "bold",
color: COLORS.text,
flex: 1,
},
countBadge: {
backgroundColor: COLORS.primary + "20",
paddingHorizontal: 10,
paddingVertical: 4,
borderRadius: 12,
},
countText: {
color: COLORS.primary,
fontSize: 12,
fontWeight: "600",
},
videoCard: {
height: 220,
borderRadius: 20,
overflow: "hidden",
backgroundColor: COLORS.card,
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
webview: {
flex: 1,
},
ingredientsGrid: {
gap: 12,
},
ingredientCard: {
flexDirection: "row",
alignItems: "center",
backgroundColor: COLORS.card,
padding: 16,
borderRadius: 16,
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
gap: 12,
},
ingredientNumber: {
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: COLORS.primary + "20",
justifyContent: "center",
alignItems: "center",
},
ingredientNumberText: {
color: COLORS.primary,
fontSize: 12,
fontWeight: "bold",
},
ingredientText: {
flex: 1,
fontSize: 16,
color: COLORS.text,
lineHeight: 22,
},
ingredientCheck: {
opacity: 0.5,
},
instructionsContainer: {
gap: 16,
},
instructionCard: {
flexDirection: "row",
backgroundColor: COLORS.card,
borderRadius: 20,
padding: 20,
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
gap: 16,
},
stepIndicator: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
},
stepNumber: {
color: COLORS.white,
fontSize: 16,
fontWeight: "bold",
},
instructionContent: {
flex: 1,
},
instructionText: {
fontSize: 16,
color: COLORS.text,
lineHeight: 24,
marginBottom: 12,
},
instructionFooter: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
stepLabel: {
fontSize: 12,
color: COLORS.textLight,
fontWeight: "500",
},
completeButton: {
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: COLORS.primary + "20",
justifyContent: "center",
alignItems: "center",
},
primaryButton: {
borderRadius: 16,
overflow: "hidden",
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 8,
elevation: 4,
},
buttonGradient: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 16,
gap: 10,
},
buttonText: {
color: COLORS.white,
fontSize: 16,
fontWeight: "bold",
},
secondaryButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: COLORS.card,
paddingVertical: 16,
borderRadius: 16,
borderWidth: 2,
borderColor: COLORS.primary,
gap: 10,
},
secondaryButtonText: {
color: COLORS.primary,
fontSize: 16,
fontWeight: "bold",
},
errorContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
errorContent: {
alignItems: "center",
padding: 32,
},
errorTitle: {
fontSize: 28,
fontWeight: "bold",
color: COLORS.white,
marginTop: 20,
marginBottom: 12,
},
errorDescription: {
fontSize: 16,
color: COLORS.white,
textAlign: "center",
lineHeight: 22,
marginBottom: 32,
opacity: 0.9,
},
errorButton: {
backgroundColor: COLORS.white,
paddingHorizontal: 32,
paddingVertical: 16,
borderRadius: 25,
},
errorButtonText: {
color: COLORS.primary,
fontSize: 16,
fontWeight: "bold",
},
});
Raw
RecipeCard.jsx
import { View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { useRouter } from "expo-router";
import { COLORS } from "../constants/colors";
import { recipeCardStyles } from "../assets/styles/home.styles";
export default function RecipeCard({ recipe }) {
const router = useRouter();
return (
<TouchableOpacity
style={recipeCardStyles.container}
onPress={() => router.push(`/recipe/${recipe.id}`)}
activeOpacity={0.8}
>
<View style={recipeCardStyles.imageContainer}>
<Image
source={{ uri: recipe.image }}
style={recipeCardStyles.image}
contentFit="cover"
transition={300}
/>
</View>
<View style={recipeCardStyles.content}>
<Text style={recipeCardStyles.title} numberOfLines={2}>
{recipe.title}
</Text>
{recipe.description && (
<Text style={recipeCardStyles.description} numberOfLines={2}>
{recipe.description}
</Text>
)}
<View style={recipeCardStyles.footer}>
{recipe.cookTime && (
<View style={recipeCardStyles.timeContainer}>
<Ionicons name="time-outline" size={14} color={COLORS.textLight} />
<Text style={recipeCardStyles.timeText}>{recipe.cookTime}</Text>
</View>
)}
{recipe.servings && (
<View style={recipeCardStyles.servingsContainer}>
<Ionicons name="people-outline" size={14} color={COLORS.textLight} />
<Text style={recipeCardStyles.servingsText}>{recipe.servings}</Text>
</View>
)}
</View>
</View>
</TouchableOpacity>
);
}
Raw
RecipeNotFound.jsx
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { Text, TouchableOpacity, View } from "react-native";
import { recipeDetailStyles } from "../assets/styles/recipe-detail.styles";
import { COLORS } from "../constants/colors";
import { useRouter } from "expo-router";
const RecipeNotFound = () => {
const router = useRouter();
return (
<LinearGradient
colors={[COLORS.primary, COLORS.background]}
style={recipeDetailStyles.errorContainer}
>
<View style={recipeDetailStyles.errorContent}>
<Ionicons name="restaurant-outline" size={80} color={COLORS.white} />
<Text style={recipeDetailStyles.errorTitle}>Recipe not found</Text>
<Text style={recipeDetailStyles.errorDescription}>
Sorry, we couldn&apos;t find this recipe. Please try again.
</Text>
<TouchableOpacity style={recipeDetailStyles.errorButton} onPress={() => router.back()}>
<Text style={recipeDetailStyles.errorButtonText}>Go Back</Text>
</TouchableOpacity>
</View>
</LinearGradient>
);
};
export default RecipeNotFound;
Raw
search.styles.js
import { StyleSheet } from "react-native";
import { COLORS } from "../../constants/colors";
export const searchStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
searchSection: {
paddingHorizontal: 16,
paddingTop: 16,
},
searchContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: COLORS.card,
borderRadius: 16,
paddingHorizontal: 16,
paddingVertical: 12,
borderWidth: 1,
borderColor: COLORS.border,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
searchIcon: {
marginRight: 12,
},
searchInput: {
flex: 1,
fontSize: 16,
color: COLORS.text,
},
clearButton: {
padding: 4,
},
quickFilters: {
marginTop: 20,
},
filterLabel: {
fontSize: 16,
fontWeight: "600",
color: COLORS.text,
marginBottom: 12,
},
filterButtons: {
flexDirection: "row",
gap: 12,
},
quickFilterButton: {
backgroundColor: COLORS.card,
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
borderWidth: 1,
borderColor: COLORS.border,
},
activeQuickFilter: {
backgroundColor: COLORS.primary,
borderColor: COLORS.primary,
},
quickFilterText: {
fontSize: 14,
fontWeight: "500",
color: COLORS.text,
},
activeQuickFilterText: {
color: COLORS.white,
},
resultsSection: {
flex: 1,
paddingHorizontal: 16,
marginTop: 8,
},
resultsHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
marginTop: 16,
},
resultsTitle: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
flex: 1,
},
resultsCount: {
fontSize: 14,
color: COLORS.textLight,
fontWeight: "500",
},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
recipesGrid: {
gap: 16,
paddingBottom: 32,
},
row: {
justifyContent: "space-between",
},
emptyState: {
flex: 1,
justifyContent: "center",
alignItems: "center",
paddingVertical: 64,
},
emptyTitle: {
fontSize: 20,
fontWeight: "bold",
color: COLORS.text,
marginTop: 16,
marginBottom: 8,
},
emptyDescription: {
fontSize: 14,
color: COLORS.textLight,
textAlign: "center",
lineHeight: 20,
},
});
@pavanuthsara
Copy link

pavanuthsara commented Aug 18, 2025

Thank you!

@tieharuna
Copy link

tieharuna commented Aug 22, 2025

greate job

@Mahmoud-walid
Copy link

Mahmoud-walid commented Aug 26, 2025

thanks bro

@bekhruzbekDev
Copy link

bekhruzbekDev commented Aug 28, 2025

cool

@Veron-kabu
Copy link

Veron-kabu commented Sep 2, 2025

🔥

@adityaa-nikam
Copy link

adityaa-nikam commented Sep 14, 2025

thanks bro

@AKASH-GPT-1678
Copy link

AKASH-GPT-1678 commented Sep 22, 2025

Thanks Brother

@shaafi56
Copy link

shaafi56 commented Sep 30, 2025

thanks brother

@Mik56779
Copy link

Mik56779 commented Oct 2, 2025

thanks bro

@waleedkhalon332-hue
Copy link

waleedkhalon332-hue commented Oct 4, 2025

love from pakistan bro

@rocksun1983
Copy link

rocksun1983 commented Oct 10, 2025

This is great

@wadmazaka
Copy link

wadmazaka commented Oct 11, 2025

big love

@firaol20
Copy link

firaol20 commented Oct 21, 2025

big respect

@AchenyuBk
Copy link

AchenyuBk commented Oct 24, 2025

On God

@NhonDuc
Copy link

NhonDuc commented Nov 23, 2025

thank you for everything!!

@akpathan
Copy link

akpathan commented Dec 9, 2025

Thanks brother.
Good work.
Love from dev to dev

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment