Hello Friends đź‘‹,

Welcome To Infinitbility! ❤️

Sometimes, we have to write diffrent code for tablet but React Native haven’t any native package to know application open in tablet or not.

This tutorial will help you to detect when your react native app open in tablet, here we will use react-native-device-info ( https://github.com/react-native-device-info/react-native-device-info ) for detect android is tablet or normal phone.

Introduction

React Native device info provide isTablet() function to detect android is tablet or normal phone it will return only true or false. isTablet() function work in ios, android, and windows platform.

Installation

  • Go to your project directory and install react-native-device-info package using npm.
npm install --save react-native-device-info
  • Link react-native-device-info package if your react native version less then 0.63.
npx react-native link react-native-device-info

Syntax

DeviceInfo.isTablet() function usages syntax.


import DeviceInfo from 'react-native-device-info';


const isTablet = DeviceInfo.isTablet();
// true

Example

In Below Example, we will isTablet() value on constant and show in application.

React Native Device Info isTablet example

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  SafeAreaView,
} from 'react-native';
import DeviceInfo from 'react-native-device-info';


class App extends Component {

  render() {
    let isTablet = DeviceInfo.isTablet();
    console.log("isTablet", isTablet);
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <Text>Application open in tablet</Text>
          <Text>{`${isTablet}`}</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 20,
    backgroundColor: '#ffffff',
  },
});

export default App;

Output

React Native, DeviceInfo, isTablet, Example

Thanks for Reading…