Navigate back to the homepage

How to detect tablet in react native

Infinitbility
React Native
August 24th, 2021 · 1 min read
How to detect tablet in react native

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.
1npm install --save react-native-device-info
  • Link react-native-device-info package if your react native version less then 0.63.
1npx react-native link react-native-device-info

Syntax

DeviceInfo.isTablet() function usages syntax.

1import DeviceInfo from 'react-native-device-info';
2
3
4const isTablet = DeviceInfo.isTablet();
5// true

Example

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

React Native Device Info isTablet example

1import React, { Component } from 'react';
2import {
3 StyleSheet,
4 View,
5 Text,
6 SafeAreaView,
7} from 'react-native';
8import DeviceInfo from 'react-native-device-info';
9
10
11class App extends Component {
12
13 render() {
14 let isTablet = DeviceInfo.isTablet();
15 console.log("isTablet", isTablet);
16 return (
17 <SafeAreaView style={{ flex: 1 }}>
18 <View style={styles.container}>
19 <Text>Application open in tablet</Text>
20 <Text>{`${isTablet}`}</Text>
21 </View>
22 </SafeAreaView>
23 );
24 }
25}
26
27const styles = StyleSheet.create({
28 container: {
29 flex: 1,
30 alignItems: 'center',
31 marginTop: 20,
32 backgroundColor: '#ffffff',
33 },
34});
35
36export default App;

Output

React Native, DeviceInfo, isTablet, Example

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to lock orientation in react native

How to lock orientation in react native

React Native lock or disable orientation example

August 22nd, 2021 · 1 min read
How to solve RecordRTC recorded video seekable issue

How to solve RecordRTC recorded video seekable issue

React RecordRTC save seekable recorded video example

August 21st, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]