This package is not working

[udemezue01]

I tried using this package, on my package and I did not get this to work.

[kasinskas]

I'm sorry, but it's hard to understand what is wrong based on what you wrote. Could you elaborate? I'm using this package myself on several projects without any issues.

[udemezue01]

I will show my code.

I wanted to create responsiveness based on a certain screen type here is my code.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {SafeAreaView, View, Text, Button, Image} from 'react-native';
import StyleSheet from 'react-native-media-query';

import tailwind from 'tailwind-rn';



const Landing= ({navigation}) => {
  return (
    <SafeAreaView style={[styles.container, tailwind('bg-gray-50 h-full')]} >


      {/* The container */}
		<View style={tailwind('bg-white h-full rounded-lg justify-center px-4')}>


        <Image source={require('../../assets/ufarmlogo.png')}
              style={tailwind('flex flex-row h-full w-full object-cover object-center justify-center items-center')}
        />


          <View style={tailwind('mt-24')}> 
    
          <Text 

          onPress={() => navigation.navigate('Register')}

          style={[styles.btn, tailwind('py-3 px-3 rounded-md font-black text-lg tracking-wider text-center text-white')]} > 

          Get started
          </Text>

            </View>
            
		</View>

    {/* End of the container */}
	</SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
   
    paddingLeft:550,
    paddingRight:550,
    '@media (max-width: 200px)': {
      paddingLeft:350,
      paddingRight:350,
  },

  '@media (max-width: 200px)': {
    paddingLeft:50,
    paddingRight:50,
},

  },

  btn: {
   
    backgroundColor:'#72A320',

  },
 
});

export default Landing

[udemezue01]

I wanted to set the padding based on the media queries, but unfortunately it did not work

[kasinskas]

So what exactly is not working? I assume this is mobile and not web? What's the size of the device and what styles are being applied?

[kasinskas]

First of all StyleSheet.create returns an object that contains ids that are used on web and actual styles.

const {ids, styles} = StyleSheet.create

This is mentioned in the readme - https://github.com/kasinskas/react-native-media-query#usage

Secondly, your @media rules have the same max-width.

[udemezue01]

So what exactly is not working? I assume this is mobile and not web? What's the size of the device and what styles are being applied?

This is react native web, I am developing a web app

[udemezue01]

First of all StyleSheet.create returns an object that contains ids that are used on web and actual styles.

const {ids, styles} = StyleSheet.create

This is mentioned in the readme - https://github.com/kasinskas/react-native-media-query#usage

Secondly, your @media rules have the same max-width.

I will try it out and see, I wanted to have many media query perform various styles.

[kasinskas]

So what exactly is not working? I assume this is mobile and not web? What's the size of the device and what styles are being applied?

This is react native web, I am developing a web app

Well then you're also missing dataSet (or data-media depending on your rn-web version) prop. It's also mentioned in the readme, please have a look.

[udemezue01]

Thanks, I will check and get back.