CODEWITHSUNDEEP
react-nativesassmedia-queries
Vikas Jadhav
Vikas Jadhav

Reputation: 4692

How to use media query in react native?

I have used SCSS in my react native application ,so i want to use media query for mobile devices.

I have used react-native-sass-transformer plugin for translate scss into css.

My problem is media queries not getting applied in react native.

Upvotes: 0

Views: 3078

Answers (2)

hong developer
hong developer

Reputation: 13906

Did you set it up correctly?

Your App.scss file might look like this:

%blue {
  color: blue;
}
.myClass {
  @extend %blue;
}
.myOtherClass {
  color: red;
}
.my-dashed-class {
  color: green;
}

When you import your stylesheet:

import styles from "./App.scss";

Plain React Native:

<MyElement style={styles.myClass} />

<MyElement style={styles["my-dashed-class"]} />

Config:

For React Native v0.57 or newer / Expo SDK v31.0.0 or newer Add this to metro.config.js in your project's root (create the file if it does not exist already):

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

Upvotes: 1

Marcelo Wippel
Marcelo Wippel

Reputation: 571

You can use the react-native-css-media-query-processor package, provided by the same author of the react-native-sass-transformer package.

GitHub project: Here

Upvotes: 2

Related Questions