Merge pull request #7565 from BlueWallet/qrui

FIX: ScanQR UI fixes
This commit is contained in:
GLaDOS 2025-02-05 15:39:33 +00:00 committed by GitHub
commit 83f545ed4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 12 deletions

View file

@ -1,5 +1,5 @@
import React, { useState, useRef } from 'react';
import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
import { Animated, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
import { Camera, CameraApi, CameraType, Orientation } from 'react-native-camera-kit';
import loc from '../loc';
import { Icon } from '@rneui/base';
@ -46,8 +46,8 @@ const CameraScreen: React.FC<CameraScreenProps> = ({
// For real phone apps, lock your UI orientation using a library like 'react-native-orientation-locker'
const rotateUi = true;
const uiRotation = orientationAnim.interpolate({
inputRange: [1, 4],
outputRange: ['180deg', '-90deg'],
inputRange: [1, 2, 3, 4],
outputRange: ['180deg', '90deg', '0deg', '-90deg'],
});
const uiRotationStyle = rotateUi ? { transform: [{ rotate: uiRotation }] } : {};
@ -96,9 +96,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({
return (
<View style={styles.screen}>
<View style={styles.topButtons}>
<TouchableOpacity style={styles.topButton} onPress={onSetTorch}>
<Animated.View style={[styles.topButtonImg, uiRotationStyle]}>
<Icon name={torchMode ? 'flashlight-on' : 'flashlight-off'} type="font-awesome-6" color="#ffffff" />
<TouchableOpacity style={[styles.topButton, uiRotationStyle, torchMode ? styles.activeTorch : {}]} onPress={onSetTorch}>
<Animated.View style={styles.topButtonImg}>
{Platform.OS === 'ios' ? (
<Icon name={torchMode ? 'flashlight-on' : 'flashlight-off'} type="font-awesome-6" color={torchMode ? '#000' : '#fff'} />
) : (
<Icon name={torchMode ? 'flash-on' : 'flash-off'} type="ionicons" color={torchMode ? '#000' : '#fff'} />
)}
</Animated.View>
</TouchableOpacity>
<View style={styles.rightButtonsContainer}>
@ -109,7 +113,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({
style={[styles.topButton, styles.spacing, uiRotationStyle]}
onPress={onImagePickerButtonPress}
>
<Animated.View style={[styles.topButtonImg, uiRotationStyle]}>
<Animated.View style={styles.topButtonImg}>
<Icon name="image" type="font-awesome" color="#ffffff" />
</Animated.View>
</TouchableOpacity>
@ -121,7 +125,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({
style={[styles.topButton, styles.spacing, uiRotationStyle]}
onPress={onFilePickerButtonPress}
>
<Animated.View style={[styles.topButtonImg, uiRotationStyle]}>
<Animated.View style={styles.topButtonImg}>
<Icon name="file-import" type="font-awesome-5" color="#ffffff" />
</Animated.View>
</TouchableOpacity>
@ -152,9 +156,13 @@ const CameraScreen: React.FC<CameraScreenProps> = ({
<TouchableOpacity onPress={onCancelButtonPress}>
<Animated.Text style={[styles.backTextStyle, uiRotationStyle]}>{loc._.cancel}</Animated.Text>
</TouchableOpacity>
<TouchableOpacity style={styles.bottomButton} onPress={onSwitchCameraPressed}>
<TouchableOpacity style={[styles.bottomButton, uiRotationStyle]} onPress={onSwitchCameraPressed}>
<Animated.View style={[styles.topButtonImg, uiRotationStyle]}>
<Icon name="cameraswitch" type="font-awesome-6" color="#ffffff" />
{Platform.OS === 'ios' ? (
<Icon name="cameraswitch" type="font-awesome-6" color="#ffffff" />
) : (
<Icon name={cameraType === CameraType.Back ? 'camera-rear' : 'camera-front'} type="ionicons" color="#ffffff" />
)}
</Animated.View>
</TouchableOpacity>
</View>
@ -165,6 +173,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({
export default CameraScreen;
const styles = StyleSheet.create({
activeTorch: {
backgroundColor: '#fff',
},
screen: {
height: '100%',
backgroundColor: '#000000',

View file

@ -268,7 +268,6 @@ const PromptPasswordConfirmationModal = forwardRef<PromptPasswordConfirmationMod
backgroundColor={colors.modal}
isGrabberVisible={!isSuccess}
scrollRef={scrollView}
keyboardMode="pan"
dismissible={false}
footer={
!isSuccess ? (

View file

@ -25,7 +25,6 @@ const styles = StyleSheet.create({
backgroundColor: '#000000',
},
openSettingsContainer: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',