Skip to content

Add dark mode theme support #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SarthakB11 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add dark mode theme support #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 42 additions & 7 deletions app/(tabs)/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,48 @@
import { Stack } from 'expo-router';
import { Tabs } from 'expo-router';
import { TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useTheme } from '../themeContext';
import React from 'react';

export default function AppLayout() {
export default function TabLayout() {
const router = useRouter();
const { isDarkMode } = useTheme();

return (
<Stack
<Tabs
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="index" />
</Stack>
tabBarActiveTintColor: '#6B21A8',
tabBarInactiveTintColor: isDarkMode ? '#9CA3AF' : '#6B7280',
tabBarStyle: {
backgroundColor: isDarkMode ? '#1F2937' : '#FFFFFF',
borderTopColor: isDarkMode ? '#374151' : '#E5E7EB',
},
headerStyle: {
backgroundColor: isDarkMode ? '#121212' : '#FFFFFF',
},
headerTintColor: isDarkMode ? '#F3F4F6' : '#1F2937',
headerRight: () => (
<TouchableOpacity
onPress={() => router.push('/settings')}
style={{ marginRight: 15 }}
>
<Ionicons
name="settings-outline"
size={24}
color={isDarkMode ? '#F3F4F6' : '#1F2937'}
/>
</TouchableOpacity>
),
}}
>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color }) => <Ionicons name="home-outline" size={24} color={color} />,
}}
/>
</Tabs>
);
}
151 changes: 86 additions & 65 deletions app/(tabs)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import * as SecureStore from 'expo-secure-store';
import Constants from 'expo-constants';
import { useUser } from "../userContext";
import { AppState } from "react-native";
import { useTheme } from "../themeContext";
import ThemeToggle from "../../components/ThemeToggle";

const gov_logo = require('@/assets/images/gov_logo.png');
const billion_readers = require('@/assets/images/billion_readers.png');
Expand Down Expand Up @@ -55,6 +57,7 @@ const VideoList = () => {
const router = useRouter();
const db = useSQLiteContext();
const { role, setRole } = useUser();
const { isDarkMode } = useTheme();
const [open, setOpen] = useState(false);
const [language, setLanguage] = useState("en");
const [loading, setLoading] = useState(true);
Expand Down Expand Up @@ -186,8 +189,7 @@ const VideoList = () => {
};

return (
<View className="bg-purple-700 h-full flex-1">

<View className={`flex-1 ${isDarkMode ? 'bg-background-dark' : 'bg-purple-700'}`}>
<View className="flex flex-row justify-between px-4 py-6 items-center mt-10 gap-3">
<Image source={gov_logo} className="w-[100px] h-[70px] flex-1"
style={{ resizeMode: "contain" }} />
Expand All @@ -200,11 +202,34 @@ const VideoList = () => {
if (levelOpen) setLevelOpen(false);
}}
setValue={handleLanguageChange}
containerStyle={{ maxWidth: 100, paddingVertical: 0, paddingHorizontal: 0, flex: 1.6 }}
style={{ height: 40, minHeight: 30 }}
textStyle={{ fontSize: 11 }}
arrowIconStyle={{ marginHorizontal: -5 }}
style={{
borderColor: isDarkMode ? '#374151' : '#E5E7EB',
backgroundColor: isDarkMode ? '#1F2937' : '#FFFFFF',
width: 112,
height: 40,
zIndex: 20
}}
textStyle={{
color: isDarkMode ? '#F3F4F6' : '#1F2937',
}}
dropDownContainerStyle={{
borderColor: isDarkMode ? '#374151' : '#E5E7EB',
backgroundColor: isDarkMode ? '#1F2937' : '#FFFFFF',
}}
theme={isDarkMode ? "DARK" : "LIGHT"}
/>
<View className="flex flex-row items-center">
<ThemeToggle showLabel={false} size={20} containerStyle={{ marginRight: 8 }} />
<Image source={billion_readers} className="w-[120px] h-[70px]"
style={{ resizeMode: "contain" }} />
</View>
</View>

<View className="flex flex-row justify-between px-4 items-center mb-5">
<Text className={`text-lg font-bold ${isDarkMode ? 'text-text-dark' : 'text-white'}`}>
Watch and Learn
</Text>

<DropDownPicker
open={levelOpen}
value={level}
Expand All @@ -214,74 +239,70 @@ const VideoList = () => {
if (open) setOpen(false);
}}
setValue={handleLevelChange}
containerStyle={{ maxWidth: 100, paddingVertical: 0, flex: 2, paddingHorizontal: 0 }}
style={{ height: 40, minHeight: 30 }}
textStyle={{ fontSize: 11 }}
arrowIconStyle={{ marginHorizontal: -5 }}
style={{
borderColor: isDarkMode ? '#374151' : '#E5E7EB',
backgroundColor: isDarkMode ? '#1F2937' : '#FFFFFF',
width: 112,
height: 40,
zIndex: 10
}}
textStyle={{
color: isDarkMode ? '#F3F4F6' : '#1F2937',
}}
dropDownContainerStyle={{
borderColor: isDarkMode ? '#374151' : '#E5E7EB',
backgroundColor: isDarkMode ? '#1F2937' : '#FFFFFF',
}}
theme={isDarkMode ? "DARK" : "LIGHT"}
/>
<TouchableOpacity className="w-[100px] h-[70px] flex-1" onLongPress={() => router.push(`/login`)} delayLongPress={5000}>
<Image source={billion_readers} className="w-full h-full"
style={{ resizeMode: "contain" }}
/>
</TouchableOpacity>
</View>

