mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-03-13 19:16:52 +01:00
Code Issues Projects Releases Packages Wiki Activity

FIX: ScanQR UI fixes

Browse source
This commit is contained in:
Marcos Rodriguez Velez 2025-02-04 21:54:24 -04:00
parent 59c9edeebd
commit 4611c46d1e
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/CameraScreen.tsx
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',

6
screen/send/ScanQRCode.js
View file

@ -1,4 +1,4 @@
import { useFocusEffect, useIsFocused, useNavigation, useRoute } from '@react-navigation/native';
import { useFocusEffect, useIsFocused, useRoute } from '@react-navigation/native';
import * as bitcoin from 'bitcoinjs-lib';
import createHash from 'create-hash';
import React, { useCallback, useEffect, useState } from 'react';
@ -16,6 +16,7 @@ import { useSettings } from '../../hooks/context/useSettings';
import CameraScreen from '../../components/CameraScreen';
import SafeArea from '../../components/SafeArea';
import presentAlert from '../../components/Alert';
import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
let decoder = false;
@ -25,7 +26,6 @@ const styles = StyleSheet.create({
backgroundColor: '#000000',
},
openSettingsContainer: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
@ -54,7 +54,7 @@ const styles = StyleSheet.create({
const ScanQRCode = () => {
const [isLoading, setIsLoading] = useState(false);
const { setIsDrawerShouldHide } = useSettings();
const navigation = useNavigation();
const navigation = useExtendedNavigation();
const route = useRoute();
const navigationState = navigation.getState();
const previousRoute = navigationState.routes[navigationState.routes.length - 2];