Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

React Native Responsive Similar

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!

About

Package that helps make your React Native app responsive easily.

Resources

License

Releases

No releases published
You can’t perform that action at this time.