kristerkari/react-native-css-modules-with-typescript-example

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

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

• 📦 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.
• 📦 Uses custom Typescript @types/react-native package with support for className property.
• 🎉 Allows className and style properties to be used on React Native elements such as <Text> or <View>.
• 🔥 CSS Hot loading (live reloading).
• 👌 Uses Sass and CSS for styles
• 🔍 Custom stylelint config for React Native CSS modules

React Native specific

• 📦 Uses React Native CSS modules
• 🌐 Platform specific file extensions, e.g. styles.ios.css, styles.android.css, styles.native.css.

Web specific

• 📦 Uses Webpack + CSS modules.
• 🔧 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

or

yarn android

or

yarn web

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

Screenshots

iOS - Android - Web