RN Custom Style Sheet

This hook provided a theme provider context. it provided a value like state, dispatch and storage.

This hook provided to create handle setter method.

This hook work same as useEffect but here different is check deeply in dependence object value.

NOTE: Only use this if your values are objects or arrays that contain objects. Otherwise, you should just use React.useEffect.

This hook work same as useMemo but here different is check deeply in dependence object value.

NOTE: Only use this if your values are objects or arrays that contain objects. Otherwise, you should just use React.useMemo.

If you want to get the current orientation from context but based on isSupportedOrientation props setting.

If isSupportedOrientation true than provided portrait or landscape otherwise provided portrait

This hook provided a guide line break point value from theme provider context. Like values, unit and step.

This hook provided a guide line layout value from theme provider context. Like height, width and aspectRatioFunction.

This hook provided a boolean value from theme provider context in withPortraitBehaviorInLandscapeMode key value.

This hook provided a screen resolution object and some internal value which are used for scaling. Like a windowWidth, windowHeight, shortDimension and longDimension.

This hook provided device configuration value based on own config props or deviceForMediaQuery props from provider or default value.

This hook provided device configuration value based on deviceForMediaQuery props from provider or default value.

This hook provided a scale matrices utility function if you want to used in different places.

Will return a linear scaled result of the provided size, based on your device's screen width & height aspect ratio

Example: scale(10)

Will return a linear scaled result of the provided size, based on your device's screen width

Example: horizontalScale(10)

Will return a linear scaled result of the provided size, based on your device's screen height.

Example: verticalScale(10)

Sometimes you don't want to scale everything in a linear manner, that's where moderateScale comes in.

The cool thing about it is that you can control the resize factor (default is 0.5) and threshold.

If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:

Example:
    scale(10) = 20;
    moderateScale(10) = 15;
    moderateScale(10, 0.1) = 11;

Sometimes you don't want to scale everything in a linear manner, that's where moderateHorizontalScale comes in.

The cool thing about it is that you can control the resize factor (default is 0.5).

If normal horizontalScale will increase your size by +2X, moderateHorizontalScale will only increase it by +X, for example:

Example:
    horizontalScale(10) = 20;
    moderateHorizontalScale(10) = 15;
    moderateHorizontalScale(10, 0.1) = 11;

Same as moderateHorizontalScale, but using verticalScale instead of horizontalScale.

Example: moderateVerticalScale(10)

Their names essentially mean that you can supply a "percentage like" string value and it will return the DP (independent pixel) that correspond to the supplied percentage of current screen's height.

Example: heightPercentageToDP('50%')

Their names essentially mean that you can supply a "percentage like" string value and it will return the DP (independent pixel) that correspond to the supplied percentage of current screen's width.

Example: widthPercentageToDP('50%')

Size relative to the window height

Example: viewportHeight(1.02)

Size relative to the window width

Example: viewportWidth(10)

Size relative to the largest dimension compared between window width and height

Example: viewportMax(10)

Size relative to the shortest dimension compared between window width and height

Example: viewportMin(10)

New size unit - sdp (scalable dp). This size unit scales with the screen size. It can help developers with supporting multiple screens.

More detail of Visit sdp!

Example: sdp(10)

New size unit - ssp (scalable sp). This size unit scales with the screen size based on the sp size unit (for texts). It can help developers with supporting multiple screens.

More detail of Visit ssp!

Example: sdp(10)

This hook provided a current theme mode, it's may be light or dark depending on user selection or system behavior.

Custom hook for applying the current theme and scaling in our style object.

Custom hook for update the current app theme or switch theme in our application(used for setting preference or other you have specify option in our application).

This method provided a screen resolution object and some internal value which are used for scaling. Like a windowWidth, windowHeight, shortDimension and longDimension.

This method listen orientation change and provided a screen resolution object and some internal value which are used for scaling. Like a windowWidth, windowHeight, shortDimension and longDimension.

This method remove listen orientation change event.

If you know you have two arrays in hand, and you want to know if they are shallowly equal or not, this method is for you.

If you know you have two objects in hand, and you want to know if they are shallowly equal or not, this method is for you.

Will return current theme, based on app and system theme which are provided as a parameter.

This enum represents app theme mode like System, Light or Dark.

This enum represents orientation like Portrait or Landscape.

This enum represents theme mode like Light or Dark and for System provided Light or Dark value based on system behavior.

This enum represents size unit which is provided a package like Em(Emphemeral ), Rem(Roentgen Equivalent Man), Px(Pixel), Cm (Centimeter), Mm( Millimeter), In(Inch) , Pt(Point), Pc( Pica).

This object represents a list of keys which can be used for storage. Like AppThemeNameKey, AppThemeModeKey and SystemThemeModeKey.

This hook provided a general screen resolution object and some internal value which are used for scaling. Like a baseWidth, baseHeight, isTablet, baseSizeRatio, threshold and baseSizeWithThreshold.

key (string | number): A breakpoint key (xs, sm, etc.) or a screen width number in px or your provided breakpoint unit(guideLineBreakpointUnit props in provider).

If you want to change any of the properties values based on the breakpoint then you can do using this package same as like provided to native-base(Visit Native-Bases!)

If you provided a value in array form so at that time your given array value will be sorted by breakpoint key. For example in below example fontSize array will be sorted by breakpoint key)

key (string | number): A breakpoint key (xs, sm, etc.) or a screen width number in px or your provided breakpoint unit(guideLineBreakpointUnit props in provider).

• 01. upBreakpoint / up-breakpoint
• 02. downBreakpoint / down-breakpoint
• 03. betweenBreakpoint / between-breakpoint
• 04. onlyBreakpoint / only-breakpoint
• 05. notBreakpoint / not-breakpoint

Which matches screen widths greater than the screen size given by the breakpoint key (inclusive).

Example:

Which matches screen widths less than the screen size given by the breakpoint key (exclusive).

Example:

Which matches screen widths greater than the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).

Example:

Which matches screen widths starting from the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).

Example:

Which matches screen widths stopping at the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).

Example:

A function which returns computed styles on the basis of media queries specified, scale functionality or theming.

Here styles is plain json object to define your component or screen all styles

Arguments

CustomStyleSheet.create(_object_,_option_) : A option is contain isDark, themeName, themeMode, and isDisableScaling key properties and some other screenResolution, guideLineLayout, guideLineBreakpoint, and device key properties for internal used.

- isDark : A key represent current theme is light or dark as boolean value

- themeName : A theme name type which is currently used for current theme. For example summer, winter or monsoon.

- themeMode : A theme mode type which is currently used like light or dark

- isDisableScaling : A key to used for disabling scaling features.

Return

- A style object which is generated during application start.