@yuborama/avatar-view 0.2.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/README.md

@@ -0,0 +1,35 @@
+# @yuborama/avatar-view
+
+My new module
+
+# API documentation
+
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/@yuborama/avatar-view/)
+- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/@yuborama/avatar-view/)
+
+# Installation in managed Expo projects
+
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+
+# Installation in bare React Native projects
+
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+
+### Add the package to your npm dependencies
+
+```
+npm install @yuborama/avatar-view
+```
+
+### Configure for Android
+
+
+
+
+### Configure for iOS
+
+Run `npx pod-install` after installing the npm package.
+
+# Contributing
+
+Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).

package/android/build.gradle

@@ -0,0 +1,43 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.yuboramaavatarview'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 36)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 24)
+      targetSdkVersion safeExtGet("targetSdkVersion", 36)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.yuboramaavatarview"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/yuboramaavatarview/AvatarUtils.kt

@@ -0,0 +1,19 @@
+package expo.modules.yuboramaavatarview
+
+import android.graphics.Color
+import kotlin.random.Random
+
+fun getInitialsFromName(name: String): String {
+  if (name.isBlank()) return ""
+
+  val parts = name.trim().split(" ").filter { it.isNotBlank() }
+  val first = parts.getOrNull(0)?.firstOrNull()?.toString() ?: ""
+  val second = parts.getOrNull(1)?.firstOrNull()?.toString() ?: ""
+
+  return (first + second).uppercase()
+}
+
+fun generateRandomColor(): Int {
+  val hue = Random.nextFloat() * 360f
+  return Color.HSVToColor(floatArrayOf(hue, 0.55f, 0.78f))
+}

package/android/src/main/java/expo/modules/yuboramaavatarview/AvatarView.kt

@@ -0,0 +1,77 @@
+package expo.modules.yuboramaavatarview
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.util.TypedValue
+import androidx.appcompat.widget.AppCompatTextView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import kotlin.math.max
+
+class AvatarView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private var avatarSizeDp: Float = 120f
+  private var avatarColor: Int = generateRandomColor()
+
+  private val initialsView = AppCompatTextView(context).apply {
+    gravity = Gravity.CENTER
+    setTextColor(Color.WHITE)
+    typeface = Typeface.create(Typeface.DEFAULT, Typeface.NORMAL)
+    textSize = 38f
+  }
+
+  var name: String = ""
+    set(value) {
+      field = value
+      avatarColor = generateRandomColor()
+      updateAppearance()
+    }
+
+  var size: Float = 120f
+    set(value) {
+      field = if (value <= 0f) 120f else value
+      avatarSizeDp = field
+      updateCircleSize()
+      updateAppearance()
+    }
+
+  init {
+    addView(initialsView, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {
+      gravity = Gravity.CENTER
+    })
+    updateAppearance()
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    updateCircleSize()
+  }
+
+  private fun updateCircleSize() {
+    val side = dpToPx(avatarSizeDp)
+    initialsView.layoutParams = (initialsView.layoutParams as LayoutParams).apply {
+      this.width = side
+      this.height = side
+      gravity = Gravity.CENTER
+    }
+    initialsView.setTextSize(TypedValue.COMPLEX_UNIT_PX, side / 3f)
+  }
+
+  private fun updateAppearance() {
+    initialsView.text = getInitialsFromName(name)
+    initialsView.background = GradientDrawable().apply {
+      shape = GradientDrawable.OVAL
+      setColor(avatarColor)
+      setStroke(max(dpToPx(4f), (dpToPx(avatarSizeDp) * 0.05f).toInt()), Color.WHITE)
+    }
+  }
+
+  private fun dpToPx(dp: Float): Int =
+    TypedValue.applyDimension(
+      TypedValue.COMPLEX_UNIT_DIP,
+      dp,
+      context.resources.displayMetrics
+    ).toInt()
+}

package/android/src/main/java/expo/modules/yuboramaavatarview/AvatarViewModule.kt

