How to Check a Device is Tablet or not in React Native

There are tons of mobile devices including smartphones and tablets with different dimensions and resolutions. Hence, sometimes it is important for developers to identify the device. In this blog post, I will tell you how to detect whether a device is a tablet or not in React Native.

I prefer to use react native device info library to identify tablets. In my opinion, it is one of the most popular as well as one of the most useful react native libraries.

Using react native device info library you can get much useful information from the user- such as app version, build version, bundle id, device model, country, time zone, battery level, IP address, manufacturer, installation time, etc.

So how to detect a device tablet or not using react native device info library?

First of all, install the library using any of the following commands.

yarn add react-native-device-info

or

npm install --save react-native-device-info

If you have any issues with installation then follow the instructions given here.

In order to identify a tablet, you have to invoke isTablet() method. When the method returns true then it means the app is running on a tablet. Go through the react native example given below.

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

const Home = () => {
  useEffect(() => {
    const isTablet = DeviceInfo.isTablet();
    console.log(isTablet);
  }, []);

  return (
    <View style={styles.container}>
      <Text>App</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  image: {
    height: 180,
    width: 200,
    transform: [{rotate: '90deg'}],
  },
});

export default Home;

That’s how you check whether a device is a tablet or not in react native.