{
loading ? (
<FlatList
data={[1, 2, 3, 4]}
keyExtractor={(item) => item.toString()}
renderItem={() => (
<View className="flex flex-row justify-between p-4 border-b-[1px] border-gray-100 h-[130px]">
<View className="bg-gray-100 w-[45%] h-[100px] rounded" />
<View className="w-[50%] pl-2 justify-between">
<View className="bg-gray-100 h-5 w-3/4 rounded mb-2" />
<View className="bg-gray-100 h-5 w-1/2 rounded" />
</View>
</View>
)}
/>
) : (<View>
<View className="px-4 mt-2 pb-24">
<FlatList
contentContainerStyle={{ paddingBottom: 140 }}
data={videoDetails.filter(item => level === "all" || item.level === level)}
data={level === "all" ? videoDetails : videoDetails.filter(item => item.level === level)}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View className="flex flex-row items-cente justify-between p-2 border-b-[1px] border-gray-300 h-fit min-h-[130px]">
<TouchableOpacity
className="w-[45%]"
onPress={() => handleVideoPress(item)}
>
<Image
source={videoLanguages[item.id] === "en" ? item.thumbnail_en : item.thumbnail_punjabi}
className="h-[100px] w-full"
style={styles.thumbnail}
/>
</TouchableOpacity>

{/* Video Details along with pdf and translation option */}
<View className="flex w-[55%] pl-2 justify-between items-start h-[97px]">
<Text className="text-white text-left text-xl w-full font-bold break-words">
{videoLanguages[item.id] === "en" ? item.english_title : item.punjabi_title}
</Text>
<View className="flex gap-2 flex-row">
<TouchableOpacity
onPress={() => toggleVideoLanguage(item.id)}
className="bg-white p-2.5 rounded-full">
<Image className="w-6 h-6" source={translate_img} style={{ tintColor: 'black' }} />
</TouchableOpacity>
<TouchableOpacity
onPress={()=>handlePdfPress(item)}
className="bg-white p-2.5 rounded-full">
<Image className="w-6 h-6" source={pdf_img} style={{ tintColor: 'black' }} />
</TouchableOpacity>
numColumns={2}
showsVerticalScrollIndicator={false}
columnWrapperStyle={{ justifyContent: "space-between", marginBottom: 20 }}
renderItem={({ item }) => {
const isEnglish = videoLanguages[item.id] === "en";
return (
<View className={`w-[48%] rounded-xl overflow-hidden ${isDarkMode ? 'bg-surface-dark' : 'bg-white'}`}>

<TouchableOpacity onPress={() => handleVideoPress(item)}>
<Image
source={isEnglish ? item.thumbnail_en : item.thumbnail_punjabi}
className="w-full h-32"
style={{ resizeMode: "cover" }}
/>
</TouchableOpacity>

<View className="p-2">
<Text className={`font-semibold ${isDarkMode ? 'text-text-dark' : 'text-gray-800'}`} numberOfLines={2}>
{isEnglish ? item.english_title : item.punjabi_title}
</Text>

<View className="flex flex-row justify-between mt-2">
<TouchableOpacity
onPress={() => toggleVideoLanguage(item.id)}
className="bg-purple-600 p-2 rounded-md"
>
<Image source={translate_img} className="w-5 h-5" />
</TouchableOpacity>

<TouchableOpacity
onPress={() => handlePdfPress(item)}
className="bg-purple-600 p-2 rounded-md"
>
<Image source={pdf_img} className="w-5 h-5" />
</TouchableOpacity>
</View>
</View>
</View>
</View>
)}
);
}}
/>
</View>
)}
</View>
);
};
Expand Down
Loading