Styled Interface

Inspired by styled-components for the web this interface allows to merge dynamic styles together with tags and reuse them. Regular React Native stylesheets can't be updated anymore without rerendering the whole tree. Using the Styled interface however doesn't require a full rerender through the <Rerender /> component anymore. The linked styles will directly be updated whenever the viewport or the orientation changes. Additionally, styles for props can be added which also dynamically update the component's styles.

import { View } from 'react-native'
import { Styled } from 'responsive-react-native'

const CustomView = Styled(
  View,
  {
    backgroundColor: 'gray',
    padding: 10,
  },
  {
    // Truthy prop.
    highlight: {
      backgroundColor: 'red',
    },
    // Current breakpoint.
    large: {
      backgroundColor: 'blue',
    },
    // Current OS.
    ios: {
      padding: 5,
    }
  }
)

export default () => <CustomView highlight />

As the first argument the Styled method takes the component to extend. This can be a string representation of a React Native element or the element itself. The second argument takes the styles just like createStyles does. Scaleable values will automatically adapt linearly based on the viewport and adaptive values can be used to specify values for specific breakpoints or orientations. An optional third argument takes an object which can contain styles which will dynamically be applied if a truthy prop, a breakpoint, the operating system or the orientation matches a key.

Observable Styles with MobX

npm install mobx responsive-react-native

When a function is passed and MobX is installed the styles will automatically adapt whenever any of the state accessed inside changes. The Styled method interface stays the same except that for the second and third argument a method returning base styles or conditional styles has to be passed.

import { observable, runInAction } from 'mobx'
import { View, Button } from 'react-native'
import { Styled } from 'responsive-react-native'

const Store = observable({ highlight: false })

const ObservableView = Styled(View, () => ({
  backgroundColor: Store.highlight ? 'red' : 'gray',
  width: 50,
  height: 50
}))

export default () => (
  <View style={{ padding: 10 }}>
    <ObservableView />
    <Button
      title="Highlight"
      onPress={() =>
        runInAction(() => {
          Store.highlight = !Store.highlight
        })
      }
    />
  </View>
)

When the state changes and this results in different styles being returned the styles will adapt without any React component themselves having to rerender.