Out-of-the-box Responsive StyleSheets for React Native.

Responsive StyleSheet
Quickly make an existing application responsive without any refactoring.
Scaled Values
Quickly make an existing application responsive without any refactoring.
Adaptive Values
Quickly make an existing application responsive without any refactoring.
Breakpoints
Quickly make an existing application responsive without any refactoring.
import { createStyles } from 'responsive-react-native'

const styles = createStyles({
  view: {
    backgroundColor: 'red',
    width: 200,
    height: 100,
    padding: 10
  },
  text: {
    fontSize: 16
  }
})

export default () => (
  <View style={styles.view}>
    <Text style={styels.text}>Hello Responsive</Text>
  </View>
)
import { View, Text } from 'react-native'
import { createStyles } from 'responsive-react-native'
import { Header } from './components.js'
import { Breakpoint } from './breakpoint.js'

const styles = createStyles({
  wrapper: {
    gap: 10,
    paddingHorizontal: 20
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  box: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    backgroundColor: 'lightgray',
    width: 100,
    height: 100
  },
})

export default function Screen({ width }) {
  return (
    <View style={styles.wrapper}>
      <Header />
      <Text>Width: {width}</Text>
      <View style={[styles.box, styles.smallBox]}>
        <Text>100x100</Text>
      </View>
      <Breakpoint />
    </View>
  )
}
iPhone 15

1179 x 2556 · 6.1"

393 x 852 @3x

Responsive StyleSheet
By default the createStyles method can replace any call to the default React Native StyleSheet.create.
import { createStyles } from 'responsive-react-native'

const styles = createStyles({
  view: {
    width: 200,
    padding: 10,
  },
})

export default () => <View style={styles.view} />
import { createStyles } from 'responsive-react-native'

const styles = createStyles({
  view: {
    width: 200,
    // =>
    // 200px at 420px viewport.
    // 150px at 320px viewport.
    // 250px at 520px viewport.
    padding: 10,
    flex: 1 // Unscaleable property, will be ignored.
  },
})

export default () => <View style={styles.view} />
Scaled Values
Any size property will be linearly scaled depending on the current viewport size.
Illustration of responsive scaling.
Adaptive Values
Using a special syntax different values can be used depending on breakpoint, orientation or platform. All (??) values will still be scaled to match the current viewport size.
  • Breakpoint: { [breakpoint]: value }
  • Orientation: [portrait, landscale]
  • Platform: { ios: value, android: value }
import { createStyles } from 'responsive-react-native'

const styles = createStyles({
  view: {
    // Value for current breakpoint will be used.
    width: { small: 10, medium: 20, large: 30 },
    // Orientation will decide value [portrait, landscape].
    padding: [10, 20],
    // Platform can also be used as object key.
    height: { ios: 20, android: 40 }
  },
})

export default () => <View style={styles.view} />
import { useResponsive } from 'responsive-react-native'

export default () => {
  const { breakpoint, orientation } = useResponsive()

  if (breakpoint === 'small') {
    return null
  }
  
  return (
    <View style={styles.view} />
  )
}
Breakpoints
In addition to picking values based on breakpoint the current breakpoint can also be accessed to dynamically render specific content. In addition to the default small, medium and large breakpoint other breakpoints can be configured.

Styled API

Guaranteed to take the React Native development experience to the next level the Styled API especially removes the need for any rerenders when the styles change.
import { Styled } from 'responsive-react-native'

const CustomView = Styled(
  'View',
  {
    backgroundColor: 'gray',
    padding: 10,
  },
  {
    // Truthy prop.
    highlight: {
      backgroundColor: 'red',
    }
  }
)

export default () => <CustomView highlight />

Observable Styles with MobX

When a function is passed and MobX is installed the styles will automatically adapt whenever any of the state accessed inside changes.

import { observable } from 'mobx'
import { Styled } from 'responsive-react-native'

const Store = observable({ highlight: false })

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

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