formidablelabs / react-native-responsive-styles

React Native styles that respond to orientation change

react-native-responsive-styles

React Native styles that respond to device orientation change

---

How-to

Installation:

npm i --save react-native-responsive-styles

This library depends on walmartlabs/react-native-orientation-listener, which contains native dependencies for iOS and Android. Link them with:

react-native link react-native-orientation-listener

You can now import StyleSheet and any React components from react-native-responsive-styles instead of react-native:

import {
  View,
  Image,
  ScrollView,
  StyleSheet
} from 'react-native-responsive-styles';

You can then define custom style properties for landscape and portrait orientations:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // define separate styles for portrait and landscape
    portrait: {
      flexDirection: 'column'
    },
    landscape: {
      flexDirection: 'row'
    }
  },
  mainContent: {
    flex: 8,
    // override a default value when orientation is landscape
    landscape: {
      flex: 1
    }
  },
  secondaryContent: {
    flex: 1,
    // override a default value when orientation is portrait
    portrait: {
      backgroundColor: '#ccc'
    }
  }
});

Usage of StyleSheet.create is not required. Plain style objects will work as well, as long as you use the React components from this package.

That's it!

Demo

Advanced features

Animate transitions

You can apply a LayoutAnimation to orientation changes. Valid animation values are spring, linear and easeInEaseOut.

StyleSheet.configureLayoutAnimation('spring');

The default behaviour is no animation, but configuring one is recommended to avoid visual glitches when rearranging elements.

Make your custom components responsive

To add support for orientation-specific styles to your own components or other third-party components, wrap them in a higher-order component with StyleSheet.makeResponsive:

import React from 'react';
import StyleSheet from 'react-native-responsive-styles';

class CustomComponent extends React.Component({
  //...
});

export default StyleSheet.makeResponsive(CustomComponent);

In most cases this should not be required. You can simply nest your component in a responsive View.

Hiding elements

A common use case is to hide an element entirely in one orientation. You can use StyleSheet.hidden for that:

const styles = StyleSheet.create({
  landscapeOnly: {
    flex: 1,
    portrait: StyleSheet.hidden
  }
})

Please note

This project is in a pre-release state. The API may be considered relatively stable, but changes may still occur.

MIT licensed

Maintenance Status

Archived: This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!

react-native-responsive-styles's Issues

react-native-orientation-listener improvements

I am interested in using your lib in production but the native dependency seems quite broken on Android at least, it is way too sensitive for the purposes that we need which causes a lot of unnecessary work on the JS thread.

I am undecided on how to improve the situation, should I add a native component to this lib or fork react-native-orientation-listener and fix it there.
Notice that I think that the fork would be better for this library but worse if you actually want the sensitivity so I don't think it should be merged upstream.

Are you interested in having the native part in the repo or would you rather keep the native part separated?

Touchable child must either be native or forward setNativeProps to a native component at invariant

hi, my react-native version 0.37.0, and I use below object which provide to Stylesheet

styles

banner: {
  position: 'absolute',
  left: 0,
  right: 0,
  portrait: {
    top: 64 + 7,
  },
  landscape: {
    top: 0,
  },
}

js code

import React, { Component, } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback,
} from 'react-native-responsive-styles';

class Banner extends Component {
  static styles = StyleSheet.create(styles);

  render() {
    const { styles, } = Banner;

    return () {
      <View style={styles.banner}>
        <TouchableWithoutFeedback
          onPress={actsMixed.platform.toggleDropDown}>
          <Animated.View style={[ styles.backDrop, { opacity: this.state.backdropOpacity, }, ]} />
        </TouchableWithoutFeedback>

        {/* some other components */}
      </View>
    }
    
  }
}

but I encounter the error as title say, how could I fix it?

thanks for your time.

regards.

Unknown is not an Object (evaluating 'ComponentClass.displayName')

I keep getting this error as mentioned in the Subject.

RN version: 38

_reactNativeResponsiveStyles.makeResponsive is not a function

From the docs:

import React from 'react';
import { makeResponsive } from 'react-native-responsive-styles';

class CustomComponent extends React.Component({
  //...
});

export default makeResponsive(CustomComponent);

Doing this throws:

(0, _reactNativeResponsiveStyles.makeResponsive) is not a function

It looks like makeResponsive is not actually a top level method, but rather a method of StyleSheet. Unsure if the docs or the code should change, happy to make a pr to fix once confirmed.