# react-native-getscreen

> A react-native higher order component which provides some methods to determine your screen type

Latest version **0.0.3** (published 2019-08-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-getscreen
pnpm add react-native-getscreen
yarn add react-native-getscreen
bun add react-native-getscreen
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-08-02 |
| First published | 2019-08-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 38.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Calin Ortan |
| Maintainers | ziaulrehman |
| Keywords | react-native, react-native-web, screen, responsive |

## Links

- npm: https://www.npmjs.com/package/react-native-getscreen
- Repository: https://github.com/ziaulrehman40/react-native-getscreen
- Homepage: https://github.com/ziaulrehman40/react-native-getscreen#readme
- Issues: https://github.com/ziaulrehman40/react-native-getscreen/issues
- npm.io page: https://npm.io/package/react-native-getscreen

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.8.3
- [react-native](https://npm.io/package/react-native.md) ^0.59.10
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1

## Recent versions

- 0.0.3 (latest) — 2019-08-02

## README

### REACT-GETSCREEN

This package provides a React Native higher order component which adds
some useful methods to your wrapped components in order to
get your screen width. And it also causes state change on screen type change if `shouldListenOnResize` is enabled(which is by default), which means a re-render of the screen when size changes.

While you should solve your responsiveness issues with css,
sometimes you just need to render different components depending
on the display type.

**This package is a port of react library (react-getscreen)[https://github.com/calinortan/react-getscreen] to react-native**

###### Install
```
npm install react-native-getscreen --save
```

###### Example

```
import React, { Component } from 'react';
import { View } from 'react-native';
import { withGetScreen } from 'react-getscreen'

class Test extends Component {
  render() {
    if (this.props.isMobile()) return <View>Mobile</View>;
    if (this.props.isTablet()) return <View>Tablet</View>;
    return <View>Desktop</View>;
  }
}

export default withGetScreen(Test);
```

Supports an `options` object containing following props:
- `mobileLimit` - Max width for mobile display. default = 468
- `tabletLimit` - Max width for tablet display. default = 768
- `shouldListenOnResize` - Boolean describing whether it should listen on screen resize. default = true

---
_Source: https://npm.io/package/react-native-getscreen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._