@@ -0,0 +1,52 @@
+package expo.modules.yuboramaavatarview
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class AvatarViewModule : Module() {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  override fun definition() = ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('AvatarView')` in JavaScript.
+    Name("AvatarView")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Math.PI
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { value: String ->
+      // Send an event to JavaScript.
+      sendEvent("onChange", mapOf(
+        "value" to value
+      ))
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of
+    // the view definition: Prop, Events.
+    View(AvatarView::class) {
+      // Defines a setter for the `name` prop.
+      Prop("name") { view: AvatarView, name: String ->
+        view.name = name
+      }
+
+      // Defines a setter for the `size` prop.
+      Prop("size") { view: AvatarView, size: Float ->
+        view.size = size
+      }
+    }
+  }
+}

package/build/AvatarView.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { AvatarViewProps } from "./AvatarView.types";
+export default function AvatarView(props: AvatarViewProps): React.JSX.Element;
+//# sourceMappingURL=AvatarView.d.ts.map

package/build/AvatarView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../src/AvatarView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAKrD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,qBAQxD"}

package/build/AvatarView.js

@@ -0,0 +1,8 @@
+import { requireNativeView } from "expo";
+import * as React from "react";
+const NativeView = requireNativeView("AvatarView");
+export default function AvatarView(props) {
+    const size = props.size ?? 120;
+    return (<NativeView {...props} style={[{ width: size, height: size }, props.style]}/>);
+}
+//# sourceMappingURL=AvatarView.js.map

package/build/AvatarView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.js","sourceRoot":"","sources":["../src/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,UAAU,GACd,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACvD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC;IAC/B,OAAO,CACL,CAAC,UAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EACpD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { requireNativeView } from \"expo\";\nimport * as React from \"react\";\n\nimport { AvatarViewProps } from \"./AvatarView.types\";\n\nconst NativeView: React.ComponentType<AvatarViewProps> =\n  requireNativeView(\"AvatarView\");\n\nexport default function AvatarView(props: AvatarViewProps) {\n  const size = props.size ?? 120;\n  return (\n    <NativeView\n      {...props}\n      style={[{ width: size, height: size }, props.style]}\n    />\n  );\n}"]}

package/build/AvatarView.types.d.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type AvatarViewModuleEvents = {
+    onChange: (params: ChangeEventPayload) => void;
+};
+export type ChangeEventPayload = {
+    value: string;
+};
+export type AvatarViewProps = {
+    name: string;
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=AvatarView.types.d.ts.map

package/build/AvatarView.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.types.d.ts","sourceRoot":"","sources":["../src/AvatarView.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/build/AvatarView.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AvatarView.types.js.map

package/build/AvatarView.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.types.js","sourceRoot":"","sources":["../src/AvatarView.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nexport type AvatarViewModuleEvents = {\n  onChange: (params: ChangeEventPayload) => void;\n};\n\nexport type ChangeEventPayload = {\n  value: string;\n};\n\nexport type AvatarViewProps = {\n  name: string;\n  size?: number;\n  style?: StyleProp<ViewStyle>;\n};"]}

package/build/AvatarView.web.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { AvatarViewProps } from './AvatarView.types';
+export default function AvatarView(props: AvatarViewProps): React.JSX.Element;
+//# sourceMappingURL=AvatarView.web.d.ts.map

package/build/AvatarView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.web.d.ts","sourceRoot":"","sources":["../src/AvatarView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,qBAMxD"}

package/build/AvatarView.web.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export default function AvatarView(props) {
+    return (<div>
+     
+    </div>);
+}
+//# sourceMappingURL=AvatarView.web.js.map

package/build/AvatarView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarView.web.js","sourceRoot":"","sources":["../src/AvatarView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACvD,OAAO,CACL,CAAC,GAAG,CAEJ;;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { AvatarViewProps } from './AvatarView.types';\n\nexport default function AvatarView(props: AvatarViewProps) {\n  return (\n    <div>\n     \n    </div>\n  );\n}\n"]}

package/build/AvatarViewModule.d.ts

@@ -0,0 +1,10 @@
+import { NativeModule } from 'expo';
+import { AvatarViewModuleEvents } from './AvatarView.types';
+declare class AvatarViewModule extends NativeModule<AvatarViewModuleEvents> {
+    PI: number;
+    hello(): string;
+    setValueAsync(value: string): Promise<void>;
+}
+declare const _default: AvatarViewModule;
+export default _default;
+//# sourceMappingURL=AvatarViewModule.d.ts.map

package/build/AvatarViewModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarViewModule.d.ts","sourceRoot":"","sources":["../src/AvatarViewModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,MAAM,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,OAAO,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,IAAI,MAAM;IACf,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAC5C;;AAGD,wBAAmE"}

package/build/AvatarViewModule.js

@@ -0,0 +1,4 @@
+import { requireNativeModule } from 'expo';
+// This call loads the native module object from the JSI.
+export default requireNativeModule('AvatarView');
+//# sourceMappingURL=AvatarViewModule.js.map

package/build/AvatarViewModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarViewModule.js","sourceRoot":"","sources":["../src/AvatarViewModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAUzD,yDAAyD;AACzD,eAAe,mBAAmB,CAAmB,YAAY,CAAC,CAAC","sourcesContent":["import { NativeModule, requireNativeModule } from 'expo';\n\nimport { AvatarViewModuleEvents } from './AvatarView.types';\n\ndeclare class AvatarViewModule extends NativeModule<AvatarViewModuleEvents> {\n  PI: number;\n  hello(): string;\n  setValueAsync(value: string): Promise<void>;\n}\n\n// This call loads the native module object from the JSI.\nexport default requireNativeModule<AvatarViewModule>('AvatarView');\n"]}

package/build/AvatarViewModule.web.d.ts

@@ -0,0 +1,10 @@
+import { NativeModule } from 'expo';
+import { AvatarViewModuleEvents } from './AvatarView.types';
+declare class AvatarViewModule extends NativeModule<AvatarViewModuleEvents> {
+    PI: number;
+    setValueAsync(value: string): Promise<void>;
+    hello(): string;
+}
+declare const _default: typeof AvatarViewModule;
+export default _default;
+//# sourceMappingURL=AvatarViewModule.web.d.ts.map

package/build/AvatarViewModule.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarViewModule.web.d.ts","sourceRoot":"","sources":["../src/AvatarViewModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,MAAM,MAAM,CAAC;AAEvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,cAAM,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACjE,EAAE,SAAW;IACP,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAGjD,KAAK;CAGN;;AAED,wBAAuE"}

package/build/AvatarViewModule.web.js

@@ -0,0 +1,12 @@
+import { registerWebModule, NativeModule } from 'expo';
+class AvatarViewModule extends NativeModule {
+    PI = Math.PI;
+    async setValueAsync(value) {
+        this.emit('onChange', { value });
+    }
+    hello() {
+        return 'Hello world! 👋';
+    }
+}
+export default registerWebModule(AvatarViewModule, 'AvatarViewModule');
+//# sourceMappingURL=AvatarViewModule.web.js.map

package/build/AvatarViewModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarViewModule.web.js","sourceRoot":"","sources":["../src/AvatarViewModule.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAIvD,MAAM,gBAAiB,SAAQ,YAAoC;IACjE,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,aAAa,CAAC,KAAa;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,KAAK;QACH,OAAO,iBAAiB,CAAC;IAC3B,CAAC;CACF;AAED,eAAe,iBAAiB,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { registerWebModule, NativeModule } from 'expo';\n\nimport { AvatarViewModuleEvents } from './AvatarView.types';\n\nclass AvatarViewModule extends NativeModule<AvatarViewModuleEvents> {\n  PI = Math.PI;\n  async setValueAsync(value: string): Promise<void> {\n    this.emit('onChange', { value });\n  }\n  hello() {\n    return 'Hello world! 👋';\n  }\n}\n\nexport default registerWebModule(AvatarViewModule, 'AvatarViewModule');\n"]}

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './AvatarViewModule';
+export { default as AvatarView } from './AvatarView';
+export * from './AvatarView.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAe,oBAAoB,CAAC"}

package/build/index.js

@@ -0,0 +1,6 @@
+// Reexport the native module. On web, it will be resolved to AvatarViewModule.web.ts
+// and on native platforms to AvatarViewModule.ts
+export { default } from './AvatarViewModule';
+export { default as AvatarView } from './AvatarView';
+export * from './AvatarView.types';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,iDAAiD;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAe,oBAAoB,CAAC","sourcesContent":["// Reexport the native module. On web, it will be resolved to AvatarViewModule.web.ts\n// and on native platforms to AvatarViewModule.ts\nexport { default } from './AvatarViewModule';\nexport { default as AvatarView } from './AvatarView';\nexport * from  './AvatarView.types';\n"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {
+    "modules": ["AvatarViewModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.yuboramaavatarview.AvatarViewModule"]
+  }
+}

package/ios/AvatarView.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'AvatarView'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/yuborama/yuborama-avatar-view' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/AvatarView.swift

@@ -0,0 +1,79 @@
+import ExpoModulesCore
+import UIKit
+
+class AvatarView: ExpoView {
+  private var avatarSize: CGFloat = 120
+  private var avatarColor: UIColor = .systemGray
+  private let avatarContainer = UIView()
+  private let initialsLabel = UILabel()
+  var name: String = "" {
+    didSet {
+      avatarColor = generateRandomColor()
+      updateAppearance()
+    }
+  }
+  var size: CGFloat = 120 {
+    didSet {
+      avatarSize = size > 0 ? size : 120
+      setNeedsLayout()
+      updateAppearance()
+    }
+  }
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = false
+
+    avatarContainer.clipsToBounds = true
+    avatarContainer.layer.borderWidth = 6
+    avatarContainer.layer.borderColor = UIColor.white.cgColor
+    initialsLabel.textAlignment = .center
+    initialsLabel.textColor = .white
+    initialsLabel.font = .systemFont(ofSize: 22, weight: .regular)
+
+    avatarContainer.addSubview(initialsLabel)
+    addSubview(avatarContainer)
+    avatarColor = generateRandomColor()
+    updateAppearance()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    avatarContainer.frame = CGRect(
+      x: (bounds.width - avatarSize) / 2,
+      y: (bounds.height - avatarSize) / 2,
+      width: avatarSize,
+      height: avatarSize
+    )
+    avatarContainer.layer.cornerRadius = avatarSize / 2
+    initialsLabel.frame = avatarContainer.bounds
+    initialsLabel.font = .systemFont(ofSize: avatarSize / 3, weight: .regular)
+  }
+
+  private func updateAppearance() {
+    initialsLabel.text = getInitialsFromName(name)
+    avatarContainer.backgroundColor = avatarColor
+    avatarContainer.layer.borderWidth = max(4, avatarSize * 0.05)
+  }
+
+  private func getInitialsFromName(_ name: String) -> String {
+    if name.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
+      return ""
+    }
+
+    let parts = name
+      .trimmingCharacters(in: .whitespacesAndNewlines)
+      .components(separatedBy: " ")
+      .filter { !$0.isEmpty }
+
+    let first = parts.first?.prefix(1) ?? ""
+    let second = parts.count > 1 ? parts[1].prefix(1) : ""
+
+    return "\(first)\(second)".uppercased()
+  }
+
+  private func generateRandomColor() -> UIColor {
+    let hue = CGFloat.random(in: 0...1)
+    return UIColor(hue: hue, saturation: 0.55, brightness: 0.78, alpha: 1.0)
+  }
+}

package/ios/AvatarViewModule.swift

@@ -0,0 +1,49 @@
+import ExpoModulesCore
+
+public class AvatarViewModule: Module {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('AvatarView')` in JavaScript.
+    Name("AvatarView")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Double.pi
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(AvatarView.self) {
+      // Defines a setter for the `name` prop.
+      Prop("name") { (view: AvatarView, name: String) in
+        view.name = name
+      }
+
+      // Defines a setter for the `size` prop.
+      Prop("size") { (view: AvatarView, size: Double) in
+        view.size = CGFloat(size)
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@yuborama/avatar-view",
+  "version": "0.2.0",
+  "description": "My new module",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "@yuborama/avatar-view",
+    "AvatarView"
+  ],
+  "repository": "https://github.com/yuborama/yuborama-avatar-view",
+  "bugs": {
+    "url": "https://github.com/yuborama/yuborama-avatar-view/issues"
+  },
+  "author": "Yuborama <davidjohan2@hotmail.com> (https://github.com/yuborama)",
+  "license": "MIT",
+  "homepage": "https://github.com/yuborama/yuborama-avatar-view#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~19.1.1",
+    "expo-module-scripts": "^55.0.2",
+    "expo": "^55.0.1",
+    "react-native": "0.82.1"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/AvatarView.tsx

@@ -0,0 +1,17 @@
+import { requireNativeView } from "expo";
+import * as React from "react";
+
+import { AvatarViewProps } from "./AvatarView.types";
+
+const NativeView: React.ComponentType<AvatarViewProps> =
+  requireNativeView("AvatarView");
+
+export default function AvatarView(props: AvatarViewProps) {
+  const size = props.size ?? 120;
+  return (
+    <NativeView
+      {...props}
+      style={[{ width: size, height: size }, props.style]}
+    />
+  );
+}

package/src/AvatarView.types.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type AvatarViewModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type AvatarViewProps = {
+  name: string;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+};

package/src/AvatarView.web.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AvatarViewProps } from './AvatarView.types';
+
+export default function AvatarView(props: AvatarViewProps) {
+  return (
+    <div>
+     
+    </div>
+  );
+}

package/src/AvatarViewModule.ts

@@ -0,0 +1,12 @@
+import { NativeModule, requireNativeModule } from 'expo';
+
+import { AvatarViewModuleEvents } from './AvatarView.types';
+
+declare class AvatarViewModule extends NativeModule<AvatarViewModuleEvents> {
+  PI: number;
+  hello(): string;
+  setValueAsync(value: string): Promise<void>;
+}
+
+// This call loads the native module object from the JSI.
+export default requireNativeModule<AvatarViewModule>('AvatarView');

package/src/AvatarViewModule.web.ts

@@ -0,0 +1,15 @@
+import { registerWebModule, NativeModule } from 'expo';
+
+import { AvatarViewModuleEvents } from './AvatarView.types';
+
+class AvatarViewModule extends NativeModule<AvatarViewModuleEvents> {
+  PI = Math.PI;
+  async setValueAsync(value: string): Promise<void> {
+    this.emit('onChange', { value });
+  }
+  hello() {
+    return 'Hello world! 👋';
+  }
+}
+
+export default registerWebModule(AvatarViewModule, 'AvatarViewModule');

package/src/index.ts

@@ -0,0 +1,5 @@
+// Reexport the native module. On web, it will be resolved to AvatarViewModule.web.ts
+// and on native platforms to AvatarViewModule.ts
+export { default } from './AvatarViewModule';
+export { default as AvatarView } from './AvatarView';
+export * from  './AvatarView.types';

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}