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 a device is tablet or not in React Native.

I prefer to use react native device info library from react native community 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?

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.

First of all install and link the library using the following commands:

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

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

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

class Home extends Component {

    componentDidMount(){
        const isTablet = DeviceInfo.isTablet();
        console.log(isTablet);
    }

    constructor(props){
        super(props);
    }

    render() {
        return (
        <View style={styles.container}>
        <Text>
        Hello World
        </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;

Leave a Reply

%d bloggers like this: