Merge pull request #2937 from BlueWallet/unlockscreenanim

REF: Use Unlock screen for splash screen
This commit is contained in:
GLaDOS 2021-04-12 20:48:48 +01:00 committed by GitHub
commit f52daf6601
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 51 deletions

View File

@ -1,17 +0,0 @@
import React from 'react';
import LottieView from 'lottie-react-native';
import * as NavigationService from './NavigationService';
import { StackActions } from '@react-navigation/native';
const LoadingScreen = () => {
const replaceStackNavigation = () => {
NavigationService.dispatch(StackActions.replace('UnlockWithScreenRoot'));
};
const onAnimationFinish = () => {
replaceStackNavigation();
};
return <LottieView source={require('./img/bluewalletsplash.json')} autoPlay loop={false} onAnimationFinish={onAnimationFinish} />;
};
export default LoadingScreen;

View File

@ -75,7 +75,6 @@ import LNDViewInvoice from './screen/lnd/lndViewInvoice';
import LNDViewAdditionalInvoiceInformation from './screen/lnd/lndViewAdditionalInvoiceInformation';
import LnurlPay from './screen/lnd/lnurlPay';
import LnurlPaySuccess from './screen/lnd/lnurlPaySuccess';
import LoadingScreen from './LoadingScreen';
import UnlockWith from './UnlockWith';
import DrawerList from './screen/wallets/drawerList';
import { isCatalyst, isTablet } from './blue_modules/environment';
@ -312,13 +311,6 @@ const ScanQRCodeRoot = () => (
</ScanQRCodeStack.Navigator>
);
const LoadingScreenStack = createStackNavigator();
const LoadingScreenRoot = () => (
<LoadingScreenStack.Navigator name="LoadingScreenRoot" mode="modal" screenOptions={{ headerShown: false }}>
<LoadingScreenStack.Screen name="LoadingScreen" component={LoadingScreen} />
</LoadingScreenStack.Navigator>
);
const UnlockWithScreenStack = createStackNavigator();
const UnlockWithScreenRoot = () => (
<UnlockWithScreenStack.Navigator name="UnlockWithScreenRoot" screenOptions={{ headerShown: false }}>
@ -424,8 +416,7 @@ const LappBrowserStackRoot = () => {
const InitStack = createStackNavigator();
const InitRoot = () => (
<InitStack.Navigator screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
<InitStack.Screen name="LoadingScreenRoot" component={LoadingScreenRoot} options={{ headerShown: false, animationEnabled: false }} />
<InitStack.Navigator screenOptions={defaultScreenOptions} initialRouteName="UnlockWithScreenRoot">
<InitStack.Screen
name="UnlockWithScreenRoot"
component={UnlockWithScreenRoot}
@ -479,7 +470,7 @@ const Navigation = () => {
const theme = useTheme();
return (
<RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="LoadingScreenRoot">
<RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions} initialRouteName="UnlockWithScreenRoot">
{/* stacks */}
<RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false }} />
<RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={{ headerShown: false }} />

View File

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from 'react';
import { View, Image, TouchableOpacity, StyleSheet, StatusBar, ActivityIndicator, useColorScheme } from 'react-native';
import { View, Image, TouchableOpacity, StyleSheet, StatusBar, ActivityIndicator, useColorScheme, LayoutAnimation } from 'react-native';
import { Icon } from 'react-native-elements';
import Biometric from './class/biometrics';
import LottieView from 'lottie-react-native';
@ -44,6 +44,7 @@ const UnlockWith = () => {
const [biometricType, setBiometricType] = useState(false);
const [isStorageEncryptedEnabled, setIsStorageEncryptedEnabled] = useState(false);
const [isAuthenticating, setIsAuthenticating] = useState(false);
const [animationDidFinish, setAnimationDidFinish] = useState(false);
const colorScheme = useColorScheme();
const initialRender = async () => {
@ -51,14 +52,8 @@ const UnlockWith = () => {
if (await Biometric.isBiometricUseCapableAndEnabled()) {
biometricType = await Biometric.biometricType();
}
const storageIsEncrypted = await isStorageEncrypted();
setIsStorageEncryptedEnabled(storageIsEncrypted);
setBiometricType(biometricType);
if (unlockOnComponentMount) {
if (!biometricType || storageIsEncrypted) {
unlockWithKey();
} else if (typeof biometricType === 'string') unlockWithBiometrics();
}
};
useEffect(() => {
@ -126,21 +121,27 @@ const UnlockWith = () => {
}
};
if (!biometricType && !isStorageEncryptedEnabled) {
return <View />;
} else {
return (
<SafeAreaView style={styles.root}>
<StatusBar barStyle="default" />
<View style={styles.container}>
<LottieView source={require('./img/bluewalletsplash.json')} progress={1} loop={false} />
<View style={styles.biometric}>
<View style={styles.biometricRow}>{renderUnlockOptions()}</View>
</View>
</View>
</SafeAreaView>
);
}
const onAnimationFinish = async () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
if (unlockOnComponentMount) {
const storageIsEncrypted = await isStorageEncrypted();
setIsStorageEncryptedEnabled(storageIsEncrypted);
if (!biometricType || storageIsEncrypted) {
unlockWithKey();
} else if (typeof biometricType === 'string') unlockWithBiometrics();
}
setAnimationDidFinish(true);
};
return (
<SafeAreaView style={styles.root}>
<StatusBar barStyle="default" />
<View style={styles.container}>
<LottieView source={require('./img/bluewalletsplash.json')} autoPlay loop={false} onAnimationFinish={onAnimationFinish} />
<View style={styles.biometric}>{animationDidFinish && <View style={styles.biometricRow}>{renderUnlockOptions()}</View>}</View>
</View>
</SafeAreaView>
);
};
export default UnlockWith;