Getting Started

Installation

npm install responsive-react-native

Two Approaches

There are two different ways to use responsive styles. The first uses the familiar Stylesheets used in React Native and automativally makes any scaleable values responsive. This approach requires that the whole application rerenders when the viewport changes. Usually, this is not an issue since viewport changes on mobile devices are rare. The second way uses styled components and requires a separate definition for each component. Using the latter interface requires more effort and is only recommended when starting with a new project. This interface doesn't require any rerenders and can conditionally apply styles based on component props.The Styled API approach is explained in detail on a dedicated page.

To quickly try out the Stylesheet approach on an existing project it's possible to override the StyleSheet.create method without touching every component. This is detailed in the refactoring section below.

Responsive Stylesheets

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

const styles = createStyles({
  view: {
    padding: 20,
    height: 40,
    flex: 1, // Remains unmodified.
    backgroundColor: 'blue',
  },
  text: {
    fontSize: 16,
  },
})

export const App = () => (
  <View style={styles.view}>
    <Text style={styles.text}>Hello Responsive World</Text>
  </View>
)

How Does It Work?

The pixel based values will scale depending on the viewport size of the device. Essentially, the values will more or less scale so that the layout will look the same on any device. By default at 420px the value will stay the same. It's possible to configure the default viewport as well as the strength of the scaling.

Rerendering

Since Stylesheets are statically initialized and frozen at the top of the file they cannot be made to automatically adapt during rendering. The createStyles method works around this by returning a proxied object that can adapt based on the viewport. However, a full rerender of the application is still necessary when the viewport changes in order to get the new styles. Any part of the application wrapped in <Rerender> automatically rerenders on changes to the viewport. Usually this component is added directly at the application root as in the example below.

import { View, Text } from 'react-native'
import { Rerender } from 'responsive-react-native'

function App() {
  return (
    <Rerender>
      {() => (
        <View>
          <Text>Hello World</Text>
        </View>
      )}
    </Rerender>
  )
}

Adaptive Values (Breakpoints and Orientation)

A custom Stylesheet syntax makes it easy to define breakpoint or orientation dependent styles directly in the stylesheet.

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

const styles = createStyles({
  view: {
    backgroundColor: ['blue', 'red'], // => blue in portrait, red in landscape.
    height: { small: 40, large: 80 }, // => 40 for small and medium breakpoint, 80 on large breakpoint.
    padding: [
      { small: 40, medium: 60 },
      { small: 20, large: 80 },
    ], // Both approaches can be combined either way.
  },
})

Any project using the standard StyleSheet.create can quickly be modified to make all applicable properties scale responsively. This can be achieved by overriding said method.

import { StyleSheet } from 'react-native'
import { createStyles } from 'responsive-react-native'

Object.assign(StyleSheet, { create: createStyles })

Calls to StyleSheet.create are usually run before rendering occurs right away when the file is imported. This means that the override needs to happen before any components are imported. Placing the above code in a separate file and importing it before any components will achieve this.

import { AppRegistry } from 'react-native'
import './refactor-stylesheet' // Import above code before any components.
import App from './App'

AppRegistry.registerComponent('responsive-app', () => App)