{"id":15628408,"url":"https://github.com/jamonholmgren/react-native-colo-loco","last_synced_at":"2025-04-05T10:10:11.778Z","repository":{"id":38348464,"uuid":"424496291","full_name":"jamonholmgren/react-native-colo-loco","owner":"jamonholmgren","description":"Colocate your native modules and components with your JavaScript/JSX files.","archived":false,"fork":false,"pushed_at":"2023-11-15T17:03:21.000Z","size":532,"stargazers_count":292,"open_issues_count":6,"forks_count":12,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-29T09:09:49.728Z","etag":null,"topics":["android","ios","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamonholmgren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-11-04T06:40:31.000Z","updated_at":"2025-03-02T15:13:34.000Z","dependencies_parsed_at":"2023-09-25T23:44:54.622Z","dependency_job_id":null,"html_url":"https://github.com/jamonholmgren/react-native-colo-loco","commit_stats":{"total_commits":77,"total_committers":3,"mean_commits":"25.666666666666668","dds":"0.20779220779220775","last_synced_commit":"809cd910c1a11977efe30dfc2e6096ba62a1e93e"},"previous_names":["jamonholmgren/react-native-colocate-native"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Freact-native-colo-loco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Freact-native-colo-loco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Freact-native-colo-loco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Freact-native-colo-loco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamonholmgren","download_url":"https://codeload.github.com/jamonholmgren/react-native-colo-loco/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318745,"owners_count":20919484,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native"],"created_at":"2024-10-03T10:22:29.034Z","updated_at":"2025-04-05T10:10:11.754Z","avatar_url":"https://github.com/jamonholmgren.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Colo Loco 🤪\n\nHave you ever needed to write a native iOS and Android module but find yourself deep in Stack Overflow and digging through Xcode and Android Studio?\n\nThis library makes it as simple as dropping your Objective-C, Java, Swift, and Kotlin files right next to your JavaScript/TypeScript files.\n\nColo Loco will find your colocated native files, automatically link them up to the Xcode and Android Studio projects, and you can focus on your code.\n\n![Colo Loco in action](https://user-images.githubusercontent.com/1479215/141171825-7dd5afa7-eb75-44ea-b653-04372a47e710.png)\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/1479215/143302440-aac06fbb-21ed-492a-85e3-eaee375740b3.png\" width=\"200\" alt=\"iOS simulator showing native alert popup\" /\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/1479215/143302906-1402b95f-6e53-429f-9013-a0de3ecb1f9e.png\" width=\"200\" alt=\"Android emulator showing native alert pop-up\" /\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### Watch Jamon show how to use React Native Colo Loco!\n\n\u003ca href=\"https://www.youtube.com/watch?v=gfORZXq4ZgE\" target=\"_blank\"\u003e\u003cimg width=\"500\" alt=\"CleanShot 2023-03-02 at 08 31 33@2x\" src=\"https://user-images.githubusercontent.com/1479215/222491788-3df92769-cd9d-4ab8-9b35-54cd427f36a9.png\"\u003e\u003ca/\u003e\n\n## Installation\n\n_Note that Colo Loco doesn't (yet) support Expo._\n\nAdd Colo Loco to your development dependencies:\n\n```\nnpm install -D react-native-colo-loco\n# or\nyarn add -D react-native-colo-loco\n```\n\nOnce you have installed `react-native-colo-loco`, you can try running our setup script. This will attempt to automatically patch the necessary files.\n\n```\nnpx install-colo-loco\n```\n\n_NOTE: It's recommended to run this script with a clean git working tree; if you want to continue without a dirty working tree pass it the `--no-git-check` flag_\n\nLastly, install pods and run the project to finish installation and compile.\n\n```\nnpx pod-install\nnpm run ios\nnpm run android\n```\n\n_NOTE: If this doesn't work or you have a non-standard project structure, try the manual instructions below._\n\n### iOS Manual Installation\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick to expand iOS manual instructions\u003c/summary\u003e\n\nFor iOS, add this to your Podfile (`ios/Podfile`) (don't forget to change `MyApp` to your actual app name):\n\n```ruby\nrequire File.join(File.dirname(`node --print \"require.resolve('react-native-colo-loco/package.json')\"`), \"scripts/ios.rb\")\nlink_colocated_native_files(app_name: 'MyApp', app_path: \"../app\")\n```\n\n\u003c/details\u003e\n\n#### Exclude specific Xcode targets\n\nIn some cases you may want to exclude certain targets from being linked. For example, if you have a `MyAppTests` target, you may not want to link your native files into that target. To do this, the `exclude_targets` option flag specifies an array of target names to exclude. Just add the following to your Podfile:\n\n```ruby\nlink_colocated_native_files(\n  app_name: 'MyApp',\n  app_path: \"../app\",\n  exclude_targets: ['MyAppTests']\n)\n```\n\nYou can also specify on an individual file basis which targets you want to link. Add a comment somewhere in the file (recommended near the top) with the following format:\n\n```swift\n// colo_loco_targets: TestApp, TestAppTests\n```\n\nThis will link the file into the `TestApp` and `TestAppTests` targets, but not any other targets.\n\nNote that this comment-based approach will take precedence over the `exclude_targets` option.\n\n### Android Manual Installation\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick to expand Android manual instructions\u003c/summary\u003e\n  \nCreate a \"package\" file for your project in `./android/app/src/main/java/com/myapp/MyAppPackage.java` (but replace `myapp` and `MyApp` with your app's package name and app name).\n\nThe contents of this file will be this:\n\n```java\n// ./android/app/src/main/java/com/myapp/MyAppPackage.java\npackage com.myapp; // replace myapp with your app’s package name\nimport com.facebook.react.ReactPackage;\nimport com.facebook.react.bridge.NativeModule;\nimport com.facebook.react.bridge.ReactApplicationContext;\nimport com.facebook.react.uimanager.ViewManager;\n\nimport java.util.ArrayList;\nimport java.util.Collections;\nimport java.util.List;\n\n// Replace MyApp with your app's name\npublic class MyAppPackage implements ReactPackage {\n   @Override\n   public List\u003cViewManager\u003e createViewManagers(ReactApplicationContext reactContext) {\n      List\u003cViewManager\u003e modules = new ArrayList\u003c\u003e();\n\n      // Add all react-native-colo-loco native view managers from ./colocated/ColoLoco.java\n      modules.addAll(ColoLoco.colocatedViewManagers(reactContext));\n\n      return modules;\n   }\n\n   @Override\n   public List\u003cNativeModule\u003e createNativeModules(ReactApplicationContext reactContext) {\n      List\u003cNativeModule\u003e modules = new ArrayList\u003c\u003e();\n\n      // Add all react-native-colo-loco modules from ./colocated/ColoLoco.java\n      modules.addAll(ColoLoco.colocatedModules(reactContext));\n\n      return modules;\n   }\n}\n```\n\nOpen up your `MainApplication.java` file in the same folder and update the following method:\n\n```java\n@Override\nprotected List\u003cReactPackage\u003e getPackages() {\n  @SuppressWarnings(\"UnnecessaryLocalVariable\")\n  List\u003cReactPackage\u003e packages = new PackageList(this).getPackages();\n  // Packages that cannot be autolinked yet can be added manually here, for example:\n  // packages.add(new MyReactNativePackage());\n  packages.add(new MyAppPackage());\n  return packages;\n}\n```\n\nOpen up your `./android/settings.gradle` file and add this near the top (replace `myapp` with your app name):\n\n```groovy\nrootProject.name = 'MyApp'\n\napply from: new File([\"node\", \"--print\", \"require.resolve('react-native-colo-loco/package.json')\"].execute(null, rootDir).text.trim(), \"../scripts/android.groovy\")\nlinkColocatedNativeFiles([\n  appName: rootProject.name,\n  appPath: \"../app\",\n  appPackageName: \"com.myapp\",\n  androidPath: \"./android/app/src/main/java/com/myapp\"\n])\n\n// rest of file...\n```\n\nNow, when you run `yarn android`, it'll hardlink your `.java` files into a `colocated` folder in your Android project directory and then generate the class `ColoLoco` which will instantiate \u0026 register all of them with your project.\n\n\u003c/details\u003e\n\n## Usage\n\nFor native iOS and Android modules and view managers, place your .m, .h, .swift, .java, and .kt files anywhere near your JavaScript/JSX files. They'll be linked in automatically when you run `pod install`, or in Android's case, when you run `npm run android`. If the filename ends in \\*ViewManager, it'll be linked as a view manager.\n\n```\nios/\nandroid/\napp/\n  components/\n    MyButton.tsx\n    MyNativeButtonViewManager.h\n    MyNativeButtonViewManager.m\n    MyNativeButtonViewManager.java\n    MyNativeModule.h\n    MyNativeModule.m\n    MyNativeModule.java\n```\n\n## Examples\n\n### iOS Objective-C Example\n\nLet's build a small native module that shows an alert.\n\nIn a fresh React Native project, install `react-native-colo-loco` (see instructions above) and then make a folder called `app`. Place two files inside of that -- `Jamon.h` and `Jamon.m`.\n\n```tsx\n// app/Jamon.h\n#import \u003cUIKit/UIKit.h\u003e\n#import \u003cReact/RCTBridgeModule.h\u003e\n@interface Jamon : NSObject \u003cRCTBridgeModule\u003e\n@end\n```\n\n```tsx\n// Jamon.m\n#import \"Jamon.h\"\n\n@implementation Jamon\n\nRCT_EXPORT_MODULE();\n\n// Export a method -- `Jamon.hello()`\nRCT_EXPORT_METHOD(hello)\n{\n  // Alerts have to go on the main thread\n  dispatch_async(dispatch_get_main_queue(), ^{\n    UIAlertView *alert = [[UIAlertView alloc]\n      initWithTitle: @\"Hello from native!\"\n      message: @\"This is from Jamon.m\"\n      delegate: self\n      cancelButtonTitle: @\"Cancel\"\n      otherButtonTitles: @\"Say Hello\",\n      nil\n    ];\n    [alert show];\n  });\n}\n\n@end\n```\n\nModify the `App.js` to import the native module:\n\n```jsx\nimport { NativeModules } from \"react-native\"\nconst { Jamon } = NativeModules\n\n// Now run it:\nJamon.hello()\n```\n\nRun `npx pod-install` in your terminal and then run your project with `yarn ios` (or `yarn react-native run-ios`).\n\nYou should see the native alert pop up in your app!\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1479215/143302440-aac06fbb-21ed-492a-85e3-eaee375740b3.png\" width=\"200\" alt=\"iOS simulator showing native alert popup\" /\u003e\n\nHint: You can read a lot more about iOS native modules here: [https://reactnative.dev/docs/native-modules-ios](https://reactnative.dev/docs/native-modules-ios)\n\n### Android Java example\n\nCreate a file called `Jamon.java` and drop it into your app folder next to your JSX/TSX files.\n\n```java\npackage com.myapp; // change to your app's package name\n\nimport com.facebook.react.bridge.NativeModule;\nimport com.facebook.react.bridge.ReactApplicationContext;\nimport com.facebook.react.bridge.ReactContext;\nimport com.facebook.react.bridge.ReactContextBaseJavaModule;\nimport com.facebook.react.bridge.ReactMethod;\n\nimport android.app.AlertDialog;\n\npublic class Jamon extends ReactContextBaseJavaModule {\n  Jamon(ReactApplicationContext context) {\n    super(context);\n  }\n\n  @Override\n  public String getName() {\n    return \"Jamon\";\n  }\n\n  @ReactMethod\n  public void hello() {\n    // Display a pop-up alert\n    AlertDialog.Builder builder = new AlertDialog.Builder(getCurrentActivity());\n    builder.setMessage(\"Hi, everybody!\")\n      .setTitle(\"Jamon\")\n      .setPositiveButton(\"OK\", null);\n    AlertDialog dialog = builder.create();\n    dialog.show();\n  }\n}\n```\n\nNow when you import it and run in Android, you'll see the alert pop up!\n\n```jsx\nimport { NativeModules } from \"react-native\"\nconst { Jamon } = NativeModules\n\nJamon.hello()\n```\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1479215/143302247-48af4a07-b4c3-4b05-9f6c-70c66566ed75.png\" width=\"200\" alt=\"Android emulator showing native alert pop-up\" /\u003e\n\n### iOS Swift Example\n\nSwift requires a bit more setup, but after that you should be able to drop in `.swift` files and have them work. Unfortunately, as of now, Swift files still require a `.m` file to expose them to React Native, so you'll still be making two files.\n\n_Note that if you used a recent version of [Ignite](https://github.com/infinitered/ignite) to create your app, Swift is already set up._\n\n\u003cdetails\u003e\n  \u003csummary\u003eTo set up Swift in your project (only has to be done once), click here to expand.\u003c/summary\u003e\n\nFirst, open your xcworkspace file (in the `./ios` folder) in Xcode.\n\nClick File -\u003e New -\u003e New File in the menu (or hit Cmd+N).\n\nChoose \"Swift File\" under the `Source` section. Name it something like `EnableSwift` and click Create.\n\nXcode should prompt you with this prompt:\n`Would you like to configure an Objective-C bridging header?`\n\nClick `Create bridging header` (this is key).\n\nInside that file, add this line:\n\n```objc\n//\n//  Use this file to import your target's public headers that you would like to expose to Swift.\n//\n#import \u003cReact/RCTBridgeModule.h\u003e\n```\n\nSave it, and you now have Swift support. You can close Xcode and let your Mac take a breather.\n\n\u003c/details\u003e\n\nNow, it's just a matter of adding Swift files to your project. Inside the `./app` folder you created in the previous section, add the following `Gant.swift` file:\n\n```swift\n// Gant.swift\nimport Foundation\nimport UIKit\n\n@objc(Gant)\nclass Gant : NSObject {\n  @objc func hello() {\n    // Alerts have to go on the main thread\n    DispatchQueue.main.async {\n      let alert = UIAlertView(\n        title: \"Hello from native!\",\n        message: \"This is from Gant.swift\",\n        delegate: nil,\n        cancelButtonTitle: \"Cancel\",\n        otherButtonTitles: \"Say Hello\"\n      )\n      alert.show()\n    }\n  }\n}\n```\n\nAlso add a `Gant.m` file next to it to export it to React Native:\n\n```objc\n// Gant.m\n#import \u003cReact/RCTBridgeModule.h\u003e\n\n@interface RCT_EXTERN_MODULE(Gant, NSObject)\nRCT_EXTERN_METHOD(hello)\n+ (BOOL)requiresMainQueueSetup { return NO; }\n@end\n```\n\nIn your `App.js`, just use it like you did the `Jamon` native module:\n\n```jsx\nimport { NativeModules } from \"react-native\"\nconst { Gant } = NativeModules\n\nGant.hello()\n```\n\nDon't forget to run `npx pod-install` to link up the new native files.\n\nThen run `yarn ios` to recompile. You should see the alert pop up! Yay!\n\n### Android Kotlin Example\n\nCreate a file called `Gant.kt` in your `app` folder and drop in these contents:\n\n```kotlin\npackage com.myapp // change to your package name\n\nimport android.app.AlertDialog\nimport com.facebook.react.bridge.ReactApplicationContext\nimport com.facebook.react.bridge.ReactContextBaseJavaModule\nimport com.facebook.react.bridge.ReactMethod\n\n// change to your app's package name\nclass Gant internal constructor(context: ReactApplicationContext?) : ReactContextBaseJavaModule(context) {\n    override fun getName(): String {\n        return \"Gant\"\n    }\n\n    @ReactMethod\n    fun hello() {\n        // Display a pop-up alert\n        val builder = AlertDialog.Builder(currentActivity)\n        builder.setMessage(\"Hi, everybody!\")\n                .setTitle(\"Gant\")\n                .setPositiveButton(\"OK\", null)\n        val dialog = builder.create()\n        dialog.show()\n    }\n}\n```\n\nIn your `App.js`, just use it like you did the `Jamon` Java native module:\n\n```jsx\nimport { NativeModules } from \"react-native\"\nconst { Gant } = NativeModules\n\nGant.hello()\n```\n\n## Native UI Components\n\nNative modules are fun, but even more fun are native UI components.\n\n### Native iOS UI Components\n\nTo create a native iOS UI component, you can add a ViewManager Objective-C file and header anywhere in your JS folder.\n\nHere's an example that downloads and shows a remote image:\n\n```objc\n// app/components/MyImageViewManager.h\n#import \u003cReact/RCTViewManager.h\u003e\n#import \"UIKit/UIKit.h\"\n@interface MyImageViewManager : RCTViewManager\n@end\n```\n\n```objc\n// app/components/MyImageViewManager.m\n#import \"MyImageViewManager.h\"\n\n@implementation MyImageViewManager\n\nUIImageView *wrapper;\n\nRCT_EXPORT_MODULE(MyImageViewManager)\n\n- (UIView *)view\n{\n  wrapper = [[UIImageView alloc] initWithImage:[UIImage new]];\n  [self performSelectorInBackground:@selector(loadImageAsync) withObject:nil];\n  return wrapper;\n}\n\n- (void) loadImageAsync\n{\n  NSURL *url = [NSURL URLWithString:@\"https://logos-world.net/wp-content/uploads/2021/10/Meta-facebook-Logo-700x394.png\"];\n  // stops the UI until it finishes downloading\n  NSData *data = [NSData dataWithContentsOfURL:url];\n  UIImage *image = [[UIImage alloc] initWithData:data];\n  dispatch_async(dispatch_get_main_queue(), ^{\n    wrapper.image = image;\n  });\n}\n\n@end\n```\n\nTo use this in your JSX, use `requireNativeComponent` like so:\n\n```jsx\nimport { requireNativeComponent } from \"react-native\"\nconst MyImageView = requireNativeComponent(\"MyImageView\")\n\nfunction MyComponent() {\n  return \u003cMyImageView style={{ width: 200, height: 100 }} /\u003e\n}\n```\n\n### Native Android UI Components\n\nTo create a native Android UI component, you can add a java file anywhere in your JS folder structure, but make sure the class name ends in `*ViewManager`.\n\nHere's an example that downloads and shows a remote image:\n\n```java\n// app/components/MyImageViewManager.java\npackage com.myapp; // change to your app's package name\n\nimport com.facebook.drawee.backends.pipeline.Fresco;\nimport com.facebook.react.bridge.ReactApplicationContext;\nimport com.facebook.react.bridge.ReactContext;\nimport com.facebook.react.uimanager.SimpleViewManager;\nimport com.facebook.react.uimanager.ThemedReactContext;\nimport com.facebook.react.views.image.ReactImageView;\n\nimport android.graphics.Bitmap;\nimport android.graphics.BitmapFactory;\nimport android.os.Handler;\nimport android.util.Log;\nimport android.view.View;\n\nimport java.net.URL;\n\npublic class MyImageViewManager extends SimpleViewManager\u003cReactImageView\u003e {\n  // This is the string we use to identify this view when we call\n  // requireNativeComponent(\"MyImageView\") in JS.\n  public static final String REACT_CLASS = \"MyImageView\";\n\n  // We hang onto a reference of our React app context for later use.\n  ReactApplicationContext mCallerContext;\n  ReactImageView mView;\n\n  // This is the URL of the image we'll show\n  private final String logoURL = \"https://logos-world.net/wp-content/uploads/2021/10/Meta-facebook-Logo-700x394.png\";\n\n  // Constructor -- saves a reference to the React context\n  public MyImageViewManager(ReactApplicationContext reactContext) {\n    mCallerContext = reactContext;\n  }\n\n  // Required method to allow React Native to know what the name of this class is.\n  @Override\n  public String getName() {\n    return REACT_CLASS;\n  }\n\n  // This method is where we create our native view.\n  @Override\n  protected ReactImageView createViewInstance(ThemedReactContext reactContext) {\n    // Instantiate a new ReactImageView\n    // Fresco is a Facebook library for managing Android images and the memory they use.\n    // https://github.com/facebook/fresco\n    mView = new ReactImageView(reactContext, Fresco.newDraweeControllerBuilder(), null, mCallerContext);\n\n    // This \"handler\" allows the `startDownloading` thread to call back to *this* thread.\n    // Otherwise crashy crashy!\n    final Handler mainThread = new Handler();\n\n    // We'll download the image now and apply it back to this view\n    startDownloading(mainThread);\n\n    // Return our view back to React Native.\n    return mView;\n  }\n\n  // Download our image.\n  private void startDownloading(final Handler mainThread) {\n    // Create a new background thread to download our image\n    new Thread(() -\u003e {\n      try {\n        // Download, blocking THIS background thread but not the main one\n        URL url = new URL(logoURL);\n        final Bitmap bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());\n\n        // Go back to the main thread and set the image bitmap\n        mainThread.post(() -\u003e mView.setImageBitmap(bmp));\n      } catch (Exception e) {\n        Log.e(\"ReactImageManager\", \"Error : \" + e.getMessage());\n      }\n    }).start();\n  }\n}\n```\n\nTo use this in your JSX, use `requireNativeComponent` like so:\n\n```jsx\nimport { requireNativeComponent } from \"react-native\"\nconst MyImageView = requireNativeComponent(\"MyImageView\")\n\nfunction MyComponent() {\n  return \u003cMyImageView style={{ width: 200, height: 100 }} /\u003e\n}\n```\n\n#### Kotlin Example\n\nIf your project is Kotlin-ready, you can drop in a Kotlin view manager and use it like so:\n\n```kt\npackage com.myapp\n\nimport android.widget.TextView\nimport android.graphics.Color\nimport com.facebook.react.uimanager.SimpleViewManager\nimport com.facebook.react.uimanager.annotations.ReactProp\nimport com.facebook.react.uimanager.ThemedReactContext\nimport com.facebook.react.bridge.ReactApplicationContext\n\nclass WelcomeViewManager (reactAppContext: ReactApplicationContext) : SimpleViewManager\u003cTextView\u003e() {\n  override fun getName(): String {\n    return \"WelcomeView\"\n  }\n\n  override fun createViewInstance(reactContext: ThemedReactContext): TextView {\n    val welcomeTextView: TextView = TextView(reactContext)\n    welcomeTextView.text = \"WELCOME!\"\n    return welcomeTextView\n  }\n\n  @ReactProp(name = \"text\")\n  fun setTextFromProp(view: TextView, myText: String) {\n    view.text = \"${myText.uppercase()}!\"\n  }\n\n  @ReactProp(name = \"textColor\")\n  fun setTextColorFromProp(view: TextView, myTextColor: String) {\n    // set text color\n    view.setTextColor(Color.parseColor(myTextColor))\n  }\n}\n```\n\nThen, in your JSX/TSX:\n\n```jsx\nconst WelcomeView = requireNativeComponent(\"WelcomeView\")\n\nfunction MyWelcomeView() {\n  return \u003cWelcomeView text=\"Welcome!\" textColor=\"#FFFFFF\" style={{ width: 200, height: 100 }} /\u003e\n}\n```\n\nYou should see the text show up in your app!\n\n## License\n\nThis package is licensed under the MIT license.\n\n## Limitations/Assumptions\n\n### Android assumptions\n\nOn Android, our assumption is that your native files live in your app's main package (`com.yourpackage`). If you need them to live in their own package, you may not be able to colocate those files.\n\nWe've considered adding some magic comments to allow for more fine-grained control over package imports and instantiation. For example, something like this (it's not implemented yet so don't try it):\n\n```java\n// @import-template import com.myotherpackage\n// @instantiation-template new MyModule(null, \"Hello\", false)\n// @instantiate false\n```\n\nHowever, these are edge-cases, and likely best if you create your own package / imports in the `./android/src/...` folder yourself.\n\n## Troubleshooting\n\n1. On iOS, make sure you've run `npx pod-install` to link any new / changed native modules before building your app\n2. If you're getting obscure native errors, try opening the project in Android Studio or Xcode and building from there to get more targeted errors\n3. If you think the issue is with React Native Colo Loco, try creating a brand-new app using the instructions earlier in the README and replicate the problem there. Then file an issue with a link to the replication repo. Issues without replication steps or repos will most likely be closed without resolution because who's got time for that?\n\nIf you continue having problems, join the Infinite Red Slack community at \u003chttps://community.infinite.red\u003e and ask in the #react-native channel. Make sure to mention you are using React Native Colo Loco.\n\nIf you need help from pros, consider hiring [Infinite Red](https://infinite.red/reactnative), my React Native consulting company.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonholmgren%2Freact-native-colo-loco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamonholmgren%2Freact-native-colo-loco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonholmgren%2Freact-native-colo-loco/lists"}