Awesome

React Native + CSS modules + Typescript

A simple example app that shows how you can use CSS modules + Typescript with React Native and React (for browser).

Have a look at the src folder to see code examples.

Quick links: Features • Screenshots • Try it • Documentation

Example App features

React Native and Web

:package: Automatically generates Typescript typings (.d.ts files) for CSS and Sass files using react-native-typed-css-transformer, react-native-typed-sass-transformer and Webpack's typings-for-css-modules-loader.
:package: Uses custom Typescript @types/react-native package with support for className property.
:tada: Allows className and style properties to be used on React Native elements such as <Text> or <View>.
:fire: CSS Hot loading (live reloading).
:ok_hand: Uses Sass and CSS for styles
: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-typescript-example.git
cd react-native-css-modules-with-typescript-example

Step 3: Install example app's dependencies

NodeJS packages:

yarn install

and CocoaPods for iOS:

cd ios && pod install

Step 4: Run React Native packager

You can open a new terminal tab to run React Native's packager.

yarn start

Step 5: Run app on Android, iOS or Web

First make sure that your Android emulator or iOS simulator is working, then:

yarn ios

yarn android

yarn web

Web app can be accessed by opening http://localhost:8080 in a browser.

Screenshots

iOS - Android - Web