Merge branch 'master' into renovate/react-native-svg-13.x

This commit is contained in:
Marcos Rodriguez Vélez 2024-05-16 10:11:06 -04:00 committed by GitHub
commit efb0ad3132
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 93 additions and 86 deletions

25
App.tsx
View file

@ -9,22 +9,25 @@ import { NavigationProvider } from './components/NavigationProvider';
import { BlueStorageProvider } from './blue_modules/storage-context';
import MasterView from './MasterView';
import { SettingsProvider } from './components/Context/SettingsContext';
import { LargeScreenProvider } from './components/Context/LargeScreenProvider';
const App = () => {
const colorScheme = useColorScheme();
return (
<NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
<NavigationProvider>
<SafeAreaProvider>
<BlueStorageProvider>
<SettingsProvider>
<MasterView />
</SettingsProvider>
</BlueStorageProvider>
</SafeAreaProvider>
</NavigationProvider>
</NavigationContainer>
<LargeScreenProvider>
<NavigationContainer ref={navigationRef} theme={colorScheme === 'dark' ? BlueDarkTheme : BlueDefaultTheme}>
<NavigationProvider>
<SafeAreaProvider>
<BlueStorageProvider>
<SettingsProvider>
<MasterView />
</SettingsProvider>
</BlueStorageProvider>
</SafeAreaProvider>
</NavigationProvider>
</NavigationContainer>
</LargeScreenProvider>
);
};

View file

@ -1,6 +1,7 @@
import { isTablet, getDeviceType } from 'react-native-device-info';
import { isTablet as checkIsTablet, getDeviceType } from 'react-native-device-info';
const isTablet: boolean = checkIsTablet();
const isDesktop: boolean = getDeviceType() === 'Desktop';
const isHandset: boolean = getDeviceType() === 'Handset';
export const isHandset: boolean = getDeviceType() === 'Handset';
export { isDesktop, isTablet };
export { isDesktop, isTablet, isHandset };

View file

