Merge pull request #2566 from BlueWallet/qrsize

FIX: QRCode size on large devices
This commit is contained in:
GLaDOS 2021-02-25 09:30:38 +00:00 committed by GitHub
commit 6cd124e13c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 19 deletions

View file

@ -348,7 +348,7 @@ const ReorderWalletsStackRoot = () => {
const Drawer = createDrawerNavigator();
function DrawerRoot() {
const dimensions = useWindowDimensions();
const isLargeScreen = Platform.OS === 'android' ? isTablet() : dimensions.width >= Dimensions.get('screen').width / 3 && isTablet();
const isLargeScreen = Platform.OS === 'android' ? isTablet() : dimensions.width >= Dimensions.get('screen').width / 2 && isTablet();
const drawerStyle = { width: '0%' };
return (

View file

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import { View, Text, StatusBar, ScrollView, BackHandler, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
import { View, Text, StatusBar, ScrollView, BackHandler, TouchableOpacity, StyleSheet } from 'react-native';
import Share from 'react-native-share';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import { Icon } from 'react-native-elements';
@ -11,7 +11,6 @@ import {
BlueText,
SafeBlueArea,
BlueButton,
SecondButton,
BlueCopyTextToClipboard,
BlueSpacing20,
BlueTextCentered,
@ -26,13 +25,12 @@ const LNDViewInvoice = () => {
const { invoice, walletID, isModal } = useRoute().params;
const { wallets, setSelectedWallet, fetchAndSaveWalletTransactions } = useContext(BlueStorageContext);
const wallet = wallets.find(w => w.getID() === walletID);
const { width, height } = useWindowDimensions();
const { colors } = useTheme();
const { goBack, navigate, setParams, setOptions } = useNavigation();
const [isLoading, setIsLoading] = useState(typeof invoice === 'string');
const [isFetchingInvoices, setIsFetchingInvoices] = useState(true);
const [invoiceStatusChanged, setInvoiceStatusChanged] = useState(false);
const qrCodeHeight = height > width ? width - 20 : width / 2;
const [qrCodeSize, setQRCodeSize] = useState(90);
const fetchInvoiceInterval = useRef();
const stylesHook = StyleSheet.create({
root: {
@ -177,6 +175,11 @@ const LNDViewInvoice = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [invoice]);
const onLayout = e => {
const { height, width } = e.nativeEvent.layout;
setQRCodeSize(height > width ? width - 40 : e.nativeEvent.layout.width / 1.8);
};
const render = () => {
if (isLoading) {
return (
@ -237,7 +240,7 @@ const LNDViewInvoice = () => {
<QRCode
value={invoice.payment_request}
logo={require('../../img/qr-code.png')}
size={qrCodeHeight}
size={qrCodeSize}
logoSize={90}
color="#000000"
logoBackgroundColor={colors.brandingColor}
@ -256,7 +259,7 @@ const LNDViewInvoice = () => {
)}
<BlueCopyTextToClipboard text={invoice.payment_request} />
<SecondButton onPress={handleOnSharePressed} title={loc.receive.details_share} />
<BlueButton onPress={handleOnSharePressed} title={loc.receive.details_share} />
<BlueSpacing20 />
<BlueButton
@ -270,9 +273,9 @@ const LNDViewInvoice = () => {
};
return (
<SafeBlueArea styles={[styles.root, stylesHook.root]}>
<SafeBlueArea styles={[styles.root, stylesHook.root]} onLayout={onLayout}>
<StatusBar barStyle="default" />
<ScrollView contentContainerStyle={styles.contentContainerStyle}>{render()}</ScrollView>
<ScrollView>{render()}</ScrollView>
</SafeBlueArea>
);
};
@ -281,9 +284,6 @@ const styles = StyleSheet.create({
root: {
flex: 1,
},
contentContainerStyle: {
flexGrow: 1,
},
justifyContentCenter: {
justifyContent: 'center',
},

View file

@ -45,7 +45,7 @@ const WalletsList = () => {
const [isLoading, setIsLoading] = useState(false);
const [itemWidth, setItemWidth] = useState(width * 0.82 > 375 ? 375 : width * 0.82);
const [isLargeScreen, setIsLargeScreen] = useState(
Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 3 && isTablet(),
Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && isTablet(),
);
const [carouselData, setCarouselData] = useState([]);
const dataSource = getTransactions(null, 10);
@ -428,7 +428,7 @@ const WalletsList = () => {
};
const onLayout = _e => {
setIsLargeScreen(Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 3 && isTablet());
setIsLargeScreen(Platform.OS === 'android' ? isTablet() : width >= Dimensions.get('screen').width / 2 && isTablet());
setItemWidth(width * 0.82 > 375 ? 375 : width * 0.82);
};

View file

@ -1,6 +1,6 @@
import React, { useCallback, useContext, useEffect } from 'react';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
import { View, useWindowDimensions, StyleSheet, BackHandler, StatusBar } from 'react-native';
import { View, StyleSheet, BackHandler, StatusBar } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { ScrollView } from 'react-native-gesture-handler';
@ -17,7 +17,7 @@ const PleaseBackupLNDHub = () => {
const wallet = wallets.find(w => w.getID() === walletID);
const navigation = useNavigation();
const { colors } = useTheme();
const { height, width } = useWindowDimensions();
const [qrCodeSize, setQRCodeSize] = useState(90);
const handleBackButton = useCallback(() => {
navigation.dangerouslyGetParent().pop();
return true;
@ -48,8 +48,13 @@ const PleaseBackupLNDHub = () => {
}, [handleBackButton]);
const pop = () => navigation.dangerouslyGetParent().pop();
const onLayout = e => {
const { height, width } = e.nativeEvent.layout;
setQRCodeSize(height > width ? width - 40 : e.nativeEvent.layout.width / 1.5);
};
return (
<SafeBlueArea style={styles.root}>
<SafeBlueArea style={styles.root} onLayout={onLayout}>
<StatusBar barStyle="light-content" />
<ScrollView centerContent contentContainerStyle={styles.scrollViewContent}>
<View>
@ -63,11 +68,11 @@ const PleaseBackupLNDHub = () => {
value={wallet.secret}
logo={require('../../img/qr-code.png')}
logoSize={90}
size={height > width ? width - 40 : width / 2}
color="#000000"
logoBackgroundColor={colors.brandingColor}
backgroundColor="#FFFFFF"
ecl="H"
size={qrCodeSize}
/>
</View>
<BlueCopyTextToClipboard text={wallet.getSecret()} />