react-native-full-responsive
Version:
Create a fully responsive React Native app for all supported platforms
30 lines • 1.17 kB
JavaScript
import { useMemo } from 'react';
import { useDevice } from './useDevice';
import { createRStyle } from '../layout';
import { useWindowDimensions } from 'react-native';
/**
* A hook is provided for createRStyle to create a dynamic responsive scale. This hook generates a new style when there are changes in dimensions, the parsing method, type, or bases.
* @param styles
* @param deps dependency list to regenerate styles after changing them, and default is an empty array
* @returns a responsive styles `object`
*/
export const useRStyle = function (styles) {
let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
const device = useDevice();
const {
width,
height
} = useWindowDimensions();
const dependencies = [width, height, device, ...deps];
const responsivedStyles = useMemo(() => {
const passedStyles = typeof styles === 'function' ? styles() : styles;
return createRStyle(passedStyles, {
width,
height,
scaleConfig: device
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies);
return responsivedStyles;
};
//# sourceMappingURL=useRStyle.js.map