mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-24 07:28:07 +01:00
Merge pull request #2566 from BlueWallet/qrsize
FIX: QRCode size on large devices
This commit is contained in:
commit
6cd124e13c
4 changed files with 24 additions and 19 deletions
|
@ -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 (
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
@ -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()} />
|
||||
|
|
Loading…
Add table
Reference in a new issue