diff --git a/components/AR/ViroARPlaneSelector.tsx b/components/AR/ViroARPlaneSelector.tsx
index f3df4b4e..7c1cef82 100644
--- a/components/AR/ViroARPlaneSelector.tsx
+++ b/components/AR/ViroARPlaneSelector.tsx
@@ -15,7 +15,7 @@ import {
   ViroClickStateEvent,
   ViroPlaneUpdatedMap,
 } from "../Types/ViroEvents";
-import { ViroARPlaneType, ViroNativeRef } from "../Types/ViroUtils";
+import { ViroARPlaneType, ViroNativeRef, ViroSource } from "../Types/ViroUtils";
 
 type ViroARPlaneClassification =
   | "None"
@@ -50,6 +50,7 @@ type Props = {
   disableClickSelection?: boolean; // Disable click-based selection, only show planes visually
   useActualShape?: boolean; // Use boundary vertices for accurate shape (default: true)
   children?: React.ReactNode;
+  materials?: ViroSource[] | string | string[];
 };
 
 type State = {
@@ -80,6 +81,12 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
     const arPlanes: React.JSX.Element[] = [];
     const detectBothAlignments =
       this.props.alignment === "Both" || !this.props.alignment;
+    
+    // Since materials can be either a string or an array, convert the string to a 1-element array
+    const materials =
+      typeof this.props.materials === "string"
+        ? new Array(this.props.materials)
+        : this.props.materials;
 
     // Determine which alignments to detect
     const alignmentsToDetect: Array<
@@ -172,7 +179,7 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
               key={`polygon-${anchorId}`}
               vertices={vertices2D!}
               holes={[]}
-              materials={["ViroARPlaneSelector_Translucent"]}
+              materials={!!materials ? materials : ["ViroARPlaneSelector_Translucent"]}
               {...(!this.props.disableClickSelection && {
                 onClickState: (clickState, position, source) =>
                   this._getOnClickSurface(anchorId, {
@@ -188,7 +195,7 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
           ) : (
             <ViroQuad
               key={`quad-${anchorId}`}
-              materials={["ViroARPlaneSelector_Translucent"]}
+              materials={!!materials ? materials : ["ViroARPlaneSelector_Translucent"]}
               {...(!this.props.disableClickSelection && {
                 onClickState: (clickState, position, source) =>
                   this._getOnClickSurface(anchorId, {
diff --git a/dist/components/AR/ViroARPlaneSelector.d.ts b/dist/components/AR/ViroARPlaneSelector.d.ts
index 2ac3d443..bdb91cde 100644
--- a/dist/components/AR/ViroARPlaneSelector.d.ts
+++ b/dist/components/AR/ViroARPlaneSelector.d.ts
@@ -9,7 +9,7 @@
  * @providesModule ViroARPlaneSelector
  */
 import { ViroClickStateEvent, ViroPlaneUpdatedMap } from "../Types/ViroEvents";
-import { ViroARPlaneType, ViroNativeRef } from "../Types/ViroUtils";
+import { ViroARPlaneType, ViroNativeRef, ViroSource } from "../Types/ViroUtils";
 import * as React from "react";
 type Props = {
     minHeight?: number;
@@ -20,6 +20,7 @@ type Props = {
     disableClickSelection?: boolean;
     useActualShape?: boolean;
     children?: React.ReactNode;
+    materials?: ViroSource[] | string | string[];
 };
 type State = {
     selectedPlaneId: string | null;
diff --git a/dist/components/AR/ViroARPlaneSelector.js b/dist/components/AR/ViroARPlaneSelector.js
index 0778177b..ce178d0a 100644
--- a/dist/components/AR/ViroARPlaneSelector.js
+++ b/dist/components/AR/ViroARPlaneSelector.js
@@ -70,6 +70,11 @@ class ViroARPlaneSelector extends React.Component {
     _getARPlanes() {
         const arPlanes = [];
         const detectBothAlignments = this.props.alignment === "Both" || !this.props.alignment;
+            // Since materials can be either a string or an array, convert the string to a 1-element array
+        const materials =
+        typeof this.props.materials === "string"
+            ? new Array(this.props.materials)
+            : this.props.materials;
         // Determine which alignments to detect
         const alignmentsToDetect = [];
         if (detectBothAlignments) {
@@ -132,13 +137,13 @@ class ViroARPlaneSelector extends React.Component {
                         vertices2D &&
                         vertices2D.length >= 3;
                     const finalOpacity = isSelected ? 0 : isVisible ? 1 : 0;
-                    visualElement = useActualShape ? (<ViroPolygon_1.ViroPolygon key={`polygon-${anchorId}`} vertices={vertices2D} holes={[]} materials={["ViroARPlaneSelector_Translucent"]} {...(!this.props.disableClickSelection && {
+                    visualElement = useActualShape ? (<ViroPolygon_1.ViroPolygon key={`polygon-${anchorId}`} vertices={vertices2D} holes={[]} materials={!!materials ? materials : ["ViroARPlaneSelector_Translucent"]} {...(!this.props.disableClickSelection && {
                         onClickState: (clickState, position, source) => this._getOnClickSurface(anchorId, {
                             clickState,
                             position,
                             source,
                         }),
-                    })} position={[0, 0, 0]} rotation={polygonRotation} opacity={finalOpacity}/>) : (<ViroQuad_1.ViroQuad key={`quad-${anchorId}`} materials={["ViroARPlaneSelector_Translucent"]} {...(!this.props.disableClickSelection && {
+                    })} position={[0, 0, 0]} rotation={polygonRotation} opacity={finalOpacity}/>) : (<ViroQuad_1.ViroQuad key={`quad-${anchorId}`} materials={!!materials ? materials : ["ViroARPlaneSelector_Translucent"]} {...(!this.props.disableClickSelection && {
                         onClickState: (clickState, position, source) => this._getOnClickSurface(anchorId, {
                             clickState,
                             position,