react-native-responsive-similar v0.1.3

IOS

with react-native-responsive-similar

without react-native-responsive-similar

Android

with react-native-responsive-similar

without react-native-responsive-similar

react-native-responsive-similar is a small and simple package that helps make your React Native app responsive easily.

You can use it for width, height, top, bottom, fontSize, borderRadius, margin, padding,...

Default device size: 360 X 640

Prerequisites

This library uses react-native-extra-dimensions-android to help Android not be wrong value.

Details: Dimensions.get('window').height sometimes returns the wrong value.

Install:

npm install react-native-extra-dimensions-android@1.2.5 --save

or

yarn add react-native-extra-dimensions-android@1.2.5

Installation

npm install react-native-responsive-similar --save

or

yarn add react-native-responsive-similar

Usage

Responsive

import similar from "react-native-responsive-similar";
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    height: similar(100, "h"),
    width: similar(100),
  },
  text: {
    fontSize: similar(16),
  },
});

Orientation

Hooks

import { useOrientation } from "react-native-responsive-similar";

const index = () => {
  useOrientation((e) => {
    console.log(e);
    // return {"fontScale": number, "height": number, "scale": number, "width":number, "orientation": "portrait" || "landscape" }
  });

  return <View>...</View>;
};
export default index;

Classes

import {
  removeListenerOrientation,
  listenerOrientation,
} from "react-native-responsive-similar";

class index extends React.Component {
  componentDidMount() {
    listenerOrientation((e) => {
      console.log(e);
      // return {"fontScale": number, "height": number, "scale": number, "width":number, "orientation": "portrait" || "landscape" }
    });
  }
  componentWillUnmount() {
    removeListenerOrientation();
  }
  render() {
    return <View>...</View>;
  }
}
export default index;

Dimensions

import { width, height } from "react-native-responsive-similar";

License

MIT

Pull requests

Always welcome!