Skip to content

Commit

Permalink
ft (fingerprint modal): made the modal reusable, and added slide in a…
Browse files Browse the repository at this point in the history 
…nimations
  • Loading branch information
@mr3nz1
mr3nz1 committed May 4, 2024
1 parent 5dae513 commit 28f976f
Show file tree
Hide file tree
Showing 7 changed files with 252 additions and 83 deletions.
145 changes: 129 additions & 16 deletions app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,77 @@ import { Text, View } from "@/components/Themed";
import Button from "@/components/UI/Button";
import { Colors } from "@/constants/Colors";
import Typography from "@/constants/Typography";
import { Image, ScrollView, } from "react-native";
import { Image, ScrollView } from "react-native";
import { ThemeContext } from "@/ctx/ThemeContext";
import { useContext,} from "react";
import React, { useContext, useEffect } from "react";
import * as LocalAuthentication from "expo-local-authentication";
import ModalContainer from "@/components/UI/Modal";
import { useModal } from "@/ctx/ModalContext";
import Animated, {
useAnimatedStyle,
useSharedValue,
withRepeat,
withTiming,
} from "react-native-reanimated";
import { LoadingIcon } from "@/components/UI/Icons";

export default function SetYourFingerPrint() {
const { theme, changeTheme } = useContext(ThemeContext);
const modal = useModal();

const rotationValue = useSharedValue(0);

useEffect(() => {
rotationValue.value = withRepeat(withTiming(1, { duration: 2000 }), -1);
}, []);

const animatedStyle = useAnimatedStyle(() => ({
transform: [{ rotate: `${rotationValue.value * 360}deg` }],
}));

return (
<>
<ScrollView
contentContainerStyle={{
paddingHorizontal: 20,
height: "100%",
backgroundColor: theme === 'light'
? Colors.others.white
: Colors.others.black,
backgroundColor:
theme === "light" ? Colors.others.white : Colors.others.black,
}}
>
<View
style={{
height: "100%",
justifyContent: "space-between",
paddingVertical: 20,
backgroundColor:
theme === "light" ? Colors.others.white : Colors.others.black,
}}
>
<Text style={[Typography.regular.xLarge, { textAlign: "center" }]}>
<Text
style={[
Typography.regular.xLarge,
{
textAlign: "center",
color:
theme === "light"
? Colors.grayScale._900
: Colors.others.white,
},
]}
>
Add a fingerprint to make your account more secure.
</Text>

<View>
<Image source={require("@/assets/images/fingerprint.png")} />
</View>
<Image source={require("@/assets/images/fingerprint.png")} />

<View style={{ gap: 60 }}>
<View
style={{
gap: 60,
backgroundColor:
theme === "light" ? Colors.others.white : Colors.others.black,
}}
>
<Text
style={[
Typography.regular.xLarge,
Expand All @@ -47,6 +83,10 @@ export default function SetYourFingerPrint() {
shadowOffset: { width: -2, height: 20 },
shadowOpacity: 1,
shadowRadius: 20,
color:
theme === "light"
? Colors.grayScale._900
: Colors.others.white,
},
]}
>
Expand All @@ -59,9 +99,19 @@ export default function SetYourFingerPrint() {
alignItems: "center",
width: "100%",
gap: 4,
backgroundColor:
theme === "light" ? Colors.others.white : Colors.others.black,
}}
>
<View style={{ flexGrow: 1 }}>
<View
style={{
flexGrow: 1,
backgroundColor:
theme === "light"
? Colors.others.white
: Colors.others.black,
}}
>
<Button
backgroundColor={Colors.main.primary._100}
title="Skip"
Expand All @@ -77,6 +127,10 @@ export default function SetYourFingerPrint() {
shadowOffset: { width: 6, height: 6 },
shadowOpacity: 1,
shadowRadius: 20,
backgroundColor:
theme === "light"
? Colors.others.white
: Colors.others.black,
},
]}
>
Expand All @@ -86,13 +140,72 @@ export default function SetYourFingerPrint() {
shadowColor={Colors.main.primary._500}
onPress={async () => {
try {
const x =
await LocalAuthentication.supportedAuthenticationTypesAsync();
const { success } =
await LocalAuthentication.authenticateAsync();

console.log(x);
const res = await LocalAuthentication.authenticateAsync();
if (success) {
modal.show({
children: (
<View
style={{
padding: 40,
alignItems: "center",
gap: 20,
borderRadius: 48,
}}
>
<Image
source={require("@/assets/images/SetYourFingerPrintModalAccountImage.png")}
/>
<View
style={{
gap: 20,
backgroundColor:
theme === "light"
? Colors.others.white
: Colors.grayScale._900,
}}
>
<Text
style={[
Typography.heading._4,
{
color: Colors.main.primary._500,
textAlign: "center",
},
]}
>
Congratulations!
</Text>
<Text
style={[
Typography.regular.large,
{
textAlign: "center",
color:
theme === "light"
? Colors.grayScale._900
: Colors.others.white,
},
]}
>
Your account is ready to use. You will be
redirected to the Home page in a few seconds..
</Text>
</View>
<Animated.View style={[animatedStyle]}>
<LoadingIcon
fillColor={Colors.main.primary._500}
/>
</Animated.View>
</View>
),
});

console.log(res);
setTimeout(() => {
modal.hide();
}, 4000);
}
} catch (err) {
console.log(err);
throw err;
Expand Down
10 changes: 6 additions & 4 deletions app/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import * as SecureStore from "expo-secure-store";

import { useContext, useEffect, useState } from "react";

import Modal from "@/components/UI/Modal";

import * as NavigationBar from "expo-navigation-bar";
import { ZoomOutUp } from "react-native-reanimated";
import ThemeProvider, { ThemeContext } from "@/ctx/ThemeContext";
import { Pressable, View, useColorScheme } from "react-native";
import { ThemeType } from "@/constants/Types";
import { Text } from "@/components/Themed";
import ModalProvider from "@/ctx/ModalContext";
import ModalContainer from "@/components/UI/Modal";

export {
// Catch any errors thrown by the Layout component.
Expand Down Expand Up @@ -93,7 +93,9 @@ export default function RootLayout() {

return (
<ThemeProvider theme={favoredTheme}>
<RootLayoutNav />
<ModalProvider>
<RootLayoutNav />
</ModalProvider>
</ThemeProvider>
);
}
Expand All @@ -105,7 +107,7 @@ function RootLayoutNav() {
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: "modal" }} />
</Stack>
<Modal />
<ModalContainer />
</>
);
}
12 changes: 7 additions & 5 deletions components/UI/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,43 @@ import { Colors } from "@/constants/Colors";
import { LeftArrow } from "./Icons";
import { Pressable, useColorScheme } from "react-native";
import Typography from "@/constants/Typography";
import { useContext } from "react";
import { ThemeContext } from "@/ctx/ThemeContext";

interface Props {
title: string;
}

export default function Header({ title }: Props) {
const isLightTheme = useColorScheme() === "light";
const { theme } = useContext(ThemeContext);

return (
<>
<StatusBar style={isLightTheme ? "dark" : "light"} />
<StatusBar style={theme === "light" ? "dark" : "light"} />
<View
style={{
paddingVertical: 40,
paddingHorizontal: 20,
gap: 10,
flexDirection: "row",
alignItems: "center",
backgroundColor: isLightTheme
backgroundColor: theme === "light"
? Colors.others.white
: Colors.others.black,
}}
>
<Pressable>
<LeftArrow
fillColor={
isLightTheme ? Colors.grayScale._900 : Colors.others.white
theme === "light" ? Colors.grayScale._900 : Colors.others.white
}
/>
</Pressable>
<Text
style={[
Typography.heading._4,
{
color: isLightTheme ? Colors.grayScale._900 : Colors.others.white,
color: theme === "light" ? Colors.grayScale._900 : Colors.others.white,
},
]}
>
Expand Down
Loading

0 comments on commit 28f976f

Please sign in to comment.