Configuration

While the defaults should work fine to get started it's also possible to configure almost any behaviour.

By default small, medium and large breakpoints are available. The number of breakpoints, their names as well as the starting point can all be changed. The number defines the minimal viewport width where this breakpoint will apply. By default the initial breakpoint is inferred from the viewport size, but can also be configured.

import { configure } from 'responsive-react-native'

configure({
  // Available breakpoints, default { small: 360, medium: 420, large: 999 }.
  breakpoints: {
    tiny: 300,
    normal: 600,
    huge: 800,
  },
  // Initial breakpoint, default inferred from breakpoint values.
  breakpoint: 'small'
})

When configuring breakpoints with TypeScript use the following to override CustomBreakpoints types for proper type checking.

declare module 'responsive-react-native' {
  interface CustomBreakpoints {
    tiny: number
    normal: number
    huge: number
  }
}

Regular pixel based values will not be adapted based on breakpoints, but linearly scaled between a minimum and a maximum breakpoint. In the middle between these two points the value will not scale at all. By specifying the factor the strength of the scaling can be defined.

import { configure } from 'responsive-react-native'

configure({
  // Responsive scaling configuration, default { minimum: 320, maximum: 520, factor: 0.5 }.
  scale: {
    minimum: 300,
    maximum: 600,
    factor: 1,
  },
})

For even more fine grained control it's possible to override the default scaling function. This method called value will receive the number of the property. This would be 10 in the case of { padding: 10 }. Additionally, the method will receive the current breakpoint. As shown below with this it's easily possible to calculate the value based on the breakpoint instead of scaling linearly.

import { configure } from 'responsive-react-native'

configure({
  // Method used to calculate responsive values, default linear scaling according to "scale" configuration.
  value: (value: number, breakpoint: string, orientation: 'portrait' | 'landscape') => {
    if (breakpoint === 'medium') {
      return value
    }

    const halfValue = Math.round(value / 6)

    if (breakpoint === 'small') {
      return value - halfValue
    }

    return value + halfValue
  },
})