still theme not working
tarifalhasan opened this issue · 2 comments
tarifalhasan commented
import { StatusBar } from "expo-status-bar";
import {
Image,
Pressable,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
heightPercentageToDP as hp,
widthPercentageToDP as wp,
} from "react-native-responsive-screen";
import { AntDesign, FontAwesome, Fontisto, Octicons } from "@expo/vector-icons";
import { Link } from "expo-router";
import { useColorScheme } from "~/lib/useColorScheme";
const SignIn = () => {
const { toggleColorScheme, colorScheme } = useColorScheme();
console.log(colorScheme);
return (
<View className="flex-1 bg-neutral-50 dark:bg-neutral-950 ">
<StatusBar style="dark" />
<View
style={{ paddingTop: hp(8), paddingHorizontal: wp(4) }}
className="flex-1 gap-10"
>
<AntDesign name="arrowleft" size={26} color="black" />
<View className=" gap-1">
<Text
style={{ fontSize: hp(4) }}
className=" font-bold text-skin-neutral_900 "
>
Welcome Back!
</Text>
<Text
style={{ fontSize: hp(2.1) }}
className=" font-normal text-skin-zing_50"
>
Sign In to your account
</Text>
</View>
<Pressable onPress={toggleColorScheme}>
<Text className=" text-white">Toggle</Text>
</Pressable>
<View style={{}} className=" gap-5">
<View className=" gap-2.5">
<Text
style={{ fontSize: hp(2) }}
className=" text-skin-neutral_900 font-semibold"
>
Email ID
</Text>
<View
style={{ height: hp(8), paddingHorizontal: hp(1.5) }}
className=" bg-skin-gray_50 rounded-xl flex-row items-center gap-2"
>
<Fontisto name="email" size={25} color={"#28B67E"} />
<TextInput
className="flex-1 text-skin-neutral_900 placeholder:text-skin-neutral_900 font-normal"
style={{ fontSize: hp(1.9) }}
placeholder="Enter Your Email"
placeholderTextColor={"#A1A5C1"}
/>
</View>
</View>
<View
style={{ height: hp(8), paddingHorizontal: hp(1.5) }}
className=" bg-skin-gray_50 rounded-xl flex-row items-center gap-2"
>
<Octicons name="lock" size={24} color={"#28B67E"} />
<TextInput
className="flex-1 text-skin-neutral_900 placeholder:text-skin-neutral_900 font-normal"
style={{ fontSize: hp(1.9) }}
placeholder="Enter Your Password"
placeholderTextColor={"#A1A5C1"}
secureTextEntry={false}
/>
<Octicons name="eye" size={24} className=" text-skin-green_600" />
</View>
<View className="flex-row items-center justify-end">
<TouchableOpacity>
<Text
style={{ fontSize: hp(2.1) }}
className=" text-skin-green_600 tracking-wide italic font-semibold"
>
Forgot password?
</Text>
</TouchableOpacity>
</View>
</View>
{/* Sign in button */}
<View>
<TouchableOpacity
style={{ height: hp(7.5) }}
className=" items-center bg-skin-green_600 overflow-hidden rounded-full justify-center "
>
<Text
style={{ fontSize: hp(2) }}
className=" text-white font-semibold"
>
Login
</Text>
</TouchableOpacity>
</View>
<View className="flex items-center">
<Text
style={{
fontSize: hp(2.1),
}}
className=" font-medium text-skin-neutral_900"
>
Don’t have an account?{" "}
<Link
className=" text-skin-green_600 font-semibold"
href={"/signup"}
>
SignUp
</Link>
</Text>
</View>
<View className="flex-row items-center gap-2">
<View
className="flex-1 bg-gray-300"
style={{ height: hp(0.1) }}
></View>
<Text
style={{ fontSize: hp(2.5) }}
className=" text-skin-neutral_900 font-normal"
>
Or Sign In with
</Text>
<View
className="flex-1 bg-gray-300"
style={{ height: hp(0.1) }}
></View>
</View>
{/* Sign in with google or facebook */}
<View className="flex-row justify-center items-center gap-4">
<TouchableOpacity
className="items-center rounded-3xl justify-center bg-gray-100"
style={{ height: hp(8), width: wp(16) }}
>
<Image
source={require("~/assets/images/google-symbol.png")}
style={{
width: hp(4),
height: hp(4),
}}
/>
</TouchableOpacity>
<TouchableOpacity
className="items-center rounded-3xl justify-center bg-gray-100"
style={{ height: hp(8), width: wp(16) }}
>
<FontAwesome name="apple" size={37} color="#000" />
</TouchableOpacity>
<TouchableOpacity
className="items-center rounded-3xl justify-center bg-gray-100"
style={{ height: hp(8), width: wp(16) }}
>
<FontAwesome name="facebook" size={37} color="#1278F3" />
</TouchableOpacity>
</View>
</View>
</View>
);
};
export default SignIn;
younes200 commented
Hi @tarifalhasan
Please check the ThemeToggle to how to switch theme.
Also you can find working example here : https://launchtrack.github.io/expo-starter/
tarifalhasan commented
Got it thanks