Awesome
React Native CSS modules with CSS Media Queries
An example app to show how CSS Media Queries work in React Native.
Quick links: Features • Screenshots • Try it • Documentation
<img src="screenshots/react-native-css-media-queries.gif" width="600">
This example app re-implements "Responsive Full Width Tabs" demo from Tympanus Codrops website in React Native.
The example app should look and work exactly the same way in both browser and React Native.
To see code examples, have a look at styles.css and App.js inside src folder.
Example App features
React Native and Web
- :computer: Uses the same CSS Media Queries for responsive scaling in React Native and web browsers.
- :tada: Allows
className
andstyle
properties to be used on React Native elements such as<Text>
or<View>
. - :fire: CSS Hot loading (live reloading).
- :mag: Custom stylelint config for React Native CSS modules
React Native specific
- :package: Uses React Native CSS modules
- :globe_with_meridians: Platform specific file extensions, e.g.
styles.ios.css
,styles.android.css
,styles.native.css
.
Web specific
- :package: Uses Webpack + CSS modules.
- :wrench: Uses React Native for Web to make most React Native elements work in the browser.
Supported Browsers
- Mobile: Android Stock browser (4.4-5.x), Android Chrome, iOS Safari 8+
- Desktop: Firefox, Chrome, Safari
Try it
Step 1: Install depencies to run React Native
Make sure that you have react-native-cli
installed (npm install -g react-native-cli
) and XCode (for iOS development) / Android Studio (for Android development) installed and working.
- Go to "Building Projects with Native Code" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html
Step 2: Clone the repo and move to project
git clone git@github.com:kristerkari/react-native-css-modules-with-media-queries-example.git
cd react-native-css-modules-with-media-queries-example
Step 3: Install example app's dependencies
npm install
Step 4: Run React Native packager
You can open a new terminal tab to run React Native's packager.
npm start
Step 5: Run app on Android, iOS or Web
First make sure that your Android emulator or iOS simulator is working, then:
npm run ios
or
npm run android
or
npm run web
Web app can be accessed by opening http://localhost:8080
in a browser.
...or if you use Yarn:
yarn ios
yarn android
yarn web
Screenshots
iPhone 8
Left: iOS Safari browser<br> Right: React Native
<img src="screenshots/iphone-browser-portrait.png" width="50%"><img src="screenshots/iphone-native-portrait.png" width="50%"> <img src="screenshots/iphone-browser-landscape.png" width="50%"><img src="screenshots/iphone-native-landscape.png" width="50%">
iPad 5G
Left: iOS Safari browser<br> Right: React Native
<img src="screenshots/ipad-browser-portrait.png" width="50%"><img src="screenshots/ipad-native-portrait.png" width="50%"> <img src="screenshots/ipad-browser-landscape.png" width="50%"><img src="screenshots/ipad-native-landscape.png" width="50%">
Android Nexus 5X
Left: Android Chrome browser<br> Right: React Native
<img src="screenshots/android-browser-portrait.png" width="50%"><img src="screenshots/android-native-portrait.png" width="50%"> <img src="screenshots/android-browser-landscape.png" width="50%"><img src="screenshots/android-native-landscape.png" width="50%">