expo-starter/expo-template

still theme not working

tarifalhasan opened this issue · 2 comments

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;

Hi @tarifalhasan
Please check the ThemeToggle to how to switch theme.
Also you can find working example here : https://launchtrack.github.io/expo-starter/

Got it thanks