├── .bundle └── config ├── .eslintrc.js ├── .github └── dependabot.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── .watchmanconfig ├── Gemfile ├── Gemfile.lock ├── README.md ├── android ├── app │ ├── build.gradle │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── fonts │ │ │ └── FontAwesome.ttf │ │ ├── java │ │ └── com │ │ │ └── cssmodulesexample │ │ │ ├── MainActivity.kt │ │ │ └── MainApplication.kt │ │ └── res │ │ ├── drawable │ │ └── rn_edit_text_material.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── images ├── css-modules-logo.svg ├── plus.svg ├── react-native-logo.png └── react-native-logo.svg ├── index.html ├── index.js ├── index.web.js ├── ios ├── .xcode.env ├── CSSModulesExample.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── CSSModulesExample.xcscheme ├── CSSModulesExample.xcworkspace │ └── contents.xcworkspacedata ├── CSSModulesExample │ ├── AppDelegate.h │ ├── AppDelegate.mm │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ ├── PrivacyInfo.xcprivacy │ └── main.m ├── CSSModulesExampleTests │ ├── CSSModulesExampleTests.m │ └── Info.plist ├── Podfile └── Podfile.lock ├── jest.config.js ├── metro.config.js ├── package.json ├── patches └── react-native-web+0.19.12.patch ├── polyfills.js ├── rn-transformer.js ├── screenshots ├── android.png ├── ios.png └── web3.png ├── src ├── App.css ├── App.js ├── App.native.css ├── Buttons.js ├── Buttons.scss ├── FontAwesome.js ├── FontAwesome.native.js ├── Link.css ├── Link.js ├── ProfileCard.css ├── ProfileCard.js ├── _ButtonColors.scss ├── images │ ├── avatar.png │ └── iceland.jpg └── utils │ ├── camelCase.js │ └── titleCase.js ├── webpack.config.js └── yarn.lock /.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | **/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | **/fastlane/report.xml 51 | **/fastlane/Preview.html 52 | **/fastlane/screenshots 53 | **/fastlane/test_output 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # Ruby / CocoaPods 59 | **/Pods/ 60 | /vendor/bundle/ 61 | 62 | # Temporary files created by Metro to check the health of the file watcher 63 | .metro-health-check* 64 | 65 | # testing 66 | /coverage 67 | 68 | # Yarn 69 | .yarn/* 70 | !.yarn/patches 71 | !.yarn/plugins 72 | !.yarn/releases 73 | !.yarn/sdks 74 | !.yarn/versions 75 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | ios/Pods 2 | vendor 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Cocoapods 1.15 introduced a bug which break the build. We will remove the upper 7 | # bound in the template on Cocoapods with next React Native release. 8 | gem 'cocoapods', '>= 1.13', '< 1.15' 9 | gem 'activesupport', '>= 6.1.7.5', '< 7.1.0' 10 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.7) 5 | base64 6 | nkf 7 | rexml 8 | activesupport (7.0.8.1) 9 | concurrent-ruby (~> 1.0, >= 1.0.2) 10 | i18n (>= 1.6, < 2) 11 | minitest (>= 5.1) 12 | tzinfo (~> 2.0) 13 | addressable (2.8.6) 14 | public_suffix (>= 2.0.2, < 6.0) 15 | algoliasearch (1.27.5) 16 | httpclient (~> 2.8, >= 2.8.3) 17 | json (>= 1.5.1) 18 | atomos (0.1.3) 19 | base64 (0.2.0) 20 | claide (1.1.0) 21 | cocoapods (1.14.3) 22 | addressable (~> 2.8) 23 | claide (>= 1.0.2, < 2.0) 24 | cocoapods-core (= 1.14.3) 25 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 26 | cocoapods-downloader (>= 2.1, < 3.0) 27 | cocoapods-plugins (>= 1.0.0, < 2.0) 28 | cocoapods-search (>= 1.0.0, < 2.0) 29 | cocoapods-trunk (>= 1.6.0, < 2.0) 30 | cocoapods-try (>= 1.1.0, < 2.0) 31 | colored2 (~> 3.1) 32 | escape (~> 0.0.4) 33 | fourflusher (>= 2.3.0, < 3.0) 34 | gh_inspector (~> 1.0) 35 | molinillo (~> 0.8.0) 36 | nap (~> 1.0) 37 | ruby-macho (>= 2.3.0, < 3.0) 38 | xcodeproj (>= 1.23.0, < 2.0) 39 | cocoapods-core (1.14.3) 40 | activesupport (>= 5.0, < 8) 41 | addressable (~> 2.8) 42 | algoliasearch (~> 1.0) 43 | concurrent-ruby (~> 1.1) 44 | fuzzy_match (~> 2.0.4) 45 | nap (~> 1.0) 46 | netrc (~> 0.11) 47 | public_suffix (~> 4.0) 48 | typhoeus (~> 1.0) 49 | cocoapods-deintegrate (1.0.5) 50 | cocoapods-downloader (2.1) 51 | cocoapods-plugins (1.0.0) 52 | nap 53 | cocoapods-search (1.0.1) 54 | cocoapods-trunk (1.6.0) 55 | nap (>= 0.8, < 2.0) 56 | netrc (~> 0.11) 57 | cocoapods-try (1.2.0) 58 | colored2 (3.1.2) 59 | concurrent-ruby (1.2.3) 60 | escape (0.0.4) 61 | ethon (0.16.0) 62 | ffi (>= 1.15.0) 63 | ffi (1.16.3) 64 | fourflusher (2.3.1) 65 | fuzzy_match (2.0.4) 66 | gh_inspector (1.1.3) 67 | httpclient (2.8.3) 68 | i18n (1.14.5) 69 | concurrent-ruby (~> 1.0) 70 | json (2.7.2) 71 | minitest (5.22.3) 72 | molinillo (0.8.0) 73 | nanaimo (0.3.0) 74 | nap (1.1.0) 75 | netrc (0.11.0) 76 | nkf (0.2.0) 77 | public_suffix (4.0.7) 78 | rexml (3.2.6) 79 | ruby-macho (2.5.1) 80 | typhoeus (1.4.1) 81 | ethon (>= 0.9.0) 82 | tzinfo (2.0.6) 83 | concurrent-ruby (~> 1.0) 84 | xcodeproj (1.24.0) 85 | CFPropertyList (>= 2.3.3, < 4.0) 86 | atomos (~> 0.1.3) 87 | claide (>= 1.0.2, < 2.0) 88 | colored2 (~> 3.1) 89 | nanaimo (~> 0.3.0) 90 | rexml (~> 3.2.4) 91 | 92 | PLATFORMS 93 | ruby 94 | 95 | DEPENDENCIES 96 | activesupport (>= 6.1.7.5, < 7.1.0) 97 | cocoapods (>= 1.13, < 1.15) 98 | 99 | RUBY VERSION 100 | ruby 3.3.0p0 101 | 102 | BUNDLED WITH 103 | 2.5.4 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native + CSS modules 2 | 3 | ![Platform - Android, iOS and Web](https://img.shields.io/badge/platform-Android%20%7C%20iOS%20%7C%20Web-blue.svg) 4 | [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) 5 | 6 | A simple example app that shows how you can use CSS modules with React Native and React (for browser). 7 | 8 | Have a look at the [src](/src) folder to see code examples. 9 | 10 | **Quick links:** **[Features](#example-app-features)** • **[Screenshots](#screenshots)** • **[Try it](#try-it)** • **[Documentation](https://github.com/kristerkari/react-native-css-modules#documentation)** 11 | 12 | 13 | 14 | ## Example App features 15 | 16 | #### React Native and Web 17 | 18 | - :tada: Allows `className` and `style` properties to be used on React Native elements such as `` or ``. 19 | - :fire: CSS Hot loading (live reloading). 20 | - :ok_hand: Uses [Sass](src/Buttons.scss) and [CSS](src/ProfileCard.css) for styles 21 | - :mag: [Custom stylelint config for React Native CSS modules](https://github.com/kristerkari/stylelint-config-react-native-css-modules) 22 | 23 | #### React Native specific 24 | 25 | - :package: Uses [React Native CSS modules](https://github.com/kristerkari/react-native-css-modules) 26 | - :globe_with_meridians: [Platform specific file extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions), e.g. `styles.ios.css`, `styles.android.css`, `styles.native.css`. 27 | 28 | #### Web specific 29 | 30 | - :package: Uses [Webpack](https://webpack.js.org/) + [CSS modules](https://github.com/css-modules/css-modules). 31 | - :wrench: Uses [React Native for Web](https://github.com/necolas/react-native-web) to make most React Native elements work in the browser. 32 | 33 | ## Supported Browsers 34 | 35 | - Mobile: Android Stock browser (4.4-5.x), Android Chrome, iOS Safari 8+ 36 | - Desktop: Firefox, Chrome, Safari 37 | 38 | ## Try it 39 | 40 | ### Step 1: Install depencies to run React Native 41 | 42 | Make sure that you have `react-native-cli` installed (`npm install -g react-native-cli`) and [XCode](https://developer.apple.com/xcode/) (for iOS development) / [Android Studio](https://developer.android.com/studio/index.html) (for Android development) installed and working. 43 | 44 | - Go to "Building Projects with Native Code" tab and follow the guide: https://facebook.github.io/react-native/docs/getting-started.html 45 | 46 | ### Step 2: Clone the repo and move to project 47 | 48 | ```sh 49 | git clone git@github.com:kristerkari/react-native-css-modules-example.git 50 | cd react-native-css-modules-example 51 | ``` 52 | 53 | ### Step 3: Install example app's dependencies 54 | 55 | NodeJS packages: 56 | 57 | ```sh 58 | yarn install 59 | ``` 60 | 61 | and CocoaPods for iOS: 62 | 63 | ```sh 64 | cd ios && pod install 65 | ``` 66 | 67 | ### Step 4: Run React Native packager 68 | 69 | You can open a new terminal tab to run React Native's packager. 70 | 71 | ```sh 72 | yarn start 73 | ``` 74 | 75 | ### Step 5: Run app on Android, iOS or Web 76 | 77 | First make sure that your Android emulator or iOS simulator is working, then: 78 | 79 | ```sh 80 | yarn ios 81 | ``` 82 | 83 | or 84 | 85 | ```sh 86 | yarn android 87 | ``` 88 | 89 | or 90 | 91 | ```sh 92 | yarn web 93 | ``` 94 | 95 | Web app can be accessed by opening `http://localhost:8080` in a browser. 96 | 97 | ## Screenshots 98 | 99 | **iOS - Android - Web** 100 | 101 | 102 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "org.jetbrains.kotlin.android" 3 | apply plugin: "com.facebook.react" 4 | 5 | /** 6 | * This is the configuration block to customize your React Native Android app. 7 | * By default you don't need to apply any configuration, just uncomment the lines you need. 8 | */ 9 | react { 10 | /* Folders */ 11 | // The root of your project, i.e. where "package.json" lives. Default is '..' 12 | // root = file("../") 13 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 14 | // reactNativeDir = file("../node_modules/react-native") 15 | // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen 16 | // codegenDir = file("../node_modules/@react-native/codegen") 17 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 18 | // cliFile = file("../node_modules/react-native/cli.js") 19 | 20 | /* Variants */ 21 | // The list of variants to that are debuggable. For those we're going to 22 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 23 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 24 | // debuggableVariants = ["liteDebug", "prodDebug"] 25 | 26 | /* Bundling */ 27 | // A list containing the node command and its flags. Default is just 'node'. 28 | // nodeExecutableAndArgs = ["node"] 29 | // 30 | // The command to run when bundling. By default is 'bundle' 31 | // bundleCommand = "ram-bundle" 32 | // 33 | // The path to the CLI configuration file. Default is empty. 34 | // bundleConfig = file(../rn-cli.config.js) 35 | // 36 | // The name of the generated asset file containing your JS bundle 37 | // bundleAssetName = "MyApplication.android.bundle" 38 | // 39 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 40 | // entryFile = file("../js/MyApplication.android.js") 41 | // 42 | // A list of extra flags to pass to the 'bundle' commands. 43 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 44 | // extraPackagerArgs = [] 45 | 46 | /* Hermes Commands */ 47 | // The hermes compiler command to run. By default it is 'hermesc' 48 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 49 | // 50 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 51 | // hermesFlags = ["-O", "-output-source-map"] 52 | } 53 | 54 | /** 55 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 56 | */ 57 | def enableProguardInReleaseBuilds = false 58 | 59 | /** 60 | * The preferred build flavor of JavaScriptCore (JSC) 61 | * 62 | * For example, to use the international variant, you can use: 63 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 64 | * 65 | * The international variant includes ICU i18n library and necessary data 66 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 67 | * give correct results when using with locales other than en-US. Note that 68 | * this variant is about 6MiB larger per architecture than default. 69 | */ 70 | def jscFlavor = 'org.webkit:android-jsc:+' 71 | 72 | android { 73 | ndkVersion rootProject.ext.ndkVersion 74 | buildToolsVersion rootProject.ext.buildToolsVersion 75 | compileSdk rootProject.ext.compileSdkVersion 76 | 77 | namespace "com.cssmodulesexample" 78 | defaultConfig { 79 | applicationId "com.cssmodulesexample" 80 | minSdkVersion rootProject.ext.minSdkVersion 81 | targetSdkVersion rootProject.ext.targetSdkVersion 82 | versionCode 1 83 | versionName "1.0" 84 | } 85 | signingConfigs { 86 | debug { 87 | storeFile file('debug.keystore') 88 | storePassword 'android' 89 | keyAlias 'androiddebugkey' 90 | keyPassword 'android' 91 | } 92 | } 93 | buildTypes { 94 | debug { 95 | signingConfig signingConfigs.debug 96 | } 97 | release { 98 | // Caution! In production, you need to generate your own keystore file. 99 | // see https://reactnative.dev/docs/signed-apk-android. 100 | signingConfig signingConfigs.debug 101 | minifyEnabled enableProguardInReleaseBuilds 102 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 103 | } 104 | } 105 | } 106 | 107 | dependencies { 108 | // The version of react-native is set by the React Native Gradle Plugin 109 | implementation("com.facebook.react:react-android") 110 | 111 | if (hermesEnabled.toBoolean()) { 112 | implementation("com.facebook.react:hermes-android") 113 | } else { 114 | implementation jscFlavor 115 | } 116 | } 117 | 118 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 119 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /android/app/src/main/java/com/cssmodulesexample/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.cssmodulesexample 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "CSSModulesExample" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/cssmodulesexample/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.cssmodulesexample 2 | 3 | import android.app.Application 4 | import com.facebook.react.PackageList 5 | import com.facebook.react.ReactApplication 6 | import com.facebook.react.ReactHost 7 | import com.facebook.react.ReactNativeHost 8 | import com.facebook.react.ReactPackage 9 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load 10 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 11 | import com.facebook.react.defaults.DefaultReactNativeHost 12 | import com.facebook.soloader.SoLoader 13 | 14 | class MainApplication : Application(), ReactApplication { 15 | 16 | override val reactNativeHost: ReactNativeHost = 17 | object : DefaultReactNativeHost(this) { 18 | override fun getPackages(): List = 19 | PackageList(this).packages.apply { 20 | // Packages that cannot be autolinked yet can be added manually here, for example: 21 | // add(MyReactNativePackage()) 22 | } 23 | 24 | override fun getJSMainModuleName(): String = "index" 25 | 26 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 27 | 28 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 29 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 30 | } 31 | 32 | override val reactHost: ReactHost 33 | get() = getDefaultReactHost(applicationContext, reactNativeHost) 34 | 35 | override fun onCreate() { 36 | super.onCreate() 37 | SoLoader.init(this, false) 38 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 39 | // If you opted-in for the New Architecture, we load the native entry point for this app. 40 | load() 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | CSSModulesExample 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "34.0.0" 4 | minSdkVersion = 23 5 | compileSdkVersion = 34 6 | targetSdkVersion = 34 7 | ndkVersion = "26.1.10909125" 8 | kotlinVersion = "1.9.22" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Use this property to specify which architecture you want to build. 28 | # You can also override it from the CLI using 29 | # ./gradlew -PreactNativeArchitectures=x86_64 30 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 31 | 32 | # Use this property to enable support to the new architecture. 33 | # This will allow you to use TurboModules and the Fabric render in 34 | # your application. You should enable this flag either if you want 35 | # to write custom TurboModules/Fabric components OR use libraries that 36 | # are providing them. 37 | newArchEnabled=false 38 | 39 | # Use this property to enable or disable the Hermes JS engine. 40 | # If set to false, you will be using JSC instead. 41 | hermesEnabled=true 42 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | # This is normally unused 84 | # shellcheck disable=SC2034 85 | APP_BASE_NAME=${0##*/} 86 | # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) 87 | APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit 88 | 89 | # Use the maximum available, or set MAX_FD != -1 to use that value. 90 | MAX_FD=maximum 91 | 92 | warn () { 93 | echo "$*" 94 | } >&2 95 | 96 | die () { 97 | echo 98 | echo "$*" 99 | echo 100 | exit 1 101 | } >&2 102 | 103 | # OS specific support (must be 'true' or 'false'). 104 | cygwin=false 105 | msys=false 106 | darwin=false 107 | nonstop=false 108 | case "$( uname )" in #( 109 | CYGWIN* ) cygwin=true ;; #( 110 | Darwin* ) darwin=true ;; #( 111 | MSYS* | MINGW* ) msys=true ;; #( 112 | NONSTOP* ) nonstop=true ;; 113 | esac 114 | 115 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 116 | 117 | 118 | # Determine the Java command to use to start the JVM. 119 | if [ -n "$JAVA_HOME" ] ; then 120 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 121 | # IBM's JDK on AIX uses strange locations for the executables 122 | JAVACMD=$JAVA_HOME/jre/sh/java 123 | else 124 | JAVACMD=$JAVA_HOME/bin/java 125 | fi 126 | if [ ! -x "$JAVACMD" ] ; then 127 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 128 | 129 | Please set the JAVA_HOME variable in your environment to match the 130 | location of your Java installation." 131 | fi 132 | else 133 | JAVACMD=java 134 | if ! command -v java >/dev/null 2>&1 135 | then 136 | die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | fi 142 | 143 | # Increase the maximum file descriptors if we can. 144 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 145 | case $MAX_FD in #( 146 | max*) 147 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 148 | # shellcheck disable=SC2039,SC3045 149 | MAX_FD=$( ulimit -H -n ) || 150 | warn "Could not query maximum file descriptor limit" 151 | esac 152 | case $MAX_FD in #( 153 | '' | soft) :;; #( 154 | *) 155 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 156 | # shellcheck disable=SC2039,SC3045 157 | ulimit -n "$MAX_FD" || 158 | warn "Could not set maximum file descriptor limit to $MAX_FD" 159 | esac 160 | fi 161 | 162 | # Collect all arguments for the java command, stacking in reverse order: 163 | # * args from the command line 164 | # * the main class name 165 | # * -classpath 166 | # * -D...appname settings 167 | # * --module-path (only if needed) 168 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 169 | 170 | # For Cygwin or MSYS, switch paths to Windows format before running java 171 | if "$cygwin" || "$msys" ; then 172 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 173 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 174 | 175 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 176 | 177 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 178 | for arg do 179 | if 180 | case $arg in #( 181 | -*) false ;; # don't mess with options #( 182 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 183 | [ -e "$t" ] ;; #( 184 | *) false ;; 185 | esac 186 | then 187 | arg=$( cygpath --path --ignore --mixed "$arg" ) 188 | fi 189 | # Roll the args list around exactly as many times as the number of 190 | # args, so each arg winds up back in the position where it started, but 191 | # possibly modified. 192 | # 193 | # NB: a `for` loop captures its iteration list before it begins, so 194 | # changing the positional parameters here affects neither the number of 195 | # iterations, nor the values presented in `arg`. 196 | shift # remove old arg 197 | set -- "$@" "$arg" # push replacement arg 198 | done 199 | fi 200 | 201 | 202 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 203 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 204 | 205 | # Collect all arguments for the java command: 206 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, 207 | # and any embedded shellness will be escaped. 208 | # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be 209 | # treated as '${Hostname}' itself on the command line. 210 | 211 | set -- \ 212 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 213 | -classpath "$CLASSPATH" \ 214 | org.gradle.wrapper.GradleWrapperMain \ 215 | "$@" 216 | 217 | # Stop when "xargs" is not available. 218 | if ! command -v xargs >/dev/null 2>&1 219 | then 220 | die "xargs is not available" 221 | fi 222 | 223 | # Use "xargs" to parse quoted args. 224 | # 225 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 226 | # 227 | # In Bash we could simply go: 228 | # 229 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 230 | # set -- "${ARGS[@]}" "$@" 231 | # 232 | # but POSIX shell has neither arrays nor command substitution, so instead we 233 | # post-process each arg (as a line of input to sed) to backslash-escape any 234 | # character that might be a shell metacharacter, then use eval to reverse 235 | # that process (while maintaining the separation between arguments), and wrap 236 | # the whole thing up as a single "set" statement. 237 | # 238 | # This will of course break if any of these variables contains a newline or 239 | # an unmatched quote. 240 | # 241 | 242 | eval "set -- $( 243 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 244 | xargs -n1 | 245 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 246 | tr '\n' ' ' 247 | )" '"$@"' 248 | 249 | exec "$JAVACMD" "$@" 250 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%"=="" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%"=="" set DIRNAME=. 29 | @rem This is normally unused 30 | set APP_BASE_NAME=%~n0 31 | set APP_HOME=%DIRNAME% 32 | 33 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 34 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 35 | 36 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 37 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 38 | 39 | @rem Find java.exe 40 | if defined JAVA_HOME goto findJavaFromJavaHome 41 | 42 | set JAVA_EXE=java.exe 43 | %JAVA_EXE% -version >NUL 2>&1 44 | if %ERRORLEVEL% equ 0 goto execute 45 | 46 | echo. 1>&2 47 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 48 | echo. 1>&2 49 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 50 | echo location of your Java installation. 1>&2 51 | 52 | goto fail 53 | 54 | :findJavaFromJavaHome 55 | set JAVA_HOME=%JAVA_HOME:"=% 56 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 57 | 58 | if exist "%JAVA_EXE%" goto execute 59 | 60 | echo. 1>&2 61 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 62 | echo. 1>&2 63 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 64 | echo location of your Java installation. 1>&2 65 | 66 | goto fail 67 | 68 | :execute 69 | @rem Setup the command line 70 | 71 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 72 | 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if %ERRORLEVEL% equ 0 goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | set EXIT_CODE=%ERRORLEVEL% 85 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 86 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 87 | exit /b %EXIT_CODE% 88 | 89 | :mainEnd 90 | if "%OS%"=="Windows_NT" endlocal 91 | 92 | :omega 93 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'CSSModulesExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/@react-native/gradle-plugin') 5 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CSSModulesExample", 3 | "displayName": "CSSModulesExample" 4 | } 5 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | plugins: [ 4 | 'react-native-classname-to-style', 5 | [ 6 | 'react-native-platform-specific-extensions', 7 | { 8 | extensions: ['scss', 'css'], 9 | }, 10 | ], 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /images/css-modules-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/plus.svg: -------------------------------------------------------------------------------- 1 | + -------------------------------------------------------------------------------- /images/react-native-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/images/react-native-logo.png -------------------------------------------------------------------------------- /images/react-native-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | React Native 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSSModulesExample 5 | 6 | 7 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import {AppRegistry} from 'react-native'; 2 | import App from './src/App'; 3 | import {name as appName} from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /index.web.js: -------------------------------------------------------------------------------- 1 | import {AppRegistry} from 'react-native'; 2 | import App from './src/App'; 3 | 4 | AppRegistry.registerComponent('CSSModulesExample', () => App); 5 | AppRegistry.runApplication('CSSModulesExample', { 6 | rootTag: document.getElementById('react-app'), 7 | }); 8 | 9 | if (module.hot) { 10 | module.hot.accept('./src/App'); 11 | } 12 | -------------------------------------------------------------------------------- /ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /ios/CSSModulesExample.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00E356F31AD99517003FC87E /* CSSModulesExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* CSSModulesExampleTests.m */; }; 11 | 0C80B921A6F3F58F76C31292 /* libPods-CSSModulesExample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-CSSModulesExample.a */; }; 12 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 14 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 15 | 7699B88040F8A987B510C191 /* libPods-CSSModulesExample-CSSModulesExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-CSSModulesExample-CSSModulesExampleTests.a */; }; 16 | 7CDEC88E2BF4E1450080228D /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7CDEC88D2BF4E1450080228D /* FontAwesome.ttf */; }; 17 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 18 | A70E8CA56073807D3F3DC609 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = F1C1E176D7B12562175F9B73 /* PrivacyInfo.xcprivacy */; }; 19 | /* End PBXBuildFile section */ 20 | 21 | /* Begin PBXContainerItemProxy section */ 22 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 23 | isa = PBXContainerItemProxy; 24 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 25 | proxyType = 1; 26 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 27 | remoteInfo = CSSModulesExample; 28 | }; 29 | /* End PBXContainerItemProxy section */ 30 | 31 | /* Begin PBXFileReference section */ 32 | 00E356EE1AD99517003FC87E /* CSSModulesExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = CSSModulesExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 33 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 34 | 00E356F21AD99517003FC87E /* CSSModulesExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = CSSModulesExampleTests.m; sourceTree = ""; }; 35 | 13B07F961A680F5B00A75B9A /* CSSModulesExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = CSSModulesExample.app; sourceTree = BUILT_PRODUCTS_DIR; }; 36 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = CSSModulesExample/AppDelegate.h; sourceTree = ""; }; 37 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = CSSModulesExample/AppDelegate.mm; sourceTree = ""; }; 38 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = CSSModulesExample/Images.xcassets; sourceTree = ""; }; 39 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = CSSModulesExample/Info.plist; sourceTree = ""; }; 40 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = CSSModulesExample/main.m; sourceTree = ""; }; 41 | 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = CSSModulesExample/PrivacyInfo.xcprivacy; sourceTree = ""; }; 42 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-CSSModulesExample-CSSModulesExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-CSSModulesExample-CSSModulesExampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 43 | 3B4392A12AC88292D35C810B /* Pods-CSSModulesExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CSSModulesExample.debug.xcconfig"; path = "Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample.debug.xcconfig"; sourceTree = ""; }; 44 | 5709B34CF0A7D63546082F79 /* Pods-CSSModulesExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CSSModulesExample.release.xcconfig"; path = "Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample.release.xcconfig"; sourceTree = ""; }; 45 | 5B7EB9410499542E8C5724F5 /* Pods-CSSModulesExample-CSSModulesExampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CSSModulesExample-CSSModulesExampleTests.debug.xcconfig"; path = "Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests.debug.xcconfig"; sourceTree = ""; }; 46 | 5DCACB8F33CDC322A6C60F78 /* libPods-CSSModulesExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-CSSModulesExample.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 47 | 7CDEC88D2BF4E1450080228D /* FontAwesome.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = FontAwesome.ttf; path = ../android/app/src/main/assets/fonts/FontAwesome.ttf; sourceTree = ""; }; 48 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = CSSModulesExample/LaunchScreen.storyboard; sourceTree = ""; }; 49 | 89C6BE57DB24E9ADA2F236DE /* Pods-CSSModulesExample-CSSModulesExampleTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CSSModulesExample-CSSModulesExampleTests.release.xcconfig"; path = "Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests.release.xcconfig"; sourceTree = ""; }; 50 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 51 | F1C1E176D7B12562175F9B73 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = CSSModulesExample/PrivacyInfo.xcprivacy; sourceTree = ""; }; 52 | /* End PBXFileReference section */ 53 | 54 | /* Begin PBXFrameworksBuildPhase section */ 55 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 56 | isa = PBXFrameworksBuildPhase; 57 | buildActionMask = 2147483647; 58 | files = ( 59 | 7699B88040F8A987B510C191 /* libPods-CSSModulesExample-CSSModulesExampleTests.a in Frameworks */, 60 | ); 61 | runOnlyForDeploymentPostprocessing = 0; 62 | }; 63 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 64 | isa = PBXFrameworksBuildPhase; 65 | buildActionMask = 2147483647; 66 | files = ( 67 | 0C80B921A6F3F58F76C31292 /* libPods-CSSModulesExample.a in Frameworks */, 68 | ); 69 | runOnlyForDeploymentPostprocessing = 0; 70 | }; 71 | /* End PBXFrameworksBuildPhase section */ 72 | 73 | /* Begin PBXGroup section */ 74 | 00E356EF1AD99517003FC87E /* CSSModulesExampleTests */ = { 75 | isa = PBXGroup; 76 | children = ( 77 | 00E356F21AD99517003FC87E /* CSSModulesExampleTests.m */, 78 | 00E356F01AD99517003FC87E /* Supporting Files */, 79 | ); 80 | path = CSSModulesExampleTests; 81 | sourceTree = ""; 82 | }; 83 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 84 | isa = PBXGroup; 85 | children = ( 86 | 00E356F11AD99517003FC87E /* Info.plist */, 87 | ); 88 | name = "Supporting Files"; 89 | sourceTree = ""; 90 | }; 91 | 13B07FAE1A68108700A75B9A /* CSSModulesExample */ = { 92 | isa = PBXGroup; 93 | children = ( 94 | 7CDEC88D2BF4E1450080228D /* FontAwesome.ttf */, 95 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 96 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */, 97 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 98 | 13B07FB61A68108700A75B9A /* Info.plist */, 99 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 100 | 13B07FB71A68108700A75B9A /* main.m */, 101 | 13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */, 102 | F1C1E176D7B12562175F9B73 /* PrivacyInfo.xcprivacy */, 103 | ); 104 | name = CSSModulesExample; 105 | sourceTree = ""; 106 | }; 107 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 108 | isa = PBXGroup; 109 | children = ( 110 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 111 | 5DCACB8F33CDC322A6C60F78 /* libPods-CSSModulesExample.a */, 112 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-CSSModulesExample-CSSModulesExampleTests.a */, 113 | ); 114 | name = Frameworks; 115 | sourceTree = ""; 116 | }; 117 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 118 | isa = PBXGroup; 119 | children = ( 120 | ); 121 | name = Libraries; 122 | sourceTree = ""; 123 | }; 124 | 83CBB9F61A601CBA00E9B192 = { 125 | isa = PBXGroup; 126 | children = ( 127 | 13B07FAE1A68108700A75B9A /* CSSModulesExample */, 128 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 129 | 00E356EF1AD99517003FC87E /* CSSModulesExampleTests */, 130 | 83CBBA001A601CBA00E9B192 /* Products */, 131 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 132 | BBD78D7AC51CEA395F1C20DB /* Pods */, 133 | ); 134 | indentWidth = 2; 135 | sourceTree = ""; 136 | tabWidth = 2; 137 | usesTabs = 0; 138 | }; 139 | 83CBBA001A601CBA00E9B192 /* Products */ = { 140 | isa = PBXGroup; 141 | children = ( 142 | 13B07F961A680F5B00A75B9A /* CSSModulesExample.app */, 143 | 00E356EE1AD99517003FC87E /* CSSModulesExampleTests.xctest */, 144 | ); 145 | name = Products; 146 | sourceTree = ""; 147 | }; 148 | BBD78D7AC51CEA395F1C20DB /* Pods */ = { 149 | isa = PBXGroup; 150 | children = ( 151 | 3B4392A12AC88292D35C810B /* Pods-CSSModulesExample.debug.xcconfig */, 152 | 5709B34CF0A7D63546082F79 /* Pods-CSSModulesExample.release.xcconfig */, 153 | 5B7EB9410499542E8C5724F5 /* Pods-CSSModulesExample-CSSModulesExampleTests.debug.xcconfig */, 154 | 89C6BE57DB24E9ADA2F236DE /* Pods-CSSModulesExample-CSSModulesExampleTests.release.xcconfig */, 155 | ); 156 | path = Pods; 157 | sourceTree = ""; 158 | }; 159 | /* End PBXGroup section */ 160 | 161 | /* Begin PBXNativeTarget section */ 162 | 00E356ED1AD99517003FC87E /* CSSModulesExampleTests */ = { 163 | isa = PBXNativeTarget; 164 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "CSSModulesExampleTests" */; 165 | buildPhases = ( 166 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */, 167 | 00E356EA1AD99517003FC87E /* Sources */, 168 | 00E356EB1AD99517003FC87E /* Frameworks */, 169 | 00E356EC1AD99517003FC87E /* Resources */, 170 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */, 171 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */, 172 | ); 173 | buildRules = ( 174 | ); 175 | dependencies = ( 176 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 177 | ); 178 | name = CSSModulesExampleTests; 179 | productName = CSSModulesExampleTests; 180 | productReference = 00E356EE1AD99517003FC87E /* CSSModulesExampleTests.xctest */; 181 | productType = "com.apple.product-type.bundle.unit-test"; 182 | }; 183 | 13B07F861A680F5B00A75B9A /* CSSModulesExample */ = { 184 | isa = PBXNativeTarget; 185 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "CSSModulesExample" */; 186 | buildPhases = ( 187 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, 188 | 13B07F871A680F5B00A75B9A /* Sources */, 189 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 190 | 13B07F8E1A680F5B00A75B9A /* Resources */, 191 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 192 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, 193 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, 194 | ); 195 | buildRules = ( 196 | ); 197 | dependencies = ( 198 | ); 199 | name = CSSModulesExample; 200 | productName = CSSModulesExample; 201 | productReference = 13B07F961A680F5B00A75B9A /* CSSModulesExample.app */; 202 | productType = "com.apple.product-type.application"; 203 | }; 204 | /* End PBXNativeTarget section */ 205 | 206 | /* Begin PBXProject section */ 207 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 208 | isa = PBXProject; 209 | attributes = { 210 | LastUpgradeCheck = 1210; 211 | TargetAttributes = { 212 | 00E356ED1AD99517003FC87E = { 213 | CreatedOnToolsVersion = 6.2; 214 | TestTargetID = 13B07F861A680F5B00A75B9A; 215 | }; 216 | 13B07F861A680F5B00A75B9A = { 217 | LastSwiftMigration = 1120; 218 | }; 219 | }; 220 | }; 221 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "CSSModulesExample" */; 222 | compatibilityVersion = "Xcode 12.0"; 223 | developmentRegion = en; 224 | hasScannedForEncodings = 0; 225 | knownRegions = ( 226 | en, 227 | Base, 228 | ); 229 | mainGroup = 83CBB9F61A601CBA00E9B192; 230 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 231 | projectDirPath = ""; 232 | projectRoot = ""; 233 | targets = ( 234 | 13B07F861A680F5B00A75B9A /* CSSModulesExample */, 235 | 00E356ED1AD99517003FC87E /* CSSModulesExampleTests */, 236 | ); 237 | }; 238 | /* End PBXProject section */ 239 | 240 | /* Begin PBXResourcesBuildPhase section */ 241 | 00E356EC1AD99517003FC87E /* Resources */ = { 242 | isa = PBXResourcesBuildPhase; 243 | buildActionMask = 2147483647; 244 | files = ( 245 | ); 246 | runOnlyForDeploymentPostprocessing = 0; 247 | }; 248 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 249 | isa = PBXResourcesBuildPhase; 250 | buildActionMask = 2147483647; 251 | files = ( 252 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 253 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 254 | A70E8CA56073807D3F3DC609 /* PrivacyInfo.xcprivacy in Resources */, 255 | 7CDEC88E2BF4E1450080228D /* FontAwesome.ttf in Resources */, 256 | ); 257 | runOnlyForDeploymentPostprocessing = 0; 258 | }; 259 | /* End PBXResourcesBuildPhase section */ 260 | 261 | /* Begin PBXShellScriptBuildPhase section */ 262 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 263 | isa = PBXShellScriptBuildPhase; 264 | buildActionMask = 2147483647; 265 | files = ( 266 | ); 267 | inputPaths = ( 268 | "$(SRCROOT)/.xcode.env.local", 269 | "$(SRCROOT)/.xcode.env", 270 | ); 271 | name = "Bundle React Native code and images"; 272 | outputPaths = ( 273 | ); 274 | runOnlyForDeploymentPostprocessing = 0; 275 | shellPath = /bin/sh; 276 | shellScript = "set -e\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n"; 277 | }; 278 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { 279 | isa = PBXShellScriptBuildPhase; 280 | buildActionMask = 2147483647; 281 | files = ( 282 | ); 283 | inputFileListPaths = ( 284 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample-frameworks-${CONFIGURATION}-input-files.xcfilelist", 285 | ); 286 | name = "[CP] Embed Pods Frameworks"; 287 | outputFileListPaths = ( 288 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample-frameworks-${CONFIGURATION}-output-files.xcfilelist", 289 | ); 290 | runOnlyForDeploymentPostprocessing = 0; 291 | shellPath = /bin/sh; 292 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample-frameworks.sh\"\n"; 293 | showEnvVarsInLog = 0; 294 | }; 295 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = { 296 | isa = PBXShellScriptBuildPhase; 297 | buildActionMask = 2147483647; 298 | files = ( 299 | ); 300 | inputFileListPaths = ( 301 | ); 302 | inputPaths = ( 303 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 304 | "${PODS_ROOT}/Manifest.lock", 305 | ); 306 | name = "[CP] Check Pods Manifest.lock"; 307 | outputFileListPaths = ( 308 | ); 309 | outputPaths = ( 310 | "$(DERIVED_FILE_DIR)/Pods-CSSModulesExample-CSSModulesExampleTests-checkManifestLockResult.txt", 311 | ); 312 | runOnlyForDeploymentPostprocessing = 0; 313 | shellPath = /bin/sh; 314 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 315 | showEnvVarsInLog = 0; 316 | }; 317 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { 318 | isa = PBXShellScriptBuildPhase; 319 | buildActionMask = 2147483647; 320 | files = ( 321 | ); 322 | inputFileListPaths = ( 323 | ); 324 | inputPaths = ( 325 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 326 | "${PODS_ROOT}/Manifest.lock", 327 | ); 328 | name = "[CP] Check Pods Manifest.lock"; 329 | outputFileListPaths = ( 330 | ); 331 | outputPaths = ( 332 | "$(DERIVED_FILE_DIR)/Pods-CSSModulesExample-checkManifestLockResult.txt", 333 | ); 334 | runOnlyForDeploymentPostprocessing = 0; 335 | shellPath = /bin/sh; 336 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 337 | showEnvVarsInLog = 0; 338 | }; 339 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = { 340 | isa = PBXShellScriptBuildPhase; 341 | buildActionMask = 2147483647; 342 | files = ( 343 | ); 344 | inputFileListPaths = ( 345 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", 346 | ); 347 | name = "[CP] Embed Pods Frameworks"; 348 | outputFileListPaths = ( 349 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", 350 | ); 351 | runOnlyForDeploymentPostprocessing = 0; 352 | shellPath = /bin/sh; 353 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests-frameworks.sh\"\n"; 354 | showEnvVarsInLog = 0; 355 | }; 356 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { 357 | isa = PBXShellScriptBuildPhase; 358 | buildActionMask = 2147483647; 359 | files = ( 360 | ); 361 | inputFileListPaths = ( 362 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample-resources-${CONFIGURATION}-input-files.xcfilelist", 363 | ); 364 | name = "[CP] Copy Pods Resources"; 365 | outputFileListPaths = ( 366 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample-resources-${CONFIGURATION}-output-files.xcfilelist", 367 | ); 368 | runOnlyForDeploymentPostprocessing = 0; 369 | shellPath = /bin/sh; 370 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample/Pods-CSSModulesExample-resources.sh\"\n"; 371 | showEnvVarsInLog = 0; 372 | }; 373 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = { 374 | isa = PBXShellScriptBuildPhase; 375 | buildActionMask = 2147483647; 376 | files = ( 377 | ); 378 | inputFileListPaths = ( 379 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests-resources-${CONFIGURATION}-input-files.xcfilelist", 380 | ); 381 | name = "[CP] Copy Pods Resources"; 382 | outputFileListPaths = ( 383 | "${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests-resources-${CONFIGURATION}-output-files.xcfilelist", 384 | ); 385 | runOnlyForDeploymentPostprocessing = 0; 386 | shellPath = /bin/sh; 387 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-CSSModulesExample-CSSModulesExampleTests/Pods-CSSModulesExample-CSSModulesExampleTests-resources.sh\"\n"; 388 | showEnvVarsInLog = 0; 389 | }; 390 | /* End PBXShellScriptBuildPhase section */ 391 | 392 | /* Begin PBXSourcesBuildPhase section */ 393 | 00E356EA1AD99517003FC87E /* Sources */ = { 394 | isa = PBXSourcesBuildPhase; 395 | buildActionMask = 2147483647; 396 | files = ( 397 | 00E356F31AD99517003FC87E /* CSSModulesExampleTests.m in Sources */, 398 | ); 399 | runOnlyForDeploymentPostprocessing = 0; 400 | }; 401 | 13B07F871A680F5B00A75B9A /* Sources */ = { 402 | isa = PBXSourcesBuildPhase; 403 | buildActionMask = 2147483647; 404 | files = ( 405 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 406 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 407 | ); 408 | runOnlyForDeploymentPostprocessing = 0; 409 | }; 410 | /* End PBXSourcesBuildPhase section */ 411 | 412 | /* Begin PBXTargetDependency section */ 413 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 414 | isa = PBXTargetDependency; 415 | target = 13B07F861A680F5B00A75B9A /* CSSModulesExample */; 416 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 417 | }; 418 | /* End PBXTargetDependency section */ 419 | 420 | /* Begin XCBuildConfiguration section */ 421 | 00E356F61AD99517003FC87E /* Debug */ = { 422 | isa = XCBuildConfiguration; 423 | baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-CSSModulesExample-CSSModulesExampleTests.debug.xcconfig */; 424 | buildSettings = { 425 | BUNDLE_LOADER = "$(TEST_HOST)"; 426 | GCC_PREPROCESSOR_DEFINITIONS = ( 427 | "DEBUG=1", 428 | "$(inherited)", 429 | ); 430 | INFOPLIST_FILE = CSSModulesExampleTests/Info.plist; 431 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 432 | LD_RUNPATH_SEARCH_PATHS = ( 433 | "$(inherited)", 434 | "@executable_path/Frameworks", 435 | "@loader_path/Frameworks", 436 | ); 437 | OTHER_LDFLAGS = ( 438 | "-ObjC", 439 | "-lc++", 440 | "$(inherited)", 441 | ); 442 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 443 | PRODUCT_NAME = "$(TARGET_NAME)"; 444 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/CSSModulesExample.app/CSSModulesExample"; 445 | }; 446 | name = Debug; 447 | }; 448 | 00E356F71AD99517003FC87E /* Release */ = { 449 | isa = XCBuildConfiguration; 450 | baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-CSSModulesExample-CSSModulesExampleTests.release.xcconfig */; 451 | buildSettings = { 452 | BUNDLE_LOADER = "$(TEST_HOST)"; 453 | COPY_PHASE_STRIP = NO; 454 | INFOPLIST_FILE = CSSModulesExampleTests/Info.plist; 455 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 456 | LD_RUNPATH_SEARCH_PATHS = ( 457 | "$(inherited)", 458 | "@executable_path/Frameworks", 459 | "@loader_path/Frameworks", 460 | ); 461 | OTHER_LDFLAGS = ( 462 | "-ObjC", 463 | "-lc++", 464 | "$(inherited)", 465 | ); 466 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 467 | PRODUCT_NAME = "$(TARGET_NAME)"; 468 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/CSSModulesExample.app/CSSModulesExample"; 469 | }; 470 | name = Release; 471 | }; 472 | 13B07F941A680F5B00A75B9A /* Debug */ = { 473 | isa = XCBuildConfiguration; 474 | baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-CSSModulesExample.debug.xcconfig */; 475 | buildSettings = { 476 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 477 | CLANG_ENABLE_MODULES = YES; 478 | CURRENT_PROJECT_VERSION = 1; 479 | ENABLE_BITCODE = NO; 480 | INFOPLIST_FILE = CSSModulesExample/Info.plist; 481 | LD_RUNPATH_SEARCH_PATHS = ( 482 | "$(inherited)", 483 | "@executable_path/Frameworks", 484 | ); 485 | MARKETING_VERSION = 1.0; 486 | OTHER_LDFLAGS = ( 487 | "$(inherited)", 488 | "-ObjC", 489 | "-lc++", 490 | ); 491 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 492 | PRODUCT_NAME = CSSModulesExample; 493 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 494 | SWIFT_VERSION = 5.0; 495 | VERSIONING_SYSTEM = "apple-generic"; 496 | }; 497 | name = Debug; 498 | }; 499 | 13B07F951A680F5B00A75B9A /* Release */ = { 500 | isa = XCBuildConfiguration; 501 | baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-CSSModulesExample.release.xcconfig */; 502 | buildSettings = { 503 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 504 | CLANG_ENABLE_MODULES = YES; 505 | CURRENT_PROJECT_VERSION = 1; 506 | INFOPLIST_FILE = CSSModulesExample/Info.plist; 507 | LD_RUNPATH_SEARCH_PATHS = ( 508 | "$(inherited)", 509 | "@executable_path/Frameworks", 510 | ); 511 | MARKETING_VERSION = 1.0; 512 | OTHER_LDFLAGS = ( 513 | "$(inherited)", 514 | "-ObjC", 515 | "-lc++", 516 | ); 517 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 518 | PRODUCT_NAME = CSSModulesExample; 519 | SWIFT_VERSION = 5.0; 520 | VERSIONING_SYSTEM = "apple-generic"; 521 | }; 522 | name = Release; 523 | }; 524 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 525 | isa = XCBuildConfiguration; 526 | buildSettings = { 527 | ALWAYS_SEARCH_USER_PATHS = NO; 528 | CC = ""; 529 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 530 | CLANG_CXX_LANGUAGE_STANDARD = "c++20"; 531 | CLANG_CXX_LIBRARY = "libc++"; 532 | CLANG_ENABLE_MODULES = YES; 533 | CLANG_ENABLE_OBJC_ARC = YES; 534 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 535 | CLANG_WARN_BOOL_CONVERSION = YES; 536 | CLANG_WARN_COMMA = YES; 537 | CLANG_WARN_CONSTANT_CONVERSION = YES; 538 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 539 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 540 | CLANG_WARN_EMPTY_BODY = YES; 541 | CLANG_WARN_ENUM_CONVERSION = YES; 542 | CLANG_WARN_INFINITE_RECURSION = YES; 543 | CLANG_WARN_INT_CONVERSION = YES; 544 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 545 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 546 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 547 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 548 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 549 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 550 | CLANG_WARN_STRICT_PROTOTYPES = YES; 551 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 552 | CLANG_WARN_UNREACHABLE_CODE = YES; 553 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 554 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 555 | COPY_PHASE_STRIP = NO; 556 | CXX = ""; 557 | ENABLE_STRICT_OBJC_MSGSEND = YES; 558 | ENABLE_TESTABILITY = YES; 559 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 560 | GCC_C_LANGUAGE_STANDARD = gnu99; 561 | GCC_DYNAMIC_NO_PIC = NO; 562 | GCC_NO_COMMON_BLOCKS = YES; 563 | GCC_OPTIMIZATION_LEVEL = 0; 564 | GCC_PREPROCESSOR_DEFINITIONS = ( 565 | "DEBUG=1", 566 | "$(inherited)", 567 | ); 568 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 569 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 570 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 571 | GCC_WARN_UNDECLARED_SELECTOR = YES; 572 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 573 | GCC_WARN_UNUSED_FUNCTION = YES; 574 | GCC_WARN_UNUSED_VARIABLE = YES; 575 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 576 | LD = ""; 577 | LDPLUSPLUS = ""; 578 | LD_RUNPATH_SEARCH_PATHS = ( 579 | /usr/lib/swift, 580 | "$(inherited)", 581 | ); 582 | LIBRARY_SEARCH_PATHS = ( 583 | "\"$(SDKROOT)/usr/lib/swift\"", 584 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 585 | "\"$(inherited)\"", 586 | ); 587 | MTL_ENABLE_DEBUG_INFO = YES; 588 | ONLY_ACTIVE_ARCH = YES; 589 | OTHER_CPLUSPLUSFLAGS = ( 590 | "$(OTHER_CFLAGS)", 591 | "-DFOLLY_NO_CONFIG", 592 | "-DFOLLY_MOBILE=1", 593 | "-DFOLLY_USE_LIBCPP=1", 594 | "-DFOLLY_CFG_NO_COROUTINES=1", 595 | "-DFOLLY_HAVE_CLOCK_GETTIME=1", 596 | ); 597 | OTHER_LDFLAGS = ( 598 | "$(inherited)", 599 | " ", 600 | ); 601 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 602 | SDKROOT = iphoneos; 603 | USE_HERMES = true; 604 | }; 605 | name = Debug; 606 | }; 607 | 83CBBA211A601CBA00E9B192 /* Release */ = { 608 | isa = XCBuildConfiguration; 609 | buildSettings = { 610 | ALWAYS_SEARCH_USER_PATHS = NO; 611 | CC = ""; 612 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 613 | CLANG_CXX_LANGUAGE_STANDARD = "c++20"; 614 | CLANG_CXX_LIBRARY = "libc++"; 615 | CLANG_ENABLE_MODULES = YES; 616 | CLANG_ENABLE_OBJC_ARC = YES; 617 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 618 | CLANG_WARN_BOOL_CONVERSION = YES; 619 | CLANG_WARN_COMMA = YES; 620 | CLANG_WARN_CONSTANT_CONVERSION = YES; 621 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 622 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 623 | CLANG_WARN_EMPTY_BODY = YES; 624 | CLANG_WARN_ENUM_CONVERSION = YES; 625 | CLANG_WARN_INFINITE_RECURSION = YES; 626 | CLANG_WARN_INT_CONVERSION = YES; 627 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 628 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 629 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 630 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 631 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 632 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 633 | CLANG_WARN_STRICT_PROTOTYPES = YES; 634 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 635 | CLANG_WARN_UNREACHABLE_CODE = YES; 636 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 637 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 638 | COPY_PHASE_STRIP = YES; 639 | CXX = ""; 640 | ENABLE_NS_ASSERTIONS = NO; 641 | ENABLE_STRICT_OBJC_MSGSEND = YES; 642 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 643 | GCC_C_LANGUAGE_STANDARD = gnu99; 644 | GCC_NO_COMMON_BLOCKS = YES; 645 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 646 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 647 | GCC_WARN_UNDECLARED_SELECTOR = YES; 648 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 649 | GCC_WARN_UNUSED_FUNCTION = YES; 650 | GCC_WARN_UNUSED_VARIABLE = YES; 651 | IPHONEOS_DEPLOYMENT_TARGET = 13.4; 652 | LD = ""; 653 | LDPLUSPLUS = ""; 654 | LD_RUNPATH_SEARCH_PATHS = ( 655 | /usr/lib/swift, 656 | "$(inherited)", 657 | ); 658 | LIBRARY_SEARCH_PATHS = ( 659 | "\"$(SDKROOT)/usr/lib/swift\"", 660 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 661 | "\"$(inherited)\"", 662 | ); 663 | MTL_ENABLE_DEBUG_INFO = NO; 664 | OTHER_CPLUSPLUSFLAGS = ( 665 | "$(OTHER_CFLAGS)", 666 | "-DFOLLY_NO_CONFIG", 667 | "-DFOLLY_MOBILE=1", 668 | "-DFOLLY_USE_LIBCPP=1", 669 | "-DFOLLY_CFG_NO_COROUTINES=1", 670 | "-DFOLLY_HAVE_CLOCK_GETTIME=1", 671 | ); 672 | OTHER_LDFLAGS = ( 673 | "$(inherited)", 674 | " ", 675 | ); 676 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 677 | SDKROOT = iphoneos; 678 | USE_HERMES = true; 679 | VALIDATE_PRODUCT = YES; 680 | }; 681 | name = Release; 682 | }; 683 | /* End XCBuildConfiguration section */ 684 | 685 | /* Begin XCConfigurationList section */ 686 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "CSSModulesExampleTests" */ = { 687 | isa = XCConfigurationList; 688 | buildConfigurations = ( 689 | 00E356F61AD99517003FC87E /* Debug */, 690 | 00E356F71AD99517003FC87E /* Release */, 691 | ); 692 | defaultConfigurationIsVisible = 0; 693 | defaultConfigurationName = Release; 694 | }; 695 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "CSSModulesExample" */ = { 696 | isa = XCConfigurationList; 697 | buildConfigurations = ( 698 | 13B07F941A680F5B00A75B9A /* Debug */, 699 | 13B07F951A680F5B00A75B9A /* Release */, 700 | ); 701 | defaultConfigurationIsVisible = 0; 702 | defaultConfigurationName = Release; 703 | }; 704 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "CSSModulesExample" */ = { 705 | isa = XCConfigurationList; 706 | buildConfigurations = ( 707 | 83CBBA201A601CBA00E9B192 /* Debug */, 708 | 83CBBA211A601CBA00E9B192 /* Release */, 709 | ); 710 | defaultConfigurationIsVisible = 0; 711 | defaultConfigurationName = Release; 712 | }; 713 | /* End XCConfigurationList section */ 714 | }; 715 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 716 | } 717 | -------------------------------------------------------------------------------- /ios/CSSModulesExample.xcodeproj/xcshareddata/xcschemes/CSSModulesExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /ios/CSSModulesExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"CSSModulesExample"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | return [self bundleURL]; 20 | } 21 | 22 | - (NSURL *)bundleURL 23 | { 24 | #if DEBUG 25 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 26 | #else 27 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 28 | #endif 29 | } 30 | 31 | @end 32 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | CSSModulesExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | 30 | NSAllowsArbitraryLoads 31 | 32 | NSAllowsLocalNetworking 33 | 34 | 35 | NSLocationWhenInUseUsageDescription 36 | 37 | UILaunchStoryboardName 38 | LaunchScreen 39 | UIRequiredDeviceCapabilities 40 | 41 | arm64 42 | 43 | UISupportedInterfaceOrientations 44 | 45 | UIInterfaceOrientationPortrait 46 | UIInterfaceOrientationLandscapeLeft 47 | UIInterfaceOrientationLandscapeRight 48 | 49 | UIViewControllerBasedStatusBarAppearance 50 | 51 | UIAppFonts 52 | 53 | FontAwesome.ttf 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyCollectedDataTypes 33 | 34 | NSPrivacyTracking 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /ios/CSSModulesExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ios/CSSModulesExampleTests/CSSModulesExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface CSSModulesExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation CSSModulesExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /ios/CSSModulesExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'CSSModulesExample' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | target 'CSSModulesExampleTests' do 27 | inherit! :complete 28 | # Pods for testing 29 | end 30 | 31 | post_install do |installer| 32 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 33 | react_native_post_install( 34 | installer, 35 | config[:reactNativePath], 36 | :mac_catalyst_enabled => false, 37 | # :ccache_enabled => true 38 | ) 39 | end 40 | end 41 | -------------------------------------------------------------------------------- /ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.83.0) 3 | - DoubleConversion (1.1.6) 4 | - FBLazyVector (0.74.3) 5 | - fmt (9.1.0) 6 | - glog (0.3.5) 7 | - hermes-engine (0.74.3): 8 | - hermes-engine/Pre-built (= 0.74.3) 9 | - hermes-engine/Pre-built (0.74.3) 10 | - RCT-Folly (2024.01.01.00): 11 | - boost 12 | - DoubleConversion 13 | - fmt (= 9.1.0) 14 | - glog 15 | - RCT-Folly/Default (= 2024.01.01.00) 16 | - RCT-Folly/Default (2024.01.01.00): 17 | - boost 18 | - DoubleConversion 19 | - fmt (= 9.1.0) 20 | - glog 21 | - RCT-Folly/Fabric (2024.01.01.00): 22 | - boost 23 | - DoubleConversion 24 | - fmt (= 9.1.0) 25 | - glog 26 | - RCTDeprecation (0.74.3) 27 | - RCTRequired (0.74.3) 28 | - RCTTypeSafety (0.74.3): 29 | - FBLazyVector (= 0.74.3) 30 | - RCTRequired (= 0.74.3) 31 | - React-Core (= 0.74.3) 32 | - React (0.74.3): 33 | - React-Core (= 0.74.3) 34 | - React-Core/DevSupport (= 0.74.3) 35 | - React-Core/RCTWebSocket (= 0.74.3) 36 | - React-RCTActionSheet (= 0.74.3) 37 | - React-RCTAnimation (= 0.74.3) 38 | - React-RCTBlob (= 0.74.3) 39 | - React-RCTImage (= 0.74.3) 40 | - React-RCTLinking (= 0.74.3) 41 | - React-RCTNetwork (= 0.74.3) 42 | - React-RCTSettings (= 0.74.3) 43 | - React-RCTText (= 0.74.3) 44 | - React-RCTVibration (= 0.74.3) 45 | - React-callinvoker (0.74.3) 46 | - React-Codegen (0.74.3): 47 | - DoubleConversion 48 | - glog 49 | - hermes-engine 50 | - RCT-Folly 51 | - RCTRequired 52 | - RCTTypeSafety 53 | - React-Core 54 | - React-debug 55 | - React-Fabric 56 | - React-FabricImage 57 | - React-featureflags 58 | - React-graphics 59 | - React-jsi 60 | - React-jsiexecutor 61 | - React-NativeModulesApple 62 | - React-rendererdebug 63 | - React-utils 64 | - ReactCommon/turbomodule/bridging 65 | - ReactCommon/turbomodule/core 66 | - React-Core (0.74.3): 67 | - glog 68 | - hermes-engine 69 | - RCT-Folly (= 2024.01.01.00) 70 | - RCTDeprecation 71 | - React-Core/Default (= 0.74.3) 72 | - React-cxxreact 73 | - React-featureflags 74 | - React-hermes 75 | - React-jsi 76 | - React-jsiexecutor 77 | - React-jsinspector 78 | - React-perflogger 79 | - React-runtimescheduler 80 | - React-utils 81 | - SocketRocket (= 0.7.0) 82 | - Yoga 83 | - React-Core/CoreModulesHeaders (0.74.3): 84 | - glog 85 | - hermes-engine 86 | - RCT-Folly (= 2024.01.01.00) 87 | - RCTDeprecation 88 | - React-Core/Default 89 | - React-cxxreact 90 | - React-featureflags 91 | - React-hermes 92 | - React-jsi 93 | - React-jsiexecutor 94 | - React-jsinspector 95 | - React-perflogger 96 | - React-runtimescheduler 97 | - React-utils 98 | - SocketRocket (= 0.7.0) 99 | - Yoga 100 | - React-Core/Default (0.74.3): 101 | - glog 102 | - hermes-engine 103 | - RCT-Folly (= 2024.01.01.00) 104 | - RCTDeprecation 105 | - React-cxxreact 106 | - React-featureflags 107 | - React-hermes 108 | - React-jsi 109 | - React-jsiexecutor 110 | - React-jsinspector 111 | - React-perflogger 112 | - React-runtimescheduler 113 | - React-utils 114 | - SocketRocket (= 0.7.0) 115 | - Yoga 116 | - React-Core/DevSupport (0.74.3): 117 | - glog 118 | - hermes-engine 119 | - RCT-Folly (= 2024.01.01.00) 120 | - RCTDeprecation 121 | - React-Core/Default (= 0.74.3) 122 | - React-Core/RCTWebSocket (= 0.74.3) 123 | - React-cxxreact 124 | - React-featureflags 125 | - React-hermes 126 | - React-jsi 127 | - React-jsiexecutor 128 | - React-jsinspector 129 | - React-perflogger 130 | - React-runtimescheduler 131 | - React-utils 132 | - SocketRocket (= 0.7.0) 133 | - Yoga 134 | - React-Core/RCTActionSheetHeaders (0.74.3): 135 | - glog 136 | - hermes-engine 137 | - RCT-Folly (= 2024.01.01.00) 138 | - RCTDeprecation 139 | - React-Core/Default 140 | - React-cxxreact 141 | - React-featureflags 142 | - React-hermes 143 | - React-jsi 144 | - React-jsiexecutor 145 | - React-jsinspector 146 | - React-perflogger 147 | - React-runtimescheduler 148 | - React-utils 149 | - SocketRocket (= 0.7.0) 150 | - Yoga 151 | - React-Core/RCTAnimationHeaders (0.74.3): 152 | - glog 153 | - hermes-engine 154 | - RCT-Folly (= 2024.01.01.00) 155 | - RCTDeprecation 156 | - React-Core/Default 157 | - React-cxxreact 158 | - React-featureflags 159 | - React-hermes 160 | - React-jsi 161 | - React-jsiexecutor 162 | - React-jsinspector 163 | - React-perflogger 164 | - React-runtimescheduler 165 | - React-utils 166 | - SocketRocket (= 0.7.0) 167 | - Yoga 168 | - React-Core/RCTBlobHeaders (0.74.3): 169 | - glog 170 | - hermes-engine 171 | - RCT-Folly (= 2024.01.01.00) 172 | - RCTDeprecation 173 | - React-Core/Default 174 | - React-cxxreact 175 | - React-featureflags 176 | - React-hermes 177 | - React-jsi 178 | - React-jsiexecutor 179 | - React-jsinspector 180 | - React-perflogger 181 | - React-runtimescheduler 182 | - React-utils 183 | - SocketRocket (= 0.7.0) 184 | - Yoga 185 | - React-Core/RCTImageHeaders (0.74.3): 186 | - glog 187 | - hermes-engine 188 | - RCT-Folly (= 2024.01.01.00) 189 | - RCTDeprecation 190 | - React-Core/Default 191 | - React-cxxreact 192 | - React-featureflags 193 | - React-hermes 194 | - React-jsi 195 | - React-jsiexecutor 196 | - React-jsinspector 197 | - React-perflogger 198 | - React-runtimescheduler 199 | - React-utils 200 | - SocketRocket (= 0.7.0) 201 | - Yoga 202 | - React-Core/RCTLinkingHeaders (0.74.3): 203 | - glog 204 | - hermes-engine 205 | - RCT-Folly (= 2024.01.01.00) 206 | - RCTDeprecation 207 | - React-Core/Default 208 | - React-cxxreact 209 | - React-featureflags 210 | - React-hermes 211 | - React-jsi 212 | - React-jsiexecutor 213 | - React-jsinspector 214 | - React-perflogger 215 | - React-runtimescheduler 216 | - React-utils 217 | - SocketRocket (= 0.7.0) 218 | - Yoga 219 | - React-Core/RCTNetworkHeaders (0.74.3): 220 | - glog 221 | - hermes-engine 222 | - RCT-Folly (= 2024.01.01.00) 223 | - RCTDeprecation 224 | - React-Core/Default 225 | - React-cxxreact 226 | - React-featureflags 227 | - React-hermes 228 | - React-jsi 229 | - React-jsiexecutor 230 | - React-jsinspector 231 | - React-perflogger 232 | - React-runtimescheduler 233 | - React-utils 234 | - SocketRocket (= 0.7.0) 235 | - Yoga 236 | - React-Core/RCTSettingsHeaders (0.74.3): 237 | - glog 238 | - hermes-engine 239 | - RCT-Folly (= 2024.01.01.00) 240 | - RCTDeprecation 241 | - React-Core/Default 242 | - React-cxxreact 243 | - React-featureflags 244 | - React-hermes 245 | - React-jsi 246 | - React-jsiexecutor 247 | - React-jsinspector 248 | - React-perflogger 249 | - React-runtimescheduler 250 | - React-utils 251 | - SocketRocket (= 0.7.0) 252 | - Yoga 253 | - React-Core/RCTTextHeaders (0.74.3): 254 | - glog 255 | - hermes-engine 256 | - RCT-Folly (= 2024.01.01.00) 257 | - RCTDeprecation 258 | - React-Core/Default 259 | - React-cxxreact 260 | - React-featureflags 261 | - React-hermes 262 | - React-jsi 263 | - React-jsiexecutor 264 | - React-jsinspector 265 | - React-perflogger 266 | - React-runtimescheduler 267 | - React-utils 268 | - SocketRocket (= 0.7.0) 269 | - Yoga 270 | - React-Core/RCTVibrationHeaders (0.74.3): 271 | - glog 272 | - hermes-engine 273 | - RCT-Folly (= 2024.01.01.00) 274 | - RCTDeprecation 275 | - React-Core/Default 276 | - React-cxxreact 277 | - React-featureflags 278 | - React-hermes 279 | - React-jsi 280 | - React-jsiexecutor 281 | - React-jsinspector 282 | - React-perflogger 283 | - React-runtimescheduler 284 | - React-utils 285 | - SocketRocket (= 0.7.0) 286 | - Yoga 287 | - React-Core/RCTWebSocket (0.74.3): 288 | - glog 289 | - hermes-engine 290 | - RCT-Folly (= 2024.01.01.00) 291 | - RCTDeprecation 292 | - React-Core/Default (= 0.74.3) 293 | - React-cxxreact 294 | - React-featureflags 295 | - React-hermes 296 | - React-jsi 297 | - React-jsiexecutor 298 | - React-jsinspector 299 | - React-perflogger 300 | - React-runtimescheduler 301 | - React-utils 302 | - SocketRocket (= 0.7.0) 303 | - Yoga 304 | - React-CoreModules (0.74.3): 305 | - DoubleConversion 306 | - fmt (= 9.1.0) 307 | - RCT-Folly (= 2024.01.01.00) 308 | - RCTTypeSafety (= 0.74.3) 309 | - React-Codegen 310 | - React-Core/CoreModulesHeaders (= 0.74.3) 311 | - React-jsi (= 0.74.3) 312 | - React-jsinspector 313 | - React-NativeModulesApple 314 | - React-RCTBlob 315 | - React-RCTImage (= 0.74.3) 316 | - ReactCommon 317 | - SocketRocket (= 0.7.0) 318 | - React-cxxreact (0.74.3): 319 | - boost (= 1.83.0) 320 | - DoubleConversion 321 | - fmt (= 9.1.0) 322 | - glog 323 | - hermes-engine 324 | - RCT-Folly (= 2024.01.01.00) 325 | - React-callinvoker (= 0.74.3) 326 | - React-debug (= 0.74.3) 327 | - React-jsi (= 0.74.3) 328 | - React-jsinspector 329 | - React-logger (= 0.74.3) 330 | - React-perflogger (= 0.74.3) 331 | - React-runtimeexecutor (= 0.74.3) 332 | - React-debug (0.74.3) 333 | - React-Fabric (0.74.3): 334 | - DoubleConversion 335 | - fmt (= 9.1.0) 336 | - glog 337 | - hermes-engine 338 | - RCT-Folly/Fabric (= 2024.01.01.00) 339 | - RCTRequired 340 | - RCTTypeSafety 341 | - React-Core 342 | - React-cxxreact 343 | - React-debug 344 | - React-Fabric/animations (= 0.74.3) 345 | - React-Fabric/attributedstring (= 0.74.3) 346 | - React-Fabric/componentregistry (= 0.74.3) 347 | - React-Fabric/componentregistrynative (= 0.74.3) 348 | - React-Fabric/components (= 0.74.3) 349 | - React-Fabric/core (= 0.74.3) 350 | - React-Fabric/imagemanager (= 0.74.3) 351 | - React-Fabric/leakchecker (= 0.74.3) 352 | - React-Fabric/mounting (= 0.74.3) 353 | - React-Fabric/scheduler (= 0.74.3) 354 | - React-Fabric/telemetry (= 0.74.3) 355 | - React-Fabric/templateprocessor (= 0.74.3) 356 | - React-Fabric/textlayoutmanager (= 0.74.3) 357 | - React-Fabric/uimanager (= 0.74.3) 358 | - React-graphics 359 | - React-jsi 360 | - React-jsiexecutor 361 | - React-logger 362 | - React-rendererdebug 363 | - React-runtimescheduler 364 | - React-utils 365 | - ReactCommon/turbomodule/core 366 | - React-Fabric/animations (0.74.3): 367 | - DoubleConversion 368 | - fmt (= 9.1.0) 369 | - glog 370 | - hermes-engine 371 | - RCT-Folly/Fabric (= 2024.01.01.00) 372 | - RCTRequired 373 | - RCTTypeSafety 374 | - React-Core 375 | - React-cxxreact 376 | - React-debug 377 | - React-graphics 378 | - React-jsi 379 | - React-jsiexecutor 380 | - React-logger 381 | - React-rendererdebug 382 | - React-runtimescheduler 383 | - React-utils 384 | - ReactCommon/turbomodule/core 385 | - React-Fabric/attributedstring (0.74.3): 386 | - DoubleConversion 387 | - fmt (= 9.1.0) 388 | - glog 389 | - hermes-engine 390 | - RCT-Folly/Fabric (= 2024.01.01.00) 391 | - RCTRequired 392 | - RCTTypeSafety 393 | - React-Core 394 | - React-cxxreact 395 | - React-debug 396 | - React-graphics 397 | - React-jsi 398 | - React-jsiexecutor 399 | - React-logger 400 | - React-rendererdebug 401 | - React-runtimescheduler 402 | - React-utils 403 | - ReactCommon/turbomodule/core 404 | - React-Fabric/componentregistry (0.74.3): 405 | - DoubleConversion 406 | - fmt (= 9.1.0) 407 | - glog 408 | - hermes-engine 409 | - RCT-Folly/Fabric (= 2024.01.01.00) 410 | - RCTRequired 411 | - RCTTypeSafety 412 | - React-Core 413 | - React-cxxreact 414 | - React-debug 415 | - React-graphics 416 | - React-jsi 417 | - React-jsiexecutor 418 | - React-logger 419 | - React-rendererdebug 420 | - React-runtimescheduler 421 | - React-utils 422 | - ReactCommon/turbomodule/core 423 | - React-Fabric/componentregistrynative (0.74.3): 424 | - DoubleConversion 425 | - fmt (= 9.1.0) 426 | - glog 427 | - hermes-engine 428 | - RCT-Folly/Fabric (= 2024.01.01.00) 429 | - RCTRequired 430 | - RCTTypeSafety 431 | - React-Core 432 | - React-cxxreact 433 | - React-debug 434 | - React-graphics 435 | - React-jsi 436 | - React-jsiexecutor 437 | - React-logger 438 | - React-rendererdebug 439 | - React-runtimescheduler 440 | - React-utils 441 | - ReactCommon/turbomodule/core 442 | - React-Fabric/components (0.74.3): 443 | - DoubleConversion 444 | - fmt (= 9.1.0) 445 | - glog 446 | - hermes-engine 447 | - RCT-Folly/Fabric (= 2024.01.01.00) 448 | - RCTRequired 449 | - RCTTypeSafety 450 | - React-Core 451 | - React-cxxreact 452 | - React-debug 453 | - React-Fabric/components/inputaccessory (= 0.74.3) 454 | - React-Fabric/components/legacyviewmanagerinterop (= 0.74.3) 455 | - React-Fabric/components/modal (= 0.74.3) 456 | - React-Fabric/components/rncore (= 0.74.3) 457 | - React-Fabric/components/root (= 0.74.3) 458 | - React-Fabric/components/safeareaview (= 0.74.3) 459 | - React-Fabric/components/scrollview (= 0.74.3) 460 | - React-Fabric/components/text (= 0.74.3) 461 | - React-Fabric/components/textinput (= 0.74.3) 462 | - React-Fabric/components/unimplementedview (= 0.74.3) 463 | - React-Fabric/components/view (= 0.74.3) 464 | - React-graphics 465 | - React-jsi 466 | - React-jsiexecutor 467 | - React-logger 468 | - React-rendererdebug 469 | - React-runtimescheduler 470 | - React-utils 471 | - ReactCommon/turbomodule/core 472 | - React-Fabric/components/inputaccessory (0.74.3): 473 | - DoubleConversion 474 | - fmt (= 9.1.0) 475 | - glog 476 | - hermes-engine 477 | - RCT-Folly/Fabric (= 2024.01.01.00) 478 | - RCTRequired 479 | - RCTTypeSafety 480 | - React-Core 481 | - React-cxxreact 482 | - React-debug 483 | - React-graphics 484 | - React-jsi 485 | - React-jsiexecutor 486 | - React-logger 487 | - React-rendererdebug 488 | - React-runtimescheduler 489 | - React-utils 490 | - ReactCommon/turbomodule/core 491 | - React-Fabric/components/legacyviewmanagerinterop (0.74.3): 492 | - DoubleConversion 493 | - fmt (= 9.1.0) 494 | - glog 495 | - hermes-engine 496 | - RCT-Folly/Fabric (= 2024.01.01.00) 497 | - RCTRequired 498 | - RCTTypeSafety 499 | - React-Core 500 | - React-cxxreact 501 | - React-debug 502 | - React-graphics 503 | - React-jsi 504 | - React-jsiexecutor 505 | - React-logger 506 | - React-rendererdebug 507 | - React-runtimescheduler 508 | - React-utils 509 | - ReactCommon/turbomodule/core 510 | - React-Fabric/components/modal (0.74.3): 511 | - DoubleConversion 512 | - fmt (= 9.1.0) 513 | - glog 514 | - hermes-engine 515 | - RCT-Folly/Fabric (= 2024.01.01.00) 516 | - RCTRequired 517 | - RCTTypeSafety 518 | - React-Core 519 | - React-cxxreact 520 | - React-debug 521 | - React-graphics 522 | - React-jsi 523 | - React-jsiexecutor 524 | - React-logger 525 | - React-rendererdebug 526 | - React-runtimescheduler 527 | - React-utils 528 | - ReactCommon/turbomodule/core 529 | - React-Fabric/components/rncore (0.74.3): 530 | - DoubleConversion 531 | - fmt (= 9.1.0) 532 | - glog 533 | - hermes-engine 534 | - RCT-Folly/Fabric (= 2024.01.01.00) 535 | - RCTRequired 536 | - RCTTypeSafety 537 | - React-Core 538 | - React-cxxreact 539 | - React-debug 540 | - React-graphics 541 | - React-jsi 542 | - React-jsiexecutor 543 | - React-logger 544 | - React-rendererdebug 545 | - React-runtimescheduler 546 | - React-utils 547 | - ReactCommon/turbomodule/core 548 | - React-Fabric/components/root (0.74.3): 549 | - DoubleConversion 550 | - fmt (= 9.1.0) 551 | - glog 552 | - hermes-engine 553 | - RCT-Folly/Fabric (= 2024.01.01.00) 554 | - RCTRequired 555 | - RCTTypeSafety 556 | - React-Core 557 | - React-cxxreact 558 | - React-debug 559 | - React-graphics 560 | - React-jsi 561 | - React-jsiexecutor 562 | - React-logger 563 | - React-rendererdebug 564 | - React-runtimescheduler 565 | - React-utils 566 | - ReactCommon/turbomodule/core 567 | - React-Fabric/components/safeareaview (0.74.3): 568 | - DoubleConversion 569 | - fmt (= 9.1.0) 570 | - glog 571 | - hermes-engine 572 | - RCT-Folly/Fabric (= 2024.01.01.00) 573 | - RCTRequired 574 | - RCTTypeSafety 575 | - React-Core 576 | - React-cxxreact 577 | - React-debug 578 | - React-graphics 579 | - React-jsi 580 | - React-jsiexecutor 581 | - React-logger 582 | - React-rendererdebug 583 | - React-runtimescheduler 584 | - React-utils 585 | - ReactCommon/turbomodule/core 586 | - React-Fabric/components/scrollview (0.74.3): 587 | - DoubleConversion 588 | - fmt (= 9.1.0) 589 | - glog 590 | - hermes-engine 591 | - RCT-Folly/Fabric (= 2024.01.01.00) 592 | - RCTRequired 593 | - RCTTypeSafety 594 | - React-Core 595 | - React-cxxreact 596 | - React-debug 597 | - React-graphics 598 | - React-jsi 599 | - React-jsiexecutor 600 | - React-logger 601 | - React-rendererdebug 602 | - React-runtimescheduler 603 | - React-utils 604 | - ReactCommon/turbomodule/core 605 | - React-Fabric/components/text (0.74.3): 606 | - DoubleConversion 607 | - fmt (= 9.1.0) 608 | - glog 609 | - hermes-engine 610 | - RCT-Folly/Fabric (= 2024.01.01.00) 611 | - RCTRequired 612 | - RCTTypeSafety 613 | - React-Core 614 | - React-cxxreact 615 | - React-debug 616 | - React-graphics 617 | - React-jsi 618 | - React-jsiexecutor 619 | - React-logger 620 | - React-rendererdebug 621 | - React-runtimescheduler 622 | - React-utils 623 | - ReactCommon/turbomodule/core 624 | - React-Fabric/components/textinput (0.74.3): 625 | - DoubleConversion 626 | - fmt (= 9.1.0) 627 | - glog 628 | - hermes-engine 629 | - RCT-Folly/Fabric (= 2024.01.01.00) 630 | - RCTRequired 631 | - RCTTypeSafety 632 | - React-Core 633 | - React-cxxreact 634 | - React-debug 635 | - React-graphics 636 | - React-jsi 637 | - React-jsiexecutor 638 | - React-logger 639 | - React-rendererdebug 640 | - React-runtimescheduler 641 | - React-utils 642 | - ReactCommon/turbomodule/core 643 | - React-Fabric/components/unimplementedview (0.74.3): 644 | - DoubleConversion 645 | - fmt (= 9.1.0) 646 | - glog 647 | - hermes-engine 648 | - RCT-Folly/Fabric (= 2024.01.01.00) 649 | - RCTRequired 650 | - RCTTypeSafety 651 | - React-Core 652 | - React-cxxreact 653 | - React-debug 654 | - React-graphics 655 | - React-jsi 656 | - React-jsiexecutor 657 | - React-logger 658 | - React-rendererdebug 659 | - React-runtimescheduler 660 | - React-utils 661 | - ReactCommon/turbomodule/core 662 | - React-Fabric/components/view (0.74.3): 663 | - DoubleConversion 664 | - fmt (= 9.1.0) 665 | - glog 666 | - hermes-engine 667 | - RCT-Folly/Fabric (= 2024.01.01.00) 668 | - RCTRequired 669 | - RCTTypeSafety 670 | - React-Core 671 | - React-cxxreact 672 | - React-debug 673 | - React-graphics 674 | - React-jsi 675 | - React-jsiexecutor 676 | - React-logger 677 | - React-rendererdebug 678 | - React-runtimescheduler 679 | - React-utils 680 | - ReactCommon/turbomodule/core 681 | - Yoga 682 | - React-Fabric/core (0.74.3): 683 | - DoubleConversion 684 | - fmt (= 9.1.0) 685 | - glog 686 | - hermes-engine 687 | - RCT-Folly/Fabric (= 2024.01.01.00) 688 | - RCTRequired 689 | - RCTTypeSafety 690 | - React-Core 691 | - React-cxxreact 692 | - React-debug 693 | - React-graphics 694 | - React-jsi 695 | - React-jsiexecutor 696 | - React-logger 697 | - React-rendererdebug 698 | - React-runtimescheduler 699 | - React-utils 700 | - ReactCommon/turbomodule/core 701 | - React-Fabric/imagemanager (0.74.3): 702 | - DoubleConversion 703 | - fmt (= 9.1.0) 704 | - glog 705 | - hermes-engine 706 | - RCT-Folly/Fabric (= 2024.01.01.00) 707 | - RCTRequired 708 | - RCTTypeSafety 709 | - React-Core 710 | - React-cxxreact 711 | - React-debug 712 | - React-graphics 713 | - React-jsi 714 | - React-jsiexecutor 715 | - React-logger 716 | - React-rendererdebug 717 | - React-runtimescheduler 718 | - React-utils 719 | - ReactCommon/turbomodule/core 720 | - React-Fabric/leakchecker (0.74.3): 721 | - DoubleConversion 722 | - fmt (= 9.1.0) 723 | - glog 724 | - hermes-engine 725 | - RCT-Folly/Fabric (= 2024.01.01.00) 726 | - RCTRequired 727 | - RCTTypeSafety 728 | - React-Core 729 | - React-cxxreact 730 | - React-debug 731 | - React-graphics 732 | - React-jsi 733 | - React-jsiexecutor 734 | - React-logger 735 | - React-rendererdebug 736 | - React-runtimescheduler 737 | - React-utils 738 | - ReactCommon/turbomodule/core 739 | - React-Fabric/mounting (0.74.3): 740 | - DoubleConversion 741 | - fmt (= 9.1.0) 742 | - glog 743 | - hermes-engine 744 | - RCT-Folly/Fabric (= 2024.01.01.00) 745 | - RCTRequired 746 | - RCTTypeSafety 747 | - React-Core 748 | - React-cxxreact 749 | - React-debug 750 | - React-graphics 751 | - React-jsi 752 | - React-jsiexecutor 753 | - React-logger 754 | - React-rendererdebug 755 | - React-runtimescheduler 756 | - React-utils 757 | - ReactCommon/turbomodule/core 758 | - React-Fabric/scheduler (0.74.3): 759 | - DoubleConversion 760 | - fmt (= 9.1.0) 761 | - glog 762 | - hermes-engine 763 | - RCT-Folly/Fabric (= 2024.01.01.00) 764 | - RCTRequired 765 | - RCTTypeSafety 766 | - React-Core 767 | - React-cxxreact 768 | - React-debug 769 | - React-graphics 770 | - React-jsi 771 | - React-jsiexecutor 772 | - React-logger 773 | - React-rendererdebug 774 | - React-runtimescheduler 775 | - React-utils 776 | - ReactCommon/turbomodule/core 777 | - React-Fabric/telemetry (0.74.3): 778 | - DoubleConversion 779 | - fmt (= 9.1.0) 780 | - glog 781 | - hermes-engine 782 | - RCT-Folly/Fabric (= 2024.01.01.00) 783 | - RCTRequired 784 | - RCTTypeSafety 785 | - React-Core 786 | - React-cxxreact 787 | - React-debug 788 | - React-graphics 789 | - React-jsi 790 | - React-jsiexecutor 791 | - React-logger 792 | - React-rendererdebug 793 | - React-runtimescheduler 794 | - React-utils 795 | - ReactCommon/turbomodule/core 796 | - React-Fabric/templateprocessor (0.74.3): 797 | - DoubleConversion 798 | - fmt (= 9.1.0) 799 | - glog 800 | - hermes-engine 801 | - RCT-Folly/Fabric (= 2024.01.01.00) 802 | - RCTRequired 803 | - RCTTypeSafety 804 | - React-Core 805 | - React-cxxreact 806 | - React-debug 807 | - React-graphics 808 | - React-jsi 809 | - React-jsiexecutor 810 | - React-logger 811 | - React-rendererdebug 812 | - React-runtimescheduler 813 | - React-utils 814 | - ReactCommon/turbomodule/core 815 | - React-Fabric/textlayoutmanager (0.74.3): 816 | - DoubleConversion 817 | - fmt (= 9.1.0) 818 | - glog 819 | - hermes-engine 820 | - RCT-Folly/Fabric (= 2024.01.01.00) 821 | - RCTRequired 822 | - RCTTypeSafety 823 | - React-Core 824 | - React-cxxreact 825 | - React-debug 826 | - React-Fabric/uimanager 827 | - React-graphics 828 | - React-jsi 829 | - React-jsiexecutor 830 | - React-logger 831 | - React-rendererdebug 832 | - React-runtimescheduler 833 | - React-utils 834 | - ReactCommon/turbomodule/core 835 | - React-Fabric/uimanager (0.74.3): 836 | - DoubleConversion 837 | - fmt (= 9.1.0) 838 | - glog 839 | - hermes-engine 840 | - RCT-Folly/Fabric (= 2024.01.01.00) 841 | - RCTRequired 842 | - RCTTypeSafety 843 | - React-Core 844 | - React-cxxreact 845 | - React-debug 846 | - React-graphics 847 | - React-jsi 848 | - React-jsiexecutor 849 | - React-logger 850 | - React-rendererdebug 851 | - React-runtimescheduler 852 | - React-utils 853 | - ReactCommon/turbomodule/core 854 | - React-FabricImage (0.74.3): 855 | - DoubleConversion 856 | - fmt (= 9.1.0) 857 | - glog 858 | - hermes-engine 859 | - RCT-Folly/Fabric (= 2024.01.01.00) 860 | - RCTRequired (= 0.74.3) 861 | - RCTTypeSafety (= 0.74.3) 862 | - React-Fabric 863 | - React-graphics 864 | - React-ImageManager 865 | - React-jsi 866 | - React-jsiexecutor (= 0.74.3) 867 | - React-logger 868 | - React-rendererdebug 869 | - React-utils 870 | - ReactCommon 871 | - Yoga 872 | - React-featureflags (0.74.3) 873 | - React-graphics (0.74.3): 874 | - DoubleConversion 875 | - fmt (= 9.1.0) 876 | - glog 877 | - RCT-Folly/Fabric (= 2024.01.01.00) 878 | - React-Core/Default (= 0.74.3) 879 | - React-utils 880 | - React-hermes (0.74.3): 881 | - DoubleConversion 882 | - fmt (= 9.1.0) 883 | - glog 884 | - hermes-engine 885 | - RCT-Folly (= 2024.01.01.00) 886 | - React-cxxreact (= 0.74.3) 887 | - React-jsi 888 | - React-jsiexecutor (= 0.74.3) 889 | - React-jsinspector 890 | - React-perflogger (= 0.74.3) 891 | - React-runtimeexecutor 892 | - React-ImageManager (0.74.3): 893 | - glog 894 | - RCT-Folly/Fabric 895 | - React-Core/Default 896 | - React-debug 897 | - React-Fabric 898 | - React-graphics 899 | - React-rendererdebug 900 | - React-utils 901 | - React-jserrorhandler (0.74.3): 902 | - RCT-Folly/Fabric (= 2024.01.01.00) 903 | - React-debug 904 | - React-jsi 905 | - React-Mapbuffer 906 | - React-jsi (0.74.3): 907 | - boost (= 1.83.0) 908 | - DoubleConversion 909 | - fmt (= 9.1.0) 910 | - glog 911 | - hermes-engine 912 | - RCT-Folly (= 2024.01.01.00) 913 | - React-jsiexecutor (0.74.3): 914 | - DoubleConversion 915 | - fmt (= 9.1.0) 916 | - glog 917 | - hermes-engine 918 | - RCT-Folly (= 2024.01.01.00) 919 | - React-cxxreact (= 0.74.3) 920 | - React-jsi (= 0.74.3) 921 | - React-jsinspector 922 | - React-perflogger (= 0.74.3) 923 | - React-jsinspector (0.74.3): 924 | - DoubleConversion 925 | - glog 926 | - hermes-engine 927 | - RCT-Folly (= 2024.01.01.00) 928 | - React-featureflags 929 | - React-jsi 930 | - React-runtimeexecutor (= 0.74.3) 931 | - React-jsitracing (0.74.3): 932 | - React-jsi 933 | - React-logger (0.74.3): 934 | - glog 935 | - React-Mapbuffer (0.74.3): 936 | - glog 937 | - React-debug 938 | - React-nativeconfig (0.74.3) 939 | - React-NativeModulesApple (0.74.3): 940 | - glog 941 | - hermes-engine 942 | - React-callinvoker 943 | - React-Core 944 | - React-cxxreact 945 | - React-jsi 946 | - React-jsinspector 947 | - React-runtimeexecutor 948 | - ReactCommon/turbomodule/bridging 949 | - ReactCommon/turbomodule/core 950 | - React-perflogger (0.74.3) 951 | - React-RCTActionSheet (0.74.3): 952 | - React-Core/RCTActionSheetHeaders (= 0.74.3) 953 | - React-RCTAnimation (0.74.3): 954 | - RCT-Folly (= 2024.01.01.00) 955 | - RCTTypeSafety 956 | - React-Codegen 957 | - React-Core/RCTAnimationHeaders 958 | - React-jsi 959 | - React-NativeModulesApple 960 | - ReactCommon 961 | - React-RCTAppDelegate (0.74.3): 962 | - RCT-Folly (= 2024.01.01.00) 963 | - RCTRequired 964 | - RCTTypeSafety 965 | - React-Codegen 966 | - React-Core 967 | - React-CoreModules 968 | - React-debug 969 | - React-Fabric 970 | - React-featureflags 971 | - React-graphics 972 | - React-hermes 973 | - React-nativeconfig 974 | - React-NativeModulesApple 975 | - React-RCTFabric 976 | - React-RCTImage 977 | - React-RCTNetwork 978 | - React-rendererdebug 979 | - React-RuntimeApple 980 | - React-RuntimeCore 981 | - React-RuntimeHermes 982 | - React-runtimescheduler 983 | - React-utils 984 | - ReactCommon 985 | - React-RCTBlob (0.74.3): 986 | - DoubleConversion 987 | - fmt (= 9.1.0) 988 | - hermes-engine 989 | - RCT-Folly (= 2024.01.01.00) 990 | - React-Codegen 991 | - React-Core/RCTBlobHeaders 992 | - React-Core/RCTWebSocket 993 | - React-jsi 994 | - React-jsinspector 995 | - React-NativeModulesApple 996 | - React-RCTNetwork 997 | - ReactCommon 998 | - React-RCTFabric (0.74.3): 999 | - glog 1000 | - hermes-engine 1001 | - RCT-Folly/Fabric (= 2024.01.01.00) 1002 | - React-Core 1003 | - React-debug 1004 | - React-Fabric 1005 | - React-FabricImage 1006 | - React-featureflags 1007 | - React-graphics 1008 | - React-ImageManager 1009 | - React-jsi 1010 | - React-jsinspector 1011 | - React-nativeconfig 1012 | - React-RCTImage 1013 | - React-RCTText 1014 | - React-rendererdebug 1015 | - React-runtimescheduler 1016 | - React-utils 1017 | - Yoga 1018 | - React-RCTImage (0.74.3): 1019 | - RCT-Folly (= 2024.01.01.00) 1020 | - RCTTypeSafety 1021 | - React-Codegen 1022 | - React-Core/RCTImageHeaders 1023 | - React-jsi 1024 | - React-NativeModulesApple 1025 | - React-RCTNetwork 1026 | - ReactCommon 1027 | - React-RCTLinking (0.74.3): 1028 | - React-Codegen 1029 | - React-Core/RCTLinkingHeaders (= 0.74.3) 1030 | - React-jsi (= 0.74.3) 1031 | - React-NativeModulesApple 1032 | - ReactCommon 1033 | - ReactCommon/turbomodule/core (= 0.74.3) 1034 | - React-RCTNetwork (0.74.3): 1035 | - RCT-Folly (= 2024.01.01.00) 1036 | - RCTTypeSafety 1037 | - React-Codegen 1038 | - React-Core/RCTNetworkHeaders 1039 | - React-jsi 1040 | - React-NativeModulesApple 1041 | - ReactCommon 1042 | - React-RCTSettings (0.74.3): 1043 | - RCT-Folly (= 2024.01.01.00) 1044 | - RCTTypeSafety 1045 | - React-Codegen 1046 | - React-Core/RCTSettingsHeaders 1047 | - React-jsi 1048 | - React-NativeModulesApple 1049 | - ReactCommon 1050 | - React-RCTText (0.74.3): 1051 | - React-Core/RCTTextHeaders (= 0.74.3) 1052 | - Yoga 1053 | - React-RCTVibration (0.74.3): 1054 | - RCT-Folly (= 2024.01.01.00) 1055 | - React-Codegen 1056 | - React-Core/RCTVibrationHeaders 1057 | - React-jsi 1058 | - React-NativeModulesApple 1059 | - ReactCommon 1060 | - React-rendererdebug (0.74.3): 1061 | - DoubleConversion 1062 | - fmt (= 9.1.0) 1063 | - RCT-Folly (= 2024.01.01.00) 1064 | - React-debug 1065 | - React-rncore (0.74.3) 1066 | - React-RuntimeApple (0.74.3): 1067 | - hermes-engine 1068 | - RCT-Folly/Fabric (= 2024.01.01.00) 1069 | - React-callinvoker 1070 | - React-Core/Default 1071 | - React-CoreModules 1072 | - React-cxxreact 1073 | - React-jserrorhandler 1074 | - React-jsi 1075 | - React-jsiexecutor 1076 | - React-jsinspector 1077 | - React-Mapbuffer 1078 | - React-NativeModulesApple 1079 | - React-RCTFabric 1080 | - React-RuntimeCore 1081 | - React-runtimeexecutor 1082 | - React-RuntimeHermes 1083 | - React-utils 1084 | - React-RuntimeCore (0.74.3): 1085 | - glog 1086 | - hermes-engine 1087 | - RCT-Folly/Fabric (= 2024.01.01.00) 1088 | - React-cxxreact 1089 | - React-featureflags 1090 | - React-jserrorhandler 1091 | - React-jsi 1092 | - React-jsiexecutor 1093 | - React-jsinspector 1094 | - React-runtimeexecutor 1095 | - React-runtimescheduler 1096 | - React-utils 1097 | - React-runtimeexecutor (0.74.3): 1098 | - React-jsi (= 0.74.3) 1099 | - React-RuntimeHermes (0.74.3): 1100 | - hermes-engine 1101 | - RCT-Folly/Fabric (= 2024.01.01.00) 1102 | - React-featureflags 1103 | - React-hermes 1104 | - React-jsi 1105 | - React-jsinspector 1106 | - React-jsitracing 1107 | - React-nativeconfig 1108 | - React-RuntimeCore 1109 | - React-utils 1110 | - React-runtimescheduler (0.74.3): 1111 | - glog 1112 | - hermes-engine 1113 | - RCT-Folly (= 2024.01.01.00) 1114 | - React-callinvoker 1115 | - React-cxxreact 1116 | - React-debug 1117 | - React-featureflags 1118 | - React-jsi 1119 | - React-rendererdebug 1120 | - React-runtimeexecutor 1121 | - React-utils 1122 | - React-utils (0.74.3): 1123 | - glog 1124 | - hermes-engine 1125 | - RCT-Folly (= 2024.01.01.00) 1126 | - React-debug 1127 | - React-jsi (= 0.74.3) 1128 | - ReactCommon (0.74.3): 1129 | - ReactCommon/turbomodule (= 0.74.3) 1130 | - ReactCommon/turbomodule (0.74.3): 1131 | - DoubleConversion 1132 | - fmt (= 9.1.0) 1133 | - glog 1134 | - hermes-engine 1135 | - RCT-Folly (= 2024.01.01.00) 1136 | - React-callinvoker (= 0.74.3) 1137 | - React-cxxreact (= 0.74.3) 1138 | - React-jsi (= 0.74.3) 1139 | - React-logger (= 0.74.3) 1140 | - React-perflogger (= 0.74.3) 1141 | - ReactCommon/turbomodule/bridging (= 0.74.3) 1142 | - ReactCommon/turbomodule/core (= 0.74.3) 1143 | - ReactCommon/turbomodule/bridging (0.74.3): 1144 | - DoubleConversion 1145 | - fmt (= 9.1.0) 1146 | - glog 1147 | - hermes-engine 1148 | - RCT-Folly (= 2024.01.01.00) 1149 | - React-callinvoker (= 0.74.3) 1150 | - React-cxxreact (= 0.74.3) 1151 | - React-jsi (= 0.74.3) 1152 | - React-logger (= 0.74.3) 1153 | - React-perflogger (= 0.74.3) 1154 | - ReactCommon/turbomodule/core (0.74.3): 1155 | - DoubleConversion 1156 | - fmt (= 9.1.0) 1157 | - glog 1158 | - hermes-engine 1159 | - RCT-Folly (= 2024.01.01.00) 1160 | - React-callinvoker (= 0.74.3) 1161 | - React-cxxreact (= 0.74.3) 1162 | - React-debug (= 0.74.3) 1163 | - React-jsi (= 0.74.3) 1164 | - React-logger (= 0.74.3) 1165 | - React-perflogger (= 0.74.3) 1166 | - React-utils (= 0.74.3) 1167 | - SocketRocket (0.7.0) 1168 | - Yoga (0.0.0) 1169 | 1170 | DEPENDENCIES: 1171 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 1172 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 1173 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 1174 | - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`) 1175 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 1176 | - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`) 1177 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 1178 | - RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 1179 | - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`) 1180 | - RCTRequired (from `../node_modules/react-native/Libraries/Required`) 1181 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 1182 | - React (from `../node_modules/react-native/`) 1183 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 1184 | - React-Codegen (from `build/generated/ios`) 1185 | - React-Core (from `../node_modules/react-native/`) 1186 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 1187 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 1188 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 1189 | - React-debug (from `../node_modules/react-native/ReactCommon/react/debug`) 1190 | - React-Fabric (from `../node_modules/react-native/ReactCommon`) 1191 | - React-FabricImage (from `../node_modules/react-native/ReactCommon`) 1192 | - React-featureflags (from `../node_modules/react-native/ReactCommon/react/featureflags`) 1193 | - React-graphics (from `../node_modules/react-native/ReactCommon/react/renderer/graphics`) 1194 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`) 1195 | - React-ImageManager (from `../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`) 1196 | - React-jserrorhandler (from `../node_modules/react-native/ReactCommon/jserrorhandler`) 1197 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 1198 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 1199 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`) 1200 | - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`) 1201 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 1202 | - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`) 1203 | - React-nativeconfig (from `../node_modules/react-native/ReactCommon`) 1204 | - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) 1205 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 1206 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 1207 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 1208 | - React-RCTAppDelegate (from `../node_modules/react-native/Libraries/AppDelegate`) 1209 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 1210 | - React-RCTFabric (from `../node_modules/react-native/React`) 1211 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 1212 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 1213 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 1214 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 1215 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 1216 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 1217 | - React-rendererdebug (from `../node_modules/react-native/ReactCommon/react/renderer/debug`) 1218 | - React-rncore (from `../node_modules/react-native/ReactCommon`) 1219 | - React-RuntimeApple (from `../node_modules/react-native/ReactCommon/react/runtime/platform/ios`) 1220 | - React-RuntimeCore (from `../node_modules/react-native/ReactCommon/react/runtime`) 1221 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 1222 | - React-RuntimeHermes (from `../node_modules/react-native/ReactCommon/react/runtime`) 1223 | - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`) 1224 | - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`) 1225 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 1226 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 1227 | 1228 | SPEC REPOS: 1229 | trunk: 1230 | - SocketRocket 1231 | 1232 | EXTERNAL SOURCES: 1233 | boost: 1234 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 1235 | DoubleConversion: 1236 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 1237 | FBLazyVector: 1238 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 1239 | fmt: 1240 | :podspec: "../node_modules/react-native/third-party-podspecs/fmt.podspec" 1241 | glog: 1242 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 1243 | hermes-engine: 1244 | :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" 1245 | :tag: hermes-2024-06-28-RNv0.74.3-7bda0c267e76d11b68a585f84cfdd65000babf85 1246 | RCT-Folly: 1247 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 1248 | RCTDeprecation: 1249 | :path: "../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation" 1250 | RCTRequired: 1251 | :path: "../node_modules/react-native/Libraries/Required" 1252 | RCTTypeSafety: 1253 | :path: "../node_modules/react-native/Libraries/TypeSafety" 1254 | React: 1255 | :path: "../node_modules/react-native/" 1256 | React-callinvoker: 1257 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 1258 | React-Codegen: 1259 | :path: build/generated/ios 1260 | React-Core: 1261 | :path: "../node_modules/react-native/" 1262 | React-CoreModules: 1263 | :path: "../node_modules/react-native/React/CoreModules" 1264 | React-cxxreact: 1265 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 1266 | React-debug: 1267 | :path: "../node_modules/react-native/ReactCommon/react/debug" 1268 | React-Fabric: 1269 | :path: "../node_modules/react-native/ReactCommon" 1270 | React-FabricImage: 1271 | :path: "../node_modules/react-native/ReactCommon" 1272 | React-featureflags: 1273 | :path: "../node_modules/react-native/ReactCommon/react/featureflags" 1274 | React-graphics: 1275 | :path: "../node_modules/react-native/ReactCommon/react/renderer/graphics" 1276 | React-hermes: 1277 | :path: "../node_modules/react-native/ReactCommon/hermes" 1278 | React-ImageManager: 1279 | :path: "../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios" 1280 | React-jserrorhandler: 1281 | :path: "../node_modules/react-native/ReactCommon/jserrorhandler" 1282 | React-jsi: 1283 | :path: "../node_modules/react-native/ReactCommon/jsi" 1284 | React-jsiexecutor: 1285 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 1286 | React-jsinspector: 1287 | :path: "../node_modules/react-native/ReactCommon/jsinspector-modern" 1288 | React-jsitracing: 1289 | :path: "../node_modules/react-native/ReactCommon/hermes/executor/" 1290 | React-logger: 1291 | :path: "../node_modules/react-native/ReactCommon/logger" 1292 | React-Mapbuffer: 1293 | :path: "../node_modules/react-native/ReactCommon" 1294 | React-nativeconfig: 1295 | :path: "../node_modules/react-native/ReactCommon" 1296 | React-NativeModulesApple: 1297 | :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios" 1298 | React-perflogger: 1299 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 1300 | React-RCTActionSheet: 1301 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 1302 | React-RCTAnimation: 1303 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 1304 | React-RCTAppDelegate: 1305 | :path: "../node_modules/react-native/Libraries/AppDelegate" 1306 | React-RCTBlob: 1307 | :path: "../node_modules/react-native/Libraries/Blob" 1308 | React-RCTFabric: 1309 | :path: "../node_modules/react-native/React" 1310 | React-RCTImage: 1311 | :path: "../node_modules/react-native/Libraries/Image" 1312 | React-RCTLinking: 1313 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 1314 | React-RCTNetwork: 1315 | :path: "../node_modules/react-native/Libraries/Network" 1316 | React-RCTSettings: 1317 | :path: "../node_modules/react-native/Libraries/Settings" 1318 | React-RCTText: 1319 | :path: "../node_modules/react-native/Libraries/Text" 1320 | React-RCTVibration: 1321 | :path: "../node_modules/react-native/Libraries/Vibration" 1322 | React-rendererdebug: 1323 | :path: "../node_modules/react-native/ReactCommon/react/renderer/debug" 1324 | React-rncore: 1325 | :path: "../node_modules/react-native/ReactCommon" 1326 | React-RuntimeApple: 1327 | :path: "../node_modules/react-native/ReactCommon/react/runtime/platform/ios" 1328 | React-RuntimeCore: 1329 | :path: "../node_modules/react-native/ReactCommon/react/runtime" 1330 | React-runtimeexecutor: 1331 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 1332 | React-RuntimeHermes: 1333 | :path: "../node_modules/react-native/ReactCommon/react/runtime" 1334 | React-runtimescheduler: 1335 | :path: "../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler" 1336 | React-utils: 1337 | :path: "../node_modules/react-native/ReactCommon/react/utils" 1338 | ReactCommon: 1339 | :path: "../node_modules/react-native/ReactCommon" 1340 | Yoga: 1341 | :path: "../node_modules/react-native/ReactCommon/yoga" 1342 | 1343 | SPEC CHECKSUMS: 1344 | boost: d3f49c53809116a5d38da093a8aa78bf551aed09 1345 | DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5 1346 | FBLazyVector: 7e977dd099937dc5458851233141583abba49ff2 1347 | fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120 1348 | glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f 1349 | hermes-engine: 1f547997900dd0752dc0cc0ae6dd16173c49e09b 1350 | RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47 1351 | RCTDeprecation: 4c7eeb42be0b2e95195563c49be08d0b839d22b4 1352 | RCTRequired: d530a0f489699c8500e944fde963102c42dcd0c2 1353 | RCTTypeSafety: b20878506b094fa3d9007d7b9e4be0faa3562499 1354 | React: 2f9da0177233f60fa3462d83fcccde245759f81a 1355 | React-callinvoker: d0205f0dcebf72ec27263ab41e3a5ad827ed503f 1356 | React-Codegen: b4457c8557cb61a27508745f8b03f16afeb9ef59 1357 | React-Core: 690ebbbf8f8dcfba6686ce8927731d3f025c3114 1358 | React-CoreModules: 185da31f5eb2e6043c3d19b10c64c4661322ed6a 1359 | React-cxxreact: c53d2ac9246235351086b8c588feaf775b4ec7f7 1360 | React-debug: dd8f7c772fda4196814a3b12620863d1d98b3a53 1361 | React-Fabric: 68935648d5c81e6b84445d9e726a79301f1fac8f 1362 | React-FabricImage: c92bd5ed4b553c800ca39aee305aaf8dd3e9f4b0 1363 | React-featureflags: ead50fe0ee4ab9278b5fd9f3f2f0f63e316452f4 1364 | React-graphics: 71c87b09041e45c61809cd357436e570dea5ed48 1365 | React-hermes: 917b7ab4c3cb9204c2ad020d74f313830097148b 1366 | React-ImageManager: 1086d48d00fcb511ea119bfc58fb12a72c4dcb95 1367 | React-jserrorhandler: 84d45913636750c2e620a8c8e049964967040405 1368 | React-jsi: 024b933267079f80c30a5cae97bf5ce521217505 1369 | React-jsiexecutor: 45cb079c87db3f514da3acfc686387a0e01de5c5 1370 | React-jsinspector: 1066f8b3da937daf8ced4cf3786eb29e1e4f9b30 1371 | React-jsitracing: 6b3c8c98313642140530f93c46f5a6ca4530b446 1372 | React-logger: fa92ba4d3a5d39ac450f59be2a3cec7b099f0304 1373 | React-Mapbuffer: 9f68550e7c6839d01411ac8896aea5c868eff63a 1374 | React-nativeconfig: fa5de9d8f4dbd5917358f8ad3ad1e08762f01dcb 1375 | React-NativeModulesApple: 585d1b78e0597de364d259cb56007052d0bda5e5 1376 | React-perflogger: 7bb9ba49435ff66b666e7966ee10082508a203e8 1377 | React-RCTActionSheet: a2816ae2b5c8523c2bc18a8f874a724a096e6d97 1378 | React-RCTAnimation: e78f52d7422bac13e1213e25e9bcbf99be872e1a 1379 | React-RCTAppDelegate: 24f46de486cfa3a9f46e4b0786eaf17d92e1e0c6 1380 | React-RCTBlob: 9f9d6599d1b00690704dadc4a4bc33a7e76938be 1381 | React-RCTFabric: 609e66bb0371b9082c62ed677ee0614efe711bf2 1382 | React-RCTImage: 39dd5aee6b92213845e1e7a7c41865801dc33493 1383 | React-RCTLinking: 35d742a982f901f9ea416d772763e2da65c2dc7d 1384 | React-RCTNetwork: b078576c0c896c71905f841716b9f9f5922111dc 1385 | React-RCTSettings: 900aab52b5b1212f247c2944d88f4defbf6146f2 1386 | React-RCTText: a3895ab4e5df4a5fd41b6f059eed484a0c7016d1 1387 | React-RCTVibration: ab4912e1427d8de00ef89e9e6582094c4c25dc05 1388 | React-rendererdebug: 542934058708a643fa5743902eb2fedc0833770a 1389 | React-rncore: f6c23d9810c8de9e369781bb7b1d5511e9d9f4e7 1390 | React-RuntimeApple: ce41ba7df744c7a6c2cc490a9b2e15fc58019508 1391 | React-RuntimeCore: 350218ac9ee1412ddc9806f248141c8fb9bccd8b 1392 | React-runtimeexecutor: 69cab8ddf409de6d6a855a71c8af9e7290c4e55b 1393 | React-RuntimeHermes: 9d0812e3370111dd175aa1fa8bd4da93a9efc4fd 1394 | React-runtimescheduler: 0c80752bceb80924cb8a4babc2a8e3ed70d41e87 1395 | React-utils: a06061b3887c702235d2dac92dacbd93e1ea079e 1396 | ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4 1397 | SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d 1398 | Yoga: 04f1db30bb810187397fa4c37dd1868a27af229c 1399 | 1400 | PODFILE CHECKSUM: 95f045d4c07d1eb448277b9b93d1260dbc5a74b1 1401 | 1402 | COCOAPODS: 1.14.3 1403 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | const defaultConfig = getDefaultConfig(__dirname); 4 | const {sourceExts} = defaultConfig.resolver; 5 | 6 | /** 7 | * Metro configuration 8 | * https://reactnative.dev/docs/metro 9 | * 10 | * @type {import('metro-config').MetroConfig} 11 | */ 12 | const config = { 13 | transformer: { 14 | babelTransformerPath: require.resolve('./rn-transformer.js'), 15 | }, 16 | resolver: { 17 | sourceExts: [...sourceExts, 'scss', 'css'], 18 | }, 19 | }; 20 | 21 | module.exports = mergeConfig(defaultConfig, config); 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CSSModulesExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint . && stylelint 'src/**/*.@(css|scss)'", 9 | "postinstall": "patch-package", 10 | "start": "react-native start", 11 | "test": "jest", 12 | "web": "webpack serve --mode development" 13 | }, 14 | "dependencies": { 15 | "es6-shim": "^0.35.8", 16 | "react": "18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-fontawesome": "^1.6.1", 19 | "react-native": "0.74.3", 20 | "react-native-fontawesome": "5.7.0", 21 | "react-native-web": "^0.19.12" 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "^7.24.7", 25 | "@babel/preset-env": "^7.25.4", 26 | "@babel/runtime": "^7.25.4", 27 | "@react-native/babel-preset": "0.74.85", 28 | "@react-native/eslint-config": "0.74.85", 29 | "@react-native/metro-config": "0.74.85", 30 | "@types/react": "^18.2.6", 31 | "@types/react-test-renderer": "^18.0.0", 32 | "autoprefixer": "^10.4.20", 33 | "babel-jest": "^29.6.3", 34 | "babel-loader": "^9.1.3", 35 | "babel-plugin-react-native-classname-to-style": "^1.2.2", 36 | "babel-plugin-react-native-platform-specific-extensions": "^1.1.1", 37 | "babel-preset-react": "7.0.0-beta.3", 38 | "css-loader": "^7.1.2", 39 | "eslint": "^8.19.0", 40 | "eslint-plugin-css-modules": "^2.12.0", 41 | "file-loader": "^6.2.0", 42 | "html-webpack-plugin": "^5.6.0", 43 | "jest": "^29.6.3", 44 | "mini-css-extract-plugin": "^2.9.1", 45 | "patch-package": "^8.0.0", 46 | "postcss": "^8.4.39", 47 | "postcss-css-variables": "^0.19.0", 48 | "postcss-loader": "^8.1.0", 49 | "postcss-scss": "^4.0.9", 50 | "prettier": "3.3.3", 51 | "react-hot-loader": "^4.13.1", 52 | "react-native-postcss-transformer": "^2.0.0", 53 | "react-native-sass-transformer": "^3.0.0", 54 | "react-test-renderer": "18.2.0", 55 | "sass": "^1.77.8", 56 | "sass-loader": "^16.0.1", 57 | "style-loader": "^4.0.0", 58 | "stylelint": "^16.8.1", 59 | "stylelint-config-react-native-css-modules": "^3.2.0", 60 | "stylelint-react-native": "^2.7.0", 61 | "webpack": "^5.94.0", 62 | "webpack-cli": "^5.1.4", 63 | "webpack-dev-server": "^5.0.2" 64 | }, 65 | "engines": { 66 | "node": ">=18" 67 | }, 68 | "browserslist": [ 69 | "> 1%", 70 | "last 2 versions", 71 | "IE 11", 72 | "Android >= 4.4", 73 | "iOS >= 8" 74 | ], 75 | "postcss": { 76 | "plugins": { 77 | "postcss-css-variables": {} 78 | } 79 | }, 80 | "eslintConfig": { 81 | "parserOptions": { 82 | "sourceType": "module", 83 | "ecmaVersion": 2017, 84 | "ecmaFeatures": { 85 | "jsx": true 86 | } 87 | }, 88 | "plugins": [ 89 | "css-modules" 90 | ], 91 | "extends": [ 92 | "@react-native-community", 93 | "plugin:css-modules/recommended" 94 | ] 95 | }, 96 | "stylelint": { 97 | "extends": "stylelint-config-react-native-css-modules", 98 | "overrides": [ 99 | { 100 | "files": [ 101 | "*.scss" 102 | ], 103 | "customSyntax": "postcss-scss" 104 | } 105 | ], 106 | "rules": { 107 | "selector-class-pattern": "^[a-z][a-zA-Z0-9]*$", 108 | "declaration-block-no-duplicate-properties": true, 109 | "no-duplicate-selectors": true, 110 | "no-extra-semicolons": true, 111 | "no-eol-whitespace": true, 112 | "no-missing-end-of-source-newline": true 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /patches/react-native-web+0.19.12.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/react-native-web/dist/cjs/exports/Image/index.js b/node_modules/react-native-web/dist/cjs/exports/Image/index.js 2 | index 7e5f982..a34052e 100644 3 | --- a/node_modules/react-native-web/dist/cjs/exports/Image/index.js 4 | +++ b/node_modules/react-native-web/dist/cjs/exports/Image/index.js 5 | @@ -144,6 +144,7 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => { 6 | var _ariaLabel = props['aria-label'], 7 | accessibilityLabel = props.accessibilityLabel, 8 | blurRadius = props.blurRadius, 9 | + className = props.className, 10 | defaultSource = props.defaultSource, 11 | draggable = props.draggable, 12 | onError = props.onError, 13 | @@ -265,6 +266,7 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => { 14 | }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]); 15 | return /*#__PURE__*/React.createElement(_View.default, (0, _extends2.default)({}, rest, { 16 | "aria-label": ariaLabel, 17 | + className: className, 18 | onLayout: handleLayout, 19 | pointerEvents: pointerEvents, 20 | ref: ref, 21 | diff --git a/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js b/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js 22 | index 9b67c41..ee34292 100644 23 | --- a/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js 24 | +++ b/node_modules/react-native-web/dist/cjs/exports/ScrollView/ScrollViewBase.js 25 | @@ -59,7 +59,8 @@ function shouldEmitScrollEvent(lastTick, eventThrottle) { 26 | * Encapsulates the Web-specific scroll throttling and disabling logic 27 | */ 28 | var ScrollViewBase = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 29 | - var onScroll = props.onScroll, 30 | + var className = props.className, 31 | + onScroll = props.onScroll, 32 | onTouchMove = props.onTouchMove, 33 | onWheel = props.onWheel, 34 | _props$scrollEnabled = props.scrollEnabled, 35 | @@ -125,6 +126,7 @@ var ScrollViewBase = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 36 | } 37 | var hideScrollbar = showsHorizontalScrollIndicator === false || showsVerticalScrollIndicator === false; 38 | return /*#__PURE__*/React.createElement(_View.default, (0, _extends2.default)({}, rest, { 39 | + className: className, 40 | onScroll: handleScroll, 41 | onTouchMove: createPreventableScrollHandler(onTouchMove), 42 | onWheel: createPreventableScrollHandler(onWheel), 43 | diff --git a/node_modules/react-native-web/dist/cjs/exports/Text/index.js b/node_modules/react-native-web/dist/cjs/exports/Text/index.js 44 | index 24a5ace..df8ebfb 100644 45 | --- a/node_modules/react-native-web/dist/cjs/exports/Text/index.js 46 | +++ b/node_modules/react-native-web/dist/cjs/exports/Text/index.js 47 | @@ -29,6 +29,7 @@ var _excluded = ["hrefAttrs", "numberOfLines", "onClick", "onLayout", "onPress", 48 | * 49 | */ 50 | var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, { 51 | + className: true, 52 | href: true, 53 | lang: true, 54 | pointerEvents: true 55 | @@ -108,6 +109,7 @@ var Text = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 56 | supportedProps.style = [numberOfLines != null && numberOfLines > 1 && { 57 | WebkitLineClamp: numberOfLines 58 | }, hasTextAncestor === true ? styles.textHasAncestor$raw : styles.text$raw, numberOfLines === 1 && styles.textOneLine, numberOfLines != null && numberOfLines > 1 && styles.textMultiLine, props.style, selectable === true && styles.selectable, selectable === false && styles.notSelectable, onPress && styles.pressable]; 59 | + supportedProps.className = props.className; 60 | if (props.href != null) { 61 | component = 'a'; 62 | if (hrefAttrs != null) { 63 | diff --git a/node_modules/react-native-web/dist/cjs/exports/View/index.js b/node_modules/react-native-web/dist/cjs/exports/View/index.js 64 | index e57ac2c..aab31dd 100644 65 | --- a/node_modules/react-native-web/dist/cjs/exports/View/index.js 66 | +++ b/node_modules/react-native-web/dist/cjs/exports/View/index.js 67 | @@ -27,6 +27,7 @@ var _excluded = ["hrefAttrs", "onLayout", "onMoveShouldSetResponder", "onMoveSho 68 | * 69 | */ 70 | var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, { 71 | + className: true, 72 | href: true, 73 | lang: true, 74 | onScroll: true, 75 | @@ -91,6 +92,7 @@ var View = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 76 | var supportedProps = pickProps(rest); 77 | supportedProps.dir = componentDirection; 78 | supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style]; 79 | + supportedProps.className = props.className; 80 | if (props.href != null) { 81 | component = 'a'; 82 | if (hrefAttrs != null) { 83 | diff --git a/node_modules/react-native-web/dist/cjs/modules/createDOMProps/index.js b/node_modules/react-native-web/dist/cjs/modules/createDOMProps/index.js 84 | index 1349f06..c991880 100644 85 | --- a/node_modules/react-native-web/dist/cjs/modules/createDOMProps/index.js 86 | +++ b/node_modules/react-native-web/dist/cjs/modules/createDOMProps/index.js 87 | @@ -141,6 +141,7 @@ var createDOMProps = (elementType, props, options) => { 88 | accessibilityValueNow = _props.accessibilityValueNow, 89 | ariaValueText = _props['aria-valuetext'], 90 | accessibilityValueText = _props.accessibilityValueText, 91 | + _className = _props.className, 92 | dataSet = _props.dataSet, 93 | focusable = _props.focusable, 94 | id = _props.id, 95 | @@ -545,6 +546,9 @@ var createDOMProps = (elementType, props, options) => { 96 | if (className) { 97 | domProps.className = className; 98 | } 99 | + if (_className) { 100 | + domProps.className += (" " + _className); 101 | + } 102 | if (inlineStyle) { 103 | domProps.style = inlineStyle; 104 | } 105 | diff --git a/node_modules/react-native-web/dist/exports/Image/index.js b/node_modules/react-native-web/dist/exports/Image/index.js 106 | index 9649d27..62722aa 100644 107 | --- a/node_modules/react-native-web/dist/exports/Image/index.js 108 | +++ b/node_modules/react-native-web/dist/exports/Image/index.js 109 | @@ -139,6 +139,7 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => { 110 | var _ariaLabel = props['aria-label'], 111 | accessibilityLabel = props.accessibilityLabel, 112 | blurRadius = props.blurRadius, 113 | + className = props.className, 114 | defaultSource = props.defaultSource, 115 | draggable = props.draggable, 116 | onError = props.onError, 117 | @@ -260,6 +261,7 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => { 118 | }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]); 119 | return /*#__PURE__*/React.createElement(View, _extends({}, rest, { 120 | "aria-label": ariaLabel, 121 | + className: className, 122 | onLayout: handleLayout, 123 | pointerEvents: pointerEvents, 124 | ref: ref, 125 | diff --git a/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js b/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js 126 | index 677b4a3..aede27a 100644 127 | --- a/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js 128 | +++ b/node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js 129 | @@ -54,7 +54,8 @@ function shouldEmitScrollEvent(lastTick, eventThrottle) { 130 | * Encapsulates the Web-specific scroll throttling and disabling logic 131 | */ 132 | var ScrollViewBase = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 133 | - var onScroll = props.onScroll, 134 | + var className = props.className, 135 | + onScroll = props.onScroll, 136 | onTouchMove = props.onTouchMove, 137 | onWheel = props.onWheel, 138 | _props$scrollEnabled = props.scrollEnabled, 139 | @@ -120,6 +121,7 @@ var ScrollViewBase = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 140 | } 141 | var hideScrollbar = showsHorizontalScrollIndicator === false || showsVerticalScrollIndicator === false; 142 | return /*#__PURE__*/React.createElement(View, _extends({}, rest, { 143 | + className: className, 144 | onScroll: handleScroll, 145 | onTouchMove: createPreventableScrollHandler(onTouchMove), 146 | onWheel: createPreventableScrollHandler(onWheel), 147 | diff --git a/node_modules/react-native-web/dist/exports/Text/index.js b/node_modules/react-native-web/dist/exports/Text/index.js 148 | index 8c5f79b..b8c5e51 100644 149 | --- a/node_modules/react-native-web/dist/exports/Text/index.js 150 | +++ b/node_modules/react-native-web/dist/exports/Text/index.js 151 | @@ -24,6 +24,7 @@ import TextAncestorContext from './TextAncestorContext'; 152 | import { useLocaleContext, getLocaleDirection } from '../../modules/useLocale'; 153 | import { warnOnce } from '../../modules/warnOnce'; 154 | var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, { 155 | + className: true, 156 | href: true, 157 | lang: true, 158 | pointerEvents: true 159 | @@ -103,6 +104,7 @@ var Text = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 160 | supportedProps.style = [numberOfLines != null && numberOfLines > 1 && { 161 | WebkitLineClamp: numberOfLines 162 | }, hasTextAncestor === true ? styles.textHasAncestor$raw : styles.text$raw, numberOfLines === 1 && styles.textOneLine, numberOfLines != null && numberOfLines > 1 && styles.textMultiLine, props.style, selectable === true && styles.selectable, selectable === false && styles.notSelectable, onPress && styles.pressable]; 163 | + supportedProps.className = props.className; 164 | if (props.href != null) { 165 | component = 'a'; 166 | if (hrefAttrs != null) { 167 | diff --git a/node_modules/react-native-web/dist/exports/View/index.js b/node_modules/react-native-web/dist/exports/View/index.js 168 | index c812d77..26d8db8 100644 169 | --- a/node_modules/react-native-web/dist/exports/View/index.js 170 | +++ b/node_modules/react-native-web/dist/exports/View/index.js 171 | @@ -22,6 +22,7 @@ import StyleSheet from '../StyleSheet'; 172 | import TextAncestorContext from '../Text/TextAncestorContext'; 173 | import { useLocaleContext, getLocaleDirection } from '../../modules/useLocale'; 174 | var forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, { 175 | + className: true, 176 | href: true, 177 | lang: true, 178 | onScroll: true, 179 | @@ -86,6 +87,7 @@ var View = /*#__PURE__*/React.forwardRef((props, forwardedRef) => { 180 | var supportedProps = pickProps(rest); 181 | supportedProps.dir = componentDirection; 182 | supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style]; 183 | + supportedProps.className = props.className; 184 | if (props.href != null) { 185 | component = 'a'; 186 | if (hrefAttrs != null) { 187 | diff --git a/node_modules/react-native-web/dist/modules/createDOMProps/index.js b/node_modules/react-native-web/dist/modules/createDOMProps/index.js 188 | index 69a853b..4c80980 100644 189 | --- a/node_modules/react-native-web/dist/modules/createDOMProps/index.js 190 | +++ b/node_modules/react-native-web/dist/modules/createDOMProps/index.js 191 | @@ -137,6 +137,7 @@ var createDOMProps = (elementType, props, options) => { 192 | accessibilityValueNow = _props.accessibilityValueNow, 193 | ariaValueText = _props['aria-valuetext'], 194 | accessibilityValueText = _props.accessibilityValueText, 195 | + _className = _props.className, 196 | dataSet = _props.dataSet, 197 | focusable = _props.focusable, 198 | id = _props.id, 199 | @@ -541,6 +542,9 @@ var createDOMProps = (elementType, props, options) => { 200 | if (className) { 201 | domProps.className = className; 202 | } 203 | + if (_className) { 204 | + domProps.className += (" " + _className); 205 | + } 206 | if (inlineStyle) { 207 | domProps.style = inlineStyle; 208 | } 209 | -------------------------------------------------------------------------------- /polyfills.js: -------------------------------------------------------------------------------- 1 | // Add support for older browsers such as Android Stock 4.4/5.0 2 | import 'es6-shim'; 3 | -------------------------------------------------------------------------------- /rn-transformer.js: -------------------------------------------------------------------------------- 1 | var upstreamTransformer = require('@react-native/metro-babel-transformer'); 2 | var sassTransformer = require('react-native-sass-transformer'); 3 | var postCSSTransformer = require('react-native-postcss-transformer'); 4 | 5 | module.exports.transform = function ({src, filename, options}) { 6 | if (filename.endsWith('.scss')) { 7 | return sassTransformer 8 | .renderToCSS({src, filename, options}) 9 | .then(css => postCSSTransformer.transform({src: css, filename, options})); 10 | } else if (filename.endsWith('.css')) { 11 | return postCSSTransformer.transform({src, filename, options}); 12 | } else { 13 | return upstreamTransformer.transform({src, filename, options}); 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /screenshots/android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/screenshots/android.png -------------------------------------------------------------------------------- /screenshots/ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/screenshots/ios.png -------------------------------------------------------------------------------- /screenshots/web3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/screenshots/web3.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | background-color: #fff; 3 | padding: 30px; 4 | flex: 1; 5 | flex-direction: column; 6 | margin-left: auto; 7 | margin-right: auto; 8 | border-width: 1px; 9 | border-style: solid; 10 | border-color: #ccc; 11 | max-width: 460px; 12 | min-height: 600px; 13 | } 14 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {SafeAreaView, ScrollView} from 'react-native'; 3 | import styles from './App.css'; 4 | import {Buttons} from './Buttons'; 5 | import {Link} from './Link'; 6 | import {ProfileCard} from './ProfileCard'; 7 | 8 | export default class App extends Component { 9 | render() { 10 | return ( 11 | 12 | 13 | 17 | 18 | 22 | 23 | 24 | 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/App.native.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | background-color: #fff; 3 | padding: 30px; 4 | flex: 1; 5 | flex-direction: column; 6 | } 7 | -------------------------------------------------------------------------------- /src/Buttons.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text, TouchableHighlight, View} from 'react-native'; 3 | import styles from './Buttons.scss'; 4 | import {FontAwesome} from './FontAwesome'; 5 | import {titleCase} from './utils/titleCase'; 6 | import btnColors from './_ButtonColors.scss'; 7 | 8 | const colors = ['green', 'pink', 'dark', 'orange', 'red', 'black']; 9 | 10 | const Button = (color, index) => { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 淘宝购买 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | const Color = (color, index) => { 28 | return ( 29 | 34 | ); 35 | }; 36 | 37 | export const Buttons = () => { 38 | return ( 39 | 40 | {colors.map(Button)} 41 | {colors.map(Color)} 42 | 43 | ); 44 | }; 45 | -------------------------------------------------------------------------------- /src/Buttons.scss: -------------------------------------------------------------------------------- 1 | @import 'ButtonColors'; 2 | 3 | :root { 4 | --white-color: #fff; 5 | } 6 | 7 | @mixin text($color) { 8 | background-color: $color; 9 | border: 1px solid darken($color, 10%); 10 | } 11 | 12 | @mixin icon($color) { 13 | border-right-width: 1px; 14 | border-right-color: darken($color, 10%); 15 | background-color: lighten($color, 4%); 16 | } 17 | 18 | .wrapper { 19 | flex: 1; 20 | flex-direction: row; 21 | flex-wrap: wrap; 22 | } 23 | 24 | .buttonWrapper { 25 | height: 32px; 26 | margin-bottom: 12px; 27 | margin-right: 20px; 28 | } 29 | 30 | .color { 31 | width: 6px; 32 | height: 6px; 33 | } 34 | 35 | .button { 36 | padding: 0px 18px 0px 0px; 37 | width: 136px; 38 | height: 32px; 39 | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); 40 | flex: 1; 41 | } 42 | 43 | .innerWrapper { 44 | flex: 1; 45 | flex-direction: row; 46 | } 47 | 48 | .buttonText { 49 | color: var(--white-color); 50 | font-size: 16px; 51 | line-height: 28px; 52 | padding-left: 10px; 53 | height: 32px; 54 | } 55 | 56 | .icon { 57 | height: 30px; 58 | width: 32px; 59 | padding: 7px 8px; 60 | margin-right: 5px; 61 | } 62 | 63 | .iconText { 64 | font-size: 16px; 65 | color: #fff; 66 | } 67 | 68 | @each $color in $colors-map { 69 | .button#{nth($color, 1)} { 70 | @extend .button; 71 | @include text(nth($color, 2)); 72 | } 73 | .icon#{nth($color, 1)} { 74 | @extend .icon; 75 | @include icon(nth($color, 2)); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/FontAwesome.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Fa from 'react-fontawesome'; 3 | 4 | export const FontAwesome = props => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /src/FontAwesome.native.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text} from 'react-native'; 3 | import Fa, {Icons} from 'react-native-fontawesome'; 4 | import {camelCase} from './utils/camelCase'; 5 | 6 | export const FontAwesome = props => { 7 | return ( 8 | 9 | {Icons[camelCase(props.name)]} 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /src/Link.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --link-color: blue; 3 | } 4 | 5 | .description { 6 | margin-bottom: 12px; 7 | } 8 | 9 | .descriptionText { 10 | color: #212529; 11 | } 12 | 13 | .descriptionLink { 14 | color: var(--link-color); 15 | } 16 | -------------------------------------------------------------------------------- /src/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Linking, Text, View} from 'react-native'; 3 | import styles from './Link.css'; 4 | 5 | export const Link = ({description, url}) => { 6 | return ( 7 | 8 | 9 | {description + ':\n'} 10 | Linking.openURL(url)}> 13 | {url} 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /src/ProfileCard.css: -------------------------------------------------------------------------------- 1 | .profileOuter { 2 | width: 275px; 3 | height: 363px; 4 | overflow: hidden; 5 | background-color: #fff; 6 | margin-left: auto; 7 | margin-right: auto; 8 | margin-top: 1rem; 9 | margin-bottom: 1rem; 10 | } 11 | 12 | .profileWrapper { 13 | border: 1px solid rgba(0, 0, 0, 0.125); 14 | border-radius: 0.25rem; 15 | width: 275px; 16 | height: 363px; 17 | margin-left: auto; 18 | margin-right: auto; 19 | margin-bottom: 1rem; 20 | } 21 | 22 | .body { 23 | padding: 1.25rem; 24 | } 25 | 26 | .backgroundImg { 27 | width: 275px; 28 | height: 150px; 29 | } 30 | 31 | .profileImg { 32 | width: 100px; 33 | height: 100px; 34 | max-width: 100px; 35 | margin-top: -70px; 36 | margin-bottom: 5px; 37 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 38 | border-width: 3px; 39 | border-color: #fff; 40 | border-radius: 50px; 41 | margin-left: auto; 42 | margin-right: auto; 43 | } 44 | 45 | .nameWrapper { 46 | margin-bottom: 5px; 47 | } 48 | 49 | .name { 50 | font-size: 1rem; 51 | font-weight: 700; 52 | color: #212529; 53 | text-align: center; 54 | } 55 | 56 | .descriptionWrapper { 57 | margin-bottom: 1.5rem; 58 | } 59 | 60 | .description { 61 | text-align: center; 62 | color: #212529; 63 | } 64 | 65 | .stats { 66 | flex: 1; 67 | flex-direction: row; 68 | flex-grow: 1; 69 | margin-left: auto; 70 | margin-right: auto; 71 | margin-bottom: 2rem; 72 | } 73 | 74 | .statsLeft { 75 | padding: 0 10px; 76 | border-right-color: #d4dbe0; 77 | border-right-width: 1px; 78 | height: 38px; 79 | } 80 | 81 | .statsRight { 82 | padding: 0 10px; 83 | height: 38px; 84 | } 85 | 86 | .statsText { 87 | text-align: center; 88 | color: #212529; 89 | } 90 | 91 | .statsTextBold { 92 | font-weight: bold; 93 | } 94 | -------------------------------------------------------------------------------- /src/ProfileCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Image, Text, View} from 'react-native'; 3 | import avatar from './images/avatar.png'; 4 | import bg from './images/iceland.jpg'; 5 | import styles from './ProfileCard.css'; 6 | 7 | export const ProfileCard = () => { 8 | return ( 9 | 10 | 11 | 16 | 17 | 18 | 19 | Dave Gamache 20 | 21 | 22 | 23 | I wish i was a little bit taller, wish i was a baller, wish i had 24 | a girl… also. 25 | 26 | 27 | 28 | 29 | Friends 30 | 32 | 12M 33 | 34 | 35 | 36 | Enemies 37 | 38 | 1 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /src/_ButtonColors.scss: -------------------------------------------------------------------------------- 1 | // Button Color 2 | $black: #7e7e7e !default; 3 | $pink: #e27b72 !default; 4 | $green: #1db6b8 !default; 5 | $orange: #e8950a !default; 6 | $red: #e63d00 !default; 7 | $dark: #505050 !default; 8 | 9 | $colors-map: ( 10 | 'Green' $green, 11 | 'Pink' $pink, 12 | 'Orange' $orange, 13 | 'Dark' $dark, 14 | 'Red' $red, 15 | 'Black' $black 16 | ); 17 | 18 | :export { 19 | green: $green; 20 | pink: $pink; 21 | orange: $orange; 22 | dark: $dark; 23 | red: $red; 24 | black: $black; 25 | } 26 | -------------------------------------------------------------------------------- /src/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/src/images/avatar.png -------------------------------------------------------------------------------- /src/images/iceland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kristerkari/react-native-css-modules-example/a95e4d93a1261fb50fd7160766d0195994c9d772/src/images/iceland.jpg -------------------------------------------------------------------------------- /src/utils/camelCase.js: -------------------------------------------------------------------------------- 1 | export function camelCase(str) { 2 | // Lower cases the string 3 | return ( 4 | str 5 | .toLowerCase() 6 | // Replaces any - or _ characters with a space 7 | .replace(/[-_]+/g, ' ') 8 | // Removes any non alphanumeric characters 9 | .replace(/[^\w\s]/g, '') 10 | // Uppercases the first character in each group immediately following a space 11 | // (delimited by spaces) 12 | .replace(/ (.)/g, function ($1) { 13 | return $1.toUpperCase(); 14 | }) 15 | // Removes spaces 16 | .replace(/ /g, '') 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/utils/titleCase.js: -------------------------------------------------------------------------------- 1 | export const titleCase = str => { 2 | return str 3 | .split(' ') 4 | .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase()) 5 | .join(' '); 6 | }; 7 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | module.exports = { 6 | entry: ['./polyfills', 'react-hot-loader/patch', './index.web.js'], 7 | devServer: { 8 | static: './', 9 | hot: true, 10 | }, 11 | plugins: [ 12 | new HtmlWebpackPlugin({ 13 | template: 'index.html', 14 | }), 15 | new MiniCssExtractPlugin(), 16 | ], 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.jsx?$/, 21 | exclude: /node_modules/, 22 | use: { 23 | loader: 'babel-loader', 24 | options: { 25 | configFile: false, 26 | babelrc: false, 27 | presets: [ 28 | '@babel/preset-env', 29 | 'react', 30 | 'module:@react-native/babel-preset', 31 | ], 32 | plugins: ['react-hot-loader/babel'], 33 | }, 34 | }, 35 | }, 36 | { 37 | test: /\.(jpg|png|svg)$/, 38 | use: { 39 | loader: 'file-loader', 40 | options: { 41 | name: '[path][name].[hash].[ext]', 42 | }, 43 | }, 44 | }, 45 | { 46 | test: /\.css$/, 47 | use: [ 48 | { 49 | loader: MiniCssExtractPlugin.loader, 50 | }, 51 | { 52 | loader: 'css-loader', 53 | options: { 54 | modules: { 55 | namedExport: false, 56 | localIdentName: '[path]___[name]__[local]___[hash:base64:5]', 57 | }, 58 | }, 59 | }, 60 | { 61 | loader: 'postcss-loader', 62 | }, 63 | ], 64 | }, 65 | { 66 | test: /\.scss$/, 67 | use: [ 68 | { 69 | loader: MiniCssExtractPlugin.loader, 70 | }, 71 | { 72 | loader: 'css-loader', 73 | options: { 74 | modules: { 75 | namedExport: false, 76 | localIdentName: '[path]___[name]__[local]___[hash:base64:5]', 77 | }, 78 | }, 79 | }, 80 | { 81 | loader: 'postcss-loader', 82 | options: { 83 | postcssOptions: { 84 | plugins: [autoprefixer()], 85 | }, 86 | }, 87 | }, 88 | { 89 | loader: 'sass-loader', 90 | }, 91 | ], 92 | }, 93 | ], 94 | }, 95 | resolve: { 96 | alias: { 97 | 'react-native': 'react-native-web', 98 | }, 99 | extensions: ['.web.js', '.js', '.web.jsx', '.jsx'], 100 | mainFields: ['browser', 'main'], 101 | }, 102 | }; 103 | --------------------------------------------------------------------------------