From 18a13fd349bfc6da03dd12abc9c603c9fa181dfd Mon Sep 17 00:00:00 2001
From: Kathleen McGuire <kathleen.mcguire@gemini.com>
Date: Wed, 21 Dec 2022 10:05:06 -0500
Subject: [PATCH 1/2] updating changes

---
 src/skeleton-placeholder.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/skeleton-placeholder.tsx b/src/skeleton-placeholder.tsx
index 0c20686..e8e2984 100644
--- a/src/skeleton-placeholder.tsx
+++ b/src/skeleton-placeholder.tsx
@@ -50,6 +50,7 @@ type SkeletonPlaceholderProps = {
    * Determines width of the highlighted area
    */
   shimmerWidth?: number;
+  testID?: string;
 };
 
 type SkeletonPlaceholderItemProps = ViewStyle & {
@@ -68,6 +69,7 @@ const SkeletonPlaceholder: React.FC<SkeletonPlaceholderProps> & {
   direction = 'right',
   borderRadius,
   shimmerWidth,
+  testID,
 }) => {
   const [layout, setLayout] = React.useState<LayoutRectangle>();
   const animatedValueRef = React.useRef(new Animated.Value(0));
@@ -131,7 +133,7 @@ const SkeletonPlaceholder: React.FC<SkeletonPlaceholderProps> & {
   // to make transparent gradient we need to use original color with alpha
 
   return (
-    <MaskedView style={{height: layout.height, width: layout.width}} maskElement={placeholders}>
+    <MaskedView testID={testID} style={{height: layout.height, width: layout.width}} maskElement={placeholders}>
       <View style={[StyleSheet.absoluteFill, {backgroundColor}]} />
 
       {isAnimationReady && highlightColor !== undefined && transparentColor !== undefined && (

From 4b1eae5675dde91307988afe52799c65d93489bf Mon Sep 17 00:00:00 2001
From: Kathleen McGuire <kathleen.mcguire@gemini.com>
Date: Wed, 21 Dec 2022 10:09:21 -0500
Subject: [PATCH 2/2] also add testID to view used for setLayout

---
 src/skeleton-placeholder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skeleton-placeholder.tsx b/src/skeleton-placeholder.tsx
index e8e2984..d22e1b3 100644
--- a/src/skeleton-placeholder.tsx
+++ b/src/skeleton-placeholder.tsx
@@ -127,7 +127,7 @@ const SkeletonPlaceholder: React.FC<SkeletonPlaceholderProps> & {
   if (!enabled || !placeholders) return children;
 
   if (!layout?.width || !layout.height)
-    return <View onLayout={(event) => setLayout(event.nativeEvent.layout)}>{placeholders}</View>;
+    return <View testID={testID} onLayout={(event) => setLayout(event.nativeEvent.layout)}>{placeholders}</View>;
 
   // https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/358
   // to make transparent gradient we need to use original color with alpha