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

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>
)

Getting Started GitHub ↓ Styled API

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 14

1170 x 2532 · 6.1"

390 x 844 @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.

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>
)

"This plugin however goes much further while still being simpler."

onwebfocus.com Blog