react-native-use-calc v1.0.7

react-native-use-calc

The library makes it possible to perform calculation with css units (the supported units are vh, vw, vmax, vmin, rem, px, cm, mm, in, pt, pc).

Api

There are simple hooks for using css values units that can be supported in react native. The rem value can be set with context component and the default value is 16.

import {
    useCm,
    useIn,
    useMm,
    usePc,
    usePt,
    useRe,
    useVh,
    useVm,
    useVm,
    useVw,
    RemProvider
}
from "react-native-use-calc";

const App: React.FC = () => {
    
    const oneCmInPixel = useCm(1);

    const oneInchInPx = useIn(1);

    const oneMmInPx = useMm(1);

    const onePcInPx = usePc(1);

    const onePtInPx = usePt(1);

    const oneRemInPx = useRe(1);

    const oneVhInPx = useVh(1);

    const oneVmaxInPx = useVm(1);

    const oneVminInPx = useVm(1);

    const oneVwInPx = useVw(1);

    return (
        <>
            <View
            style={{
                backgroundColor: "red",
                widht: useRem(20),
                height: useRem(20),
            }}/>
            <RemProvider
            value={32}>
                <View
                style={{
                    backgroundColor: "red",
                    widht: useRem(20),
                    height: useRem(20),
                }}/>
            </RemProvider>
        </>
    );
};

Performing css calculation

Css calculation can be performed with the units that are supported.

import { useCalc } from "react-native-use-calc";

const App: React.FC = () => {

    return (
        <View
        style={{
            marginLeft: 64,
            marginRight: 64,
            width: useCalc("100vh - 128px"),
            height: 64
        }}/> 
    );
};