@ -0,0 +1,41 @@
import React, { createContext, useState, useEffect, useMemo, ReactNode } from 'react';
import { Dimensions } from 'react-native';
import { isDesktop, isTablet } from '../../blue_modules/environment';
interface ILargeScreenContext {
isLargeScreen: boolean;
}
export const LargeScreenContext = createContext<ILargeScreenContext | undefined>(undefined);
interface LargeScreenProviderProps {
children: ReactNode;
}
export const LargeScreenProvider: React.FC<LargeScreenProviderProps> = ({ children }) => {
const [windowWidth, setWindowWidth] = useState<number>(Dimensions.get('window').width);
const screenWidth: number = useMemo(() => Dimensions.get('screen').width, []);
useEffect(() => {
const updateScreenUsage = (): void => {
const newWindowWidth = Dimensions.get('window').width;
if (newWindowWidth !== windowWidth) {
setWindowWidth(newWindowWidth);
}
};
const subscription = Dimensions.addEventListener('change', updateScreenUsage);
return () => subscription.remove();
}, [windowWidth]);
const isLargeScreen: boolean = useMemo(() => {
const halfScreenWidth = windowWidth >= screenWidth / 2;
const condition = (isTablet && halfScreenWidth) || isDesktop;
console.debug(
`LargeScreenProvider.isLargeScreen: width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
);
return condition;
}, [windowWidth, screenWidth]);
return <LargeScreenContext.Provider value={{ isLargeScreen }}>{children}</LargeScreenContext.Provider>;
};

View file

@ -154,7 +154,7 @@ const iStyles = StyleSheet.create({
},
});
export const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelectedWallet, customStyle }) => {
export const WalletCarouselItem = React.memo(({ item, _, onPress, handleLongPress, isSelectedWallet, customStyle }) => {
const scaleValue = new Animated.Value(1.0);
const { colors } = useTheme();
const { walletTransactionUpdateStatus } = useContext(BlueStorageContext);
@ -251,7 +251,7 @@ export const WalletCarouselItem = ({ item, _, onPress, handleLongPress, isSelect
</Pressable>
</Animated.View>
);
};
});
WalletCarouselItem.propTypes = {
item: PropTypes.any,
@ -292,7 +292,7 @@ const WalletsCarousel = forwardRef((props, ref) => {
<NewWalletPanel onPress={onPress} />
),
// eslint-disable-next-line react-hooks/exhaustive-deps
[horizontal, selectedWallet, handleLongPress, onPress, preferredFiatCurrency, language],
[horizontal, selectedWallet, preferredFiatCurrency, language],
);
const flatListRef = useRef();

View file

@ -1,41 +1,10 @@
import { useState, useEffect, useMemo } from 'react';
import { Dimensions } from 'react-native';
import { isTablet } from 'react-native-device-info';
import { isDesktop } from '../blue_modules/environment';
import { useContext } from 'react';
import { LargeScreenContext } from '../components/Context/LargeScreenProvider';
// Custom hook to determine if the screen is large
export const useIsLargeScreen = () => {
const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
const screenWidth = useMemo(() => Dimensions.get('screen').width, []);
useEffect(() => {
const updateScreenUsage = () => {
const newWindowWidth = Dimensions.get('window').width;
if (newWindowWidth !== windowWidth) {
console.debug(`Window width changed: ${newWindowWidth}`);
setWindowWidth(newWindowWidth);
}
};
// Add event listener for dimension changes
const subscription = Dimensions.addEventListener('change', updateScreenUsage);
// Cleanup function to remove the event listener
return () => {
subscription.remove();
};
}, [windowWidth]);
// Determine if the window width is at least half of the screen width
const isLargeScreen = useMemo(() => {
const isRunningOnTablet = isTablet();
const halfScreenWidth = windowWidth >= screenWidth / 2;
const condition = (isRunningOnTablet && halfScreenWidth) || isDesktop;
console.debug(
`Window width: ${windowWidth}, Screen width: ${screenWidth}, Is tablet: ${isTablet()}, Is large screen: ${condition}, isDesktkop: ${isDesktop}`,
);
return condition;
}, [windowWidth, screenWidth]);
return isLargeScreen;
export const useIsLargeScreen = (): boolean => {
const context = useContext(LargeScreenContext);
if (context === undefined) {
throw new Error('useIsLargeScreen must be used within a LargeScreenProvider');
}
return context.isLargeScreen;
};

View file

@ -1,10 +0,0 @@
import React, { lazy, Suspense } from 'react';
import { LazyLoadingIndicator } from './LazyLoadingIndicator';
const ReorderWallets = lazy(() => import('../screen/wallets/reorderWallets'));
export const ReorderWalletsComponent = () => (
<Suspense fallback={<LazyLoadingIndicator />}>
<ReorderWallets />
</Suspense>
);

View file

@ -1,9 +1,9 @@
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ReorderWalletsComponent } from './LazyLoadReorderWalletsStack';
import { useTheme } from '../components/themes';
import navigationStyle from '../components/navigationStyle';
import loc from '../loc';
import ReorderWallets from '../screen/wallets/reorderWallets';
const Stack = createNativeStackNavigator();
@ -14,7 +14,7 @@ const ReorderWalletsStackRoot = () => {
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
<Stack.Screen
name="ReorderWalletsScreen"
component={ReorderWalletsComponent}
component={ReorderWallets}
options={navigationStyle({
headerBackVisible: false,
headerLargeTitle: true,

30
package-lock.json generated
View file

@ -63,7 +63,7 @@
"react-native-camera-kit": "13.0.0",
"react-native-crypto": "2.2.0",
"react-native-default-preference": "1.4.4",
"react-native-device-info": "10.13.2",
"react-native-device-info": "10.14.0",
"react-native-document-picker": "https://github.com/BlueWallet/react-native-document-picker#6033c4e1b0dd0a6760b5f5a5a2c3b2e5d07f2ae4",
"react-native-draggable-flatlist": "github:BlueWallet/react-native-draggable-flatlist#ebfddc4",
"react-native-elements": "3.4.3",
@ -99,7 +99,7 @@
"react-native-watch-connectivity": "1.1.0",
"react-native-widget-center": "https://github.com/BlueWallet/react-native-widget-center#a128c38",
"readable-stream": "3.6.2",
"realm": "12.8.0",
"realm": "12.8.1",
"rn-ldk": "github:BlueWallet/rn-ldk#v0.8.4",
"rn-nodeify": "10.3.0",
"scryptsy": "2.1.0",
@ -19388,9 +19388,10 @@
}
},
"node_modules/react-native-device-info": {
"version": "10.13.2",
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.13.2.tgz",
"integrity": "sha512-5EAls7uvGdZkVfp1KWHsR5BfJJHp/ux64+ZPj1865IcaUyrNQIWYFmrTHwTH8L/NGJUTBrzv+y6WODnN17LSbw==",
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.14.0.tgz",
"integrity": "sha512-9NnTGfhEU4UgQtz4p6COk2Gbqly0dpSWrJtp+dw5rNAi96KtYbaNnO5yoOHDlJ1SVIzh8+hFu3WxVbnWkFU9gA==",
"license": "MIT",
"peerDependencies": {
"react-native": "*"
}
@ -20113,10 +20114,11 @@
"integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
},
"node_modules/realm": {
"version": "12.8.0",
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.0.tgz",
"integrity": "sha512-U1w5+ncyURQFQTrshoGn3KV+pzR1rQlPT7s3Sw6HPIPVBH80EWU3mirwvqp6RQ+Qi32ctRrBMTNeGd5mzAyiSw==",
"version": "12.8.1",
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.1.tgz",
"integrity": "sha512-+zj2bvU0EACXvPBdvRsp2TybHPqPtftciTXsAlhrTWMiaoqC8FO6lriPbUs/JwsXz1w9otJXl5kXRBghPQHgLQ==",
"hasInstallScript": true,
"license": "apache-2.0",
"dependencies": {
"@realm/fetch": "^0.1.1",
"bson": "^4.7.2",
@ -37103,9 +37105,9 @@
"integrity": "sha512-h0vtgiSKws3UmMRJykXAVM4ne1SgfoocUcoBD19ewRpQd6wqurE0HJRQGrSxcHK5LdKE7QPSIB1VX3YGIVS8Jg=="
},
"react-native-device-info": {
"version": "10.13.2",
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.13.2.tgz",
"integrity": "sha512-5EAls7uvGdZkVfp1KWHsR5BfJJHp/ux64+ZPj1865IcaUyrNQIWYFmrTHwTH8L/NGJUTBrzv+y6WODnN17LSbw=="
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.14.0.tgz",
"integrity": "sha512-9NnTGfhEU4UgQtz4p6COk2Gbqly0dpSWrJtp+dw5rNAi96KtYbaNnO5yoOHDlJ1SVIzh8+hFu3WxVbnWkFU9gA=="
},
"react-native-document-picker": {
"version": "git+ssh://git@github.com/BlueWallet/react-native-document-picker.git#6033c4e1b0dd0a6760b5f5a5a2c3b2e5d07f2ae4",
@ -37520,9 +37522,9 @@
"integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
},
"realm": {
"version": "12.8.0",
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.0.tgz",
"integrity": "sha512-U1w5+ncyURQFQTrshoGn3KV+pzR1rQlPT7s3Sw6HPIPVBH80EWU3mirwvqp6RQ+Qi32ctRrBMTNeGd5mzAyiSw==",
"version": "12.8.1",
"resolved": "https://registry.npmjs.org/realm/-/realm-12.8.1.tgz",
"integrity": "sha512-+zj2bvU0EACXvPBdvRsp2TybHPqPtftciTXsAlhrTWMiaoqC8FO6lriPbUs/JwsXz1w9otJXl5kXRBghPQHgLQ==",
"requires": {
"@realm/fetch": "^0.1.1",
"bson": "^4.7.2",

View file

@ -148,7 +148,7 @@
"react-native-camera-kit": "13.0.0",
"react-native-crypto": "2.2.0",
"react-native-default-preference": "1.4.4",
"react-native-device-info": "10.13.2",
"react-native-device-info": "10.14.0",
"react-native-document-picker": "https://github.com/BlueWallet/react-native-document-picker#6033c4e1b0dd0a6760b5f5a5a2c3b2e5d07f2ae4",
"react-native-draggable-flatlist": "github:BlueWallet/react-native-draggable-flatlist#ebfddc4",
"react-native-elements": "3.4.3",
@ -184,7 +184,7 @@
"react-native-watch-connectivity": "1.1.0",
"react-native-widget-center": "https://github.com/BlueWallet/react-native-widget-center#a128c38",
"readable-stream": "3.6.2",
"realm": "12.8.0",
"realm": "12.8.1",
"rn-ldk": "github:BlueWallet/rn-ldk#v0.8.4",
"rn-nodeify": "10.3.0",
"scryptsy": "2.1.0",

View file

@ -21,7 +21,7 @@ import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/h
import SafeArea from '../../components/SafeArea';
import presentAlert from '../../components/Alert';
import { scanQrHelper } from '../../helpers/scan-qr';
import { isTablet } from 'react-native-device-info';
import { isTablet } from '../../blue_modules/environment';
const BROADCAST_RESULT = Object.freeze({
none: 'Input transaction hex',
@ -117,7 +117,7 @@ const Broadcast: React.FC = () => {
return (
<SafeArea>
<KeyboardAvoidingView enabled={!isTablet()} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
<KeyboardAvoidingView enabled={!isTablet} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
<View style={styles.wrapper} testID="BroadcastView">
{BROADCAST_RESULT.success !== broadcastResult && (
<BlueCard style={styles.mainCard}>

View file

@ -59,6 +59,7 @@ jest.mock('react-native-device-info', () => {
getDeviceType: jest.fn().mockReturnValue(false),
hasGmsSync: jest.fn().mockReturnValue(true),
hasHmsSync: jest.fn().mockReturnValue(false),
isTablet: jest.fn().mockReturnValue(false),
};
});