feat: breakpoints

src/components/Button.tsx

@@ -65,6 +65,7 @@ const Button = ({
 		return {
 			...textStyle,
 			...(text && icon && { marginLeft: 8 }),
+			...(text && !icon && { width: '100%', textAlign: 'center' }), // on android text sometimes get shrinked. So if there is no icon, make sure it takes the full width
 			...(variant === 'primary' ? {} : { color: white80 }),
 			...(disabled && !icon && { color: white32 }),
 			...Platform.select({

src/components/HeadlinesWidget.tsx

@@ -121,7 +121,9 @@ const HeadlinesWidget = ({
 					activeOpacity={0.9}
 					hitSlop={{ right: 15, bottom: 15, left: 15 }}
 					onPress={(): void => {
-						if (link) openAppURL(link);
+						if (link) {
+							openAppURL(link);
+						}
 					}}>
 					<View style={styles.columnLeft}>
 						<CaptionB color="white50" numberOfLines={1}>

src/screens/Settings/ElectrumConfig/index.tsx

@@ -31,6 +31,7 @@ import { EProtocol } from 'beignet';
 import { refreshWallet, rescanAddresses } from '../../../utils/wallet';
 import { EAvailableNetwork } from '../../../utils/networks';
 import { updateActivityList } from '../../../store/utils/activity';
+import useBreakpoints from '../../../styles/breakpoints';
 
 type RadioButtonItem = { label: string; value: EProtocol };
 
@@ -87,6 +88,7 @@ const ElectrumConfig = ({
 	navigation,
 }: SettingsScreenProps<'ElectrumConfig'>): ReactElement => {
 	const { t } = useTranslation('settings');
+	const br = useBreakpoints();
 	const dispatch = useAppDispatch();
 	const selectedNetwork = useAppSelector(selectedNetworkSelector);
 	const customElectrumPeers = useAppSelector((state) => {
@@ -337,7 +339,7 @@ const ElectrumConfig = ({
 					/>
 				</View>
 
-				<View style={styles.buttons}>
+				<View style={[styles.buttons, br.up('smphone') && styles.buttonsRow]}>
 					<Button
 						style={styles.button}
 						text={t('es.button_reset')}
@@ -388,10 +390,12 @@ const styles = StyleSheet.create({
 		marginTop: 11,
 	},
 	buttons: {
-		flexDirection: 'row',
 		marginTop: 'auto',
 		gap: 16,
 	},
+	buttonsRow: {
+		flexDirection: 'row',
+	},
 	button: {
 		flex: 1,
 	},

src/screens/Settings/Lightning/Channels.tsx

@@ -74,6 +74,7 @@ import { TPaidBlocktankOrders } from '../../../store/types/blocktank';
 import { EUnit } from '../../../store/types/wallet';
 import { showBottomSheet } from '../../../store/utils/ui';
 import { EChannelStatus, TChannel } from '../../../store/types/lightning';
+import useBreakpoints from '../../../styles/breakpoints';
 
 /**
  * Convert pending (non-channel) blocktank orders to (fake) channels.
@@ -227,6 +228,7 @@ const Channels = ({
 	const [spendingStuckOutputs, setSpendingStuckOutputs] = useState(false);
 
 	const colors = useColors();
+	const br = useBreakpoints();
 	const { localBalance, remoteBalance } = useLightningBalance();
 	const selectedWallet = useAppSelector(selectedWalletSelector);
 	const selectedNetwork = useAppSelector(selectedNetworkSelector);
@@ -648,7 +650,7 @@ const Channels = ({
 					</View>
 				)}
 
-				<View style={styles.buttons}>
+				<View style={[styles.buttons, br.up('smphone') && styles.buttonsRow]}>
 					<Button
 						style={styles.button}
 						text={t('conn_button_export_logs')}
@@ -724,16 +726,19 @@ const styles = StyleSheet.create({
 	},
 	devButtons: {
 		marginTop: 'auto',
+		marginBottom: 16,
 	},
 	devButton: {
 		marginTop: 8,
 	},
 	buttons: {
-		flexDirection: 'row',
 		alignItems: 'center',
 		marginTop: 'auto',
 		gap: 16,
 	},
+	buttonsRow: {
+		flexDirection: 'row',
+	},
 	button: {
 		flex: 1,
 	},

src/screens/Settings/RGSServer/index.tsx

@@ -18,14 +18,14 @@ import {
 	selectedWalletSelector,
 } from '../../../store/reselect/wallet';
 import { rapidGossipSyncUrlSelector } from '../../../store/reselect/settings';
-
 import { initialSettingsState } from '../../../store/shapes/settings';
 import NavigationHeader from '../../../components/NavigationHeader';
 import SafeAreaInset from '../../../components/SafeAreaInset';
 import Button from '../../../components/Button';
 import type { SettingsScreenProps } from '../../../navigation/types';
 import { setupLdk } from '../../../utils/lightning';
 import { showToast } from '../../../utils/notifications';
+import useBreakpoints from '../../../styles/breakpoints';
 
 const isValidURL = (data: string): boolean => {
 	const pattern = new RegExp(
@@ -48,6 +48,7 @@ const RGSServer = ({
 	navigation,
 }: SettingsScreenProps<'RGSServer'>): ReactElement => {
 	const { t } = useTranslation('settings');
+	const br = useBreakpoints();
 	const dispatch = useAppDispatch();
 	const selectedNetwork = useAppSelector(selectedNetworkSelector);
 	const selectedWallet = useAppSelector(selectedWalletSelector);
@@ -132,7 +133,7 @@ const RGSServer = ({
 					testID="RGSUrl"
 				/>
 
-				<View style={styles.buttons}>
+				<View style={[styles.buttons, br.up('smphone') && styles.buttonsRow]}>
 					<Button
 						style={styles.button}
 						text={t('es.button_reset')}
@@ -179,10 +180,12 @@ const styles = StyleSheet.create({
 		marginTop: 5,
 	},
 	buttons: {
-		flexDirection: 'row',
 		marginTop: 'auto',
 		gap: 16,
 	},
+	buttonsRow: {
+		flexDirection: 'row',
+	},
 	button: {
 		flex: 1,
 	},

src/styles/breakpoints.ts

@@ -0,0 +1,39 @@
+import memoize from 'lodash/memoize';
+import { Dimensions } from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+enum BREAKPOINTS {
+	// xsphone = 320,
+	smphone = 360, // small android phone: 360
+	// mdphone = 375, // iphoneSE and up
+	// lgphone = 390, // iphone15 and up
+	// xlphone = 400,
+}
+
+/**
+ * Check if the screen is at least the specified breakpoint
+ **/
+const up = (min: keyof typeof BREAKPOINTS): boolean => {
+	return width > BREAKPOINTS[min];
+};
+
+/**
+ * Check if the screen is at most the specified breakpoint
+ **/
+const down = (max: keyof typeof BREAKPOINTS): boolean => {
+	return width <= BREAKPOINTS[max];
+};
+
+const breakpoints = {
+	up: memoize(up),
+	down: memoize(down),
+};
+
+type TBreakpoints = typeof breakpoints;
+
+const useBreakpoints = (): TBreakpoints => {
+	return breakpoints;
+};
+
+export default useBreakpoints;