Skip to content

kristerkari/react-native-css-modules-with-viewport-units-example

Repository files navigation

React Native CSS modules with CSS Viewport Units

Platform - Android, iOS and Web PRs Welcome

This is an example app that shows how you can use CSS Viewport Units in React Native.

This app should work the same way as vw/vh Middle Div codepen by Martin Falkus. You can try to run in first in the browser and then see how it works in React Native.

To see code examples, have a look at ViewportUnits.css and ViewportUnits.js inside src folder.

Quick links: FeaturesTry itDocumentation

Example App features

React Native and Web

React Native specific

Web specific

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.

Step 2: Clone the repo and move to project

git clone git@github.com:kristerkari/react-native-css-modules-with-viewport-units-example.git
cd react-native-css-modules-with-viewport-units-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