Skip to content

Commit

Permalink
refactor: new structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@Krunal-Kevadiya
Krunal-Kevadiya committed Aug 17, 2023
1 parent 1591186 commit 46e8417
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 82 deletions.
18 changes: 9 additions & 9 deletions RNCustomStyleSheet/src/HomeScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
StyleSheetPropsType,
useDevice,
useTheme,
useUpdateTheme,
useUpdateTheme
} from 'rn-custom-style-sheet';
import { MultiTheme } from './ThemeColors';

Expand All @@ -22,35 +22,35 @@ const styleSheet = (styleOption: StyleSheetPropsType) =>
alignItems: 'center',
backgroundColor:
MultiTheme[styleOption.themeName]?.[styleOption.themeMode]
?.srnBackgroundColor,
?.srnBackgroundColor
},
text: {
fontWeight: 'bold',
fontSize: '12@mhs', //['12@mhs', '14@mhs', '16@mhs', '18@mhs'],
color:
MultiTheme[styleOption.themeName]?.[styleOption.themeMode]?.txtColor,
MultiTheme[styleOption.themeName]?.[styleOption.themeMode]?.txtColor
},
'@media (orientation: landscape)': {
text: {
fontSize: '12@mhs',
fontSize: '12@mhs'
// {
// base: '12@mhs',
// sm: '14@mhs',
// md: '16@mhs',
// lg: '18@mhs',
// },
},
}
},
button: {
borderRadius: '10@mhs',
backgroundColor:
MultiTheme[styleOption.themeName]?.[styleOption.themeMode]
?.btnBackgroundColor,
width: '250@hs',
height: '45@vs',
width: '75@vw',
height: '6@vh',
mt: '15@vs',
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
// elevation: '4@mhs',
// shadowOffset: {
// width: '0@hs',
Expand All @@ -61,7 +61,7 @@ const styleSheet = (styleOption: StyleSheetPropsType) =>
// shadowColor:
// MultiTheme[styleOption.themeName]?.[styleOption.themeMode]
// ?.btnShadowColor,
},
}
},
styleOption
);
Expand Down
13 changes: 8 additions & 5 deletions src/Core/Provider/ThemeProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,16 @@ export function ThemeProvider({
appThemeName,
]);

