CODEWITHSUNDEEP
react-native
Ayushi Jain
Ayushi Jain

Reputation: 372

media query is not working in react-native

my first media query ("@media only screen and (min-device-width:320) and (max-device-width:359)") is not working, else both of them are responding right.

{   "@media only screen and (min-device-width:295) and (max-device-width:359)": {

        button: {
            height:70,
            margin:4
        },
        buttonText: {
            fontSize :12
        },      
    }
},
{   "@media only screen and (min-device-width:360) and (max-device-width:374)": {
        button: {
            height:86,
            margin:6
        },
        buttonText: {
            fontSize :15
        },      
    }
},

{   "@media only screen and (min-device-width:375) and (max-device-height:811)": 
   {
        button: {
            height:86,
            margin:6
        },
        buttonText: {
            fontSize :15
        },
    }   
}

Upvotes: 4

Views: 11945

Answers (2)

Ehsan Sarshar
Ehsan Sarshar

Reputation: 3211

I made a simple lib for handling responsive UI in react native https://github.com/TheEhsanSarshar/react-native-stylesheet-plus

Upvotes: 1

Saeed Rohani
Saeed Rohani

Reputation: 3014

There are many libraries for using media queries with React-Native like React Native Responsive UI, React Native CSS Media Query Processor, etc.

One of the best approaches is using @expo/match-media which enables you to use most of your favorite responsive React libraries with Expo for iOS, Android, and Web, it also observes the screen size for Android devices that use split-screen functionality.

First, install the packages:

npm install @expo/match-media react-responsive

Then import the package at the root of your project:

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import "@expo/match-media";
import { useMediaQuery } from "react-responsive";

export default function App() {
    const isTabletOrMobileDevice = useMediaQuery({
        query: "(max-device-width: 1224px)",
    });
    const isDeviceWidth295_359 = useMediaQuery({
        query: "(min-device-width:295) and (max-device-width:359)",
    });
    const isDeviceWidth375_811 = useMediaQuery({
        query: "(min-device-width:375) and (max-device-height:811)",
    });
    const isDeviceWidth360_374 = useMediaQuery({
        query: "(min-device-width:360) and (max-device-width:374)",
    });

    if (isTabletOrMobileDevice) {
        if (isDeviceWidth295_359) {
            return (
                <View style={styles.media295_359.button}>
                    <Text style={styles.media295_359.buttonText}>Mobile Device</Text>
                </View>
            );
        } else if (isDeviceWidth360_374) {
            return (
                <View style={styles.media360_374.button}>
                    <Text style={styles.media360_374.buttonText}>Mobile Device</Text>
                </View>
            );
        } else if (isDeviceWidth375_811) {
            return (
                <View style={styles.media375_811.button}>
                    <Text style={styles.media375_811.buttonText}>Mobile Device</Text>
                </View>
            );
        } else {
            return (
                <View>
                    <Text>Mobile Device</Text>
                </View>
            );
        }
    }
    return <Text>Desktop</Text>;
}
const styles = StyleSheet.create({
    media295_359: {
        button: {
            height: 70,
            margin: 4,
        },
        buttonText: {
            fontSize: 12,
        },
    },
    media360_374: {
        button: {
            height: 86,
            margin: 6,
        },
        buttonText: {
            fontSize: 15,
        },
    },
    media375_811: {
        button: {
            height: 86,
            margin: 6,
        },
        buttonText: {
            fontSize: 15,
        },
    },
});

Upvotes: 3

Related Questions