React Native CSS modules with styleName syntax

This is an example app that shows how you can use the styleName syntax in React Native.

Quick links: Features • Try it • Documentation

---

This app takes Tape Recorder codepen by Scott O'Hara and ports it to React Native. You can try it by running it in both the browser and React Native.

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

Example App features

React Native and Web

• 🎉 Allows styleName and style properties to be used on React Native elements such as <Text> or <View>.
• 🔥 CSS Hot loading (live reloading).
• 🔍 Custom stylelint config for React Native CSS modules

React Native specific

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

Web specific

• 📦 Uses Webpack + CSS modules + babel-plugin-react-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 [email protected]:kristerkari/react-native-css-modules-stylename-example.git
cd react-native-css-modules-stylename-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