const value: ThemeContextType = useMemo(
() => ({
const value: ThemeContextType = useMemo(() => {
const isLandscape: boolean =
state.orientation === OrientationEnum.Landscape;
return {
state: {
...state,
guideLineLayout: {
...state.guideLineLayout,
width: isLandscape ? 1366 : state.guideLineLayout.width,
height: isLandscape ? 1024 : state.guideLineLayout.height,
aspectRatioFunction:
guideLineLayout?.aspectRatioFunction ??
(state.isUsedBuiltInAspectRatioFunction
Expand All @@ -132,9 +136,8 @@ export function ThemeProvider({
},
dispatch,
storage,
}),
[state, storage, guideLineLayout?.aspectRatioFunction]
);
};
}, [state, storage, guideLineLayout?.aspectRatioFunction]);

if (
(appThemeName?.length ?? 0) > 0 &&
Expand Down
10 changes: 6 additions & 4 deletions src/Scaling/Hooks/UseScaleUtils/UseScaleUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,15 @@ export default function useScaleUtils(): UseScaleUtilsReturnType {
);

const widthPercentageToDP = useMemo<(widthPercent: number) => number>(
() => getWidthPercentageToDP(screenResolution),
[screenResolution]
() =>
getWidthPercentageToDP(screenResolution, guideLineLayout, isLandscape),
[screenResolution, guideLineLayout, isLandscape]
);

const heightPercentageToDP = useMemo<(heightPercent: number) => number>(
() => getHeightPercentageToDP(screenResolution),
[screenResolution]
() =>
getHeightPercentageToDP(screenResolution, guideLineLayout, isLandscape),
[screenResolution, guideLineLayout, isLandscape]
);

const viewportMin = useMemo<
Expand Down
146 changes: 84 additions & 62 deletions src/Scaling/Utils/Metrics/Metrics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,21 @@ import {
import DeviceInfo from 'react-native-device-info';
import type { GuideLineLayoutType, ScreenResolutionType } from '../../../Core';

enum MetricsUnit {
HS = 's|hs',
VS = 'vs',
MHS = 'ms|mhs',
MVS = 'mvs',
WP = 'wp',
HP = 'hp',
VH = 'vh',
VW = 'vw',
VMIN = 'vmin',
VMAX = 'vmax',
SDP = 'sdp',
SSP = 'ssp',
}

export function getNewSize(
screenResolution: ScreenResolutionType
): (size: number) => number {
Expand Down Expand Up @@ -50,57 +65,52 @@ function changeSizeByConfig({
factor,
skipAspectRatio,
isLandscape,
isChange,
isHorizontal,
guideLineLayout,
type,
}: {
size: number;
factor: number;
skipAspectRatio: boolean;
isLandscape: boolean;
isChange: boolean;
isHorizontal: boolean;
guideLineLayout: GuideLineLayoutType;
type: MetricsUnit;
}): number {
const isFactor: boolean = factor > 0;
const isAndroid: boolean = Platform.OS === 'android';
const wSize: ScaledSize = Dimensions.get('window');
//const isAndroid: boolean = Platform.OS === 'android';
const isiPad: boolean = Platform.OS === 'ios' && Platform.isPad;
const isTablet: boolean = DeviceInfo.getDeviceType() === 'Tablet';
const isTabletOriPad: boolean = isTablet || isiPad;

// iPhone/Android Phone
let newSize: number = size;
const extraWidth: number = (factor * 10) / 100;
if (!isiPad && !isTablet && isLandscape && isFactor) {
newSize = size * (isAndroid ? factor + extraWidth : factor);
}
let updateSize: number = newSize;
if (!isiPad && !isTablet && isLandscape && isChange) {
if (isHorizontal) {
const diff: number = wSize.width - wSize.height;
updateSize = (newSize * diff) / wSize.height;
} else {
const extraDiff: number = (wSize.width * 3) / 100;
const diff: number = wSize.width + (isAndroid ? extraDiff : 0);
updateSize = (newSize * diff) / wSize.height;
}
}
const isVertical: boolean = [
MetricsUnit.VS,
MetricsUnit.MVS,
MetricsUnit.VH,
MetricsUnit.HP,
MetricsUnit.VMAX,
].includes(type);

// iPad/Tablet
if ((isiPad || isTablet) && isLandscape && isFactor) {
newSize = size * (isAndroid ? factor - extraWidth : factor);
}
if ((isiPad || isTablet) && isLandscape && isChange) {
if (isHorizontal) {
const divider: number = isAndroid ? 2 : 4;
const diff: number = isFactor ? 0 : size / divider;
updateSize = (newSize * wSize.width) / wSize.height - diff;
} else {
const divider: number = isAndroid ? 4 : 1;
const diff: number = isFactor || !isAndroid ? 0 : size / divider;
updateSize = (newSize * wSize.width) / wSize.height + diff;
}
}
// const scale = PixelRatio.get();
// const fontScale = PixelRatio.getFontScale();
// eslint-disable-next-line no-console
console.log({
isFactor,
isVertical,
isLandscape,
isiPad,
isTablet,
isTabletOriPad,
});

// let newScale = scale > 1 ? scale * 0.5 : scale;
// newScale = isLandscape
// ? newScale + newScale * (isVertical ? 0.15 : isTabletOriPad ? 0.5 : 0.75)
// : newScale;
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT }: ScaledSize =
Dimensions.get('window');
const scaleWidth = SCREEN_WIDTH / 375;
const scaleHeight = SCREEN_HEIGHT / 812;
const scale = Math.min(scaleWidth, scaleHeight);
const updateSize: number = Math.ceil(size * scale);

const changeSize: number = skipAspectRatio
? updateSize
Expand Down Expand Up @@ -130,9 +140,8 @@ export function horizontalScale(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: true,
isHorizontal: true,
guideLineLayout,
type: MetricsUnit.HS,
});
return (screenResolution.windowWidth / guideLineLayout.width) * changeSize;
};
Expand All @@ -159,9 +168,8 @@ export function verticalScale(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: true,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.VS,
});
return (
(screenResolution.windowHeight / guideLineLayout.height) * changeSize
Expand Down Expand Up @@ -192,9 +200,8 @@ export function moderateHorizontalScale(
factor,
skipAspectRatio,
isLandscape,
isChange: true,
isHorizontal: true,
guideLineLayout,
type: MetricsUnit.MHS,
});
const hs = horizontalScale(screenResolution, guideLineLayout, isLandscape);
return changeSize + (hs(changeSize, skipAspectRatio) - changeSize) * factor;
Expand Down Expand Up @@ -224,9 +231,8 @@ export function moderateVerticalScale(
factor,
skipAspectRatio,
isLandscape,
isChange: true,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.MVS,
});
const vs = verticalScale(screenResolution, guideLineLayout, isLandscape);
return changeSize + (vs(changeSize, skipAspectRatio) - changeSize) * factor;
Expand All @@ -239,13 +245,23 @@ export function moderateVerticalScale(
* @return {number} The calculated dp depending on current device's screen width.
*/
export function widthPercentageToDP(
screenResolution: ScreenResolutionType
screenResolution: ScreenResolutionType,
guideLineLayout: GuideLineLayoutType,
isLandscape: boolean
): (widthPercent: number) => number {
return function getWidthPercentageToDP(widthPercent: number): number {
const changeSize: number = changeSizeByConfig({
size: widthPercent,
factor: 0,
skipAspectRatio: false,
isLandscape,
guideLineLayout,
type: MetricsUnit.WP,
});
// Use PixelRatio.roundToNearestPixel method in order to round the layout
// size (dp) to the nearest one that correspond to an integer number of pixels.
return PixelRatio.roundToNearestPixel(
(screenResolution.windowWidth * widthPercent) / 100
(screenResolution.windowWidth * changeSize) / 100
);
};
}
Expand All @@ -256,13 +272,23 @@ export function widthPercentageToDP(
* @return {number} The calculated dp depending on current device's screen height.
*/
export function heightPercentageToDP(
screenResolution: ScreenResolutionType
screenResolution: ScreenResolutionType,
guideLineLayout: GuideLineLayoutType,
isLandscape: boolean
): (heightPercent: number) => number {
return function getHeightPercentageToDP(heightPercent: number): number {
const changeSize: number = changeSizeByConfig({
size: heightPercent,
factor: 0,
skipAspectRatio: false,
isLandscape,
guideLineLayout,
type: MetricsUnit.HP,
});
// Use PixelRatio.roundToNearestPixel method in order to round the layout
// size (dp) to the nearest one that correspond to an integer number of pixels.
return PixelRatio.roundToNearestPixel(
(screenResolution.windowHeight * heightPercent) / 100
(screenResolution.windowHeight * changeSize) / 100
);
};
}
Expand All @@ -281,9 +307,8 @@ export function viewportMin(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: true,
isHorizontal: true,
guideLineLayout,
type: MetricsUnit.VMIN,
});
return (changeSize / 100) * screenResolution.shortDimension;
};
Expand All @@ -303,9 +328,8 @@ export function viewportMax(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: false,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.VMAX,
});
return (changeSize / 100) * screenResolution.longDimension;
};
Expand All @@ -325,10 +349,10 @@ export function viewportHeight(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: false,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.VH,
});

return (changeSize / 100) * screenResolution.windowHeight;
};
}
Expand All @@ -347,10 +371,10 @@ export function viewportWidth(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: false,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.VW,
});

return (changeSize / 100) * screenResolution.windowWidth;
};
}
Expand Down Expand Up @@ -404,9 +428,8 @@ export function sdp(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: false,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.SDP,
});
return parseFloat(changeSize.toFixed(2));
};
Expand All @@ -432,9 +455,8 @@ export function ssp(
factor: 0,
skipAspectRatio,
isLandscape,
isChange: false,
isHorizontal: false,
guideLineLayout,
type: MetricsUnit.SSP,
});
return parseFloat(changeSize.toFixed(2)) * PixelRatio.getFontScale();
};
Expand Down
Loading

0 comments on commit 46e8417

Please sign in to comment.