From c56844efaa21ebdf30c82b6d53a92a40cc708542 Mon Sep 17 00:00:00 2001
From: Raquel Muniesa <rmuniesa@eurofirms.es>
Date: Sun, 6 Mar 2022 18:48:25 +0100
Subject: [PATCH 1/2] Adding caretStyle

---
 README.md       | 10 ++++++++++
 src/Popable.tsx |  3 +++
 src/Popover.tsx |  6 ++++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9e77fb2..83c56f0 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,7 @@ export default () => (
   - [style](#style)
   - [visible (from Popover)](#visible)
   - [wrapperStyle](#wrapperStyle)
+  - [caretStyle](#caretStyle)
 
 #### Popable.children
 
@@ -163,6 +164,15 @@ Style the wrapping `View` component using any [`View` style property](https://re
 <Popable wrapperStyle={{ flex: 1, display: 'flex' }}>@morning_cafe</Popable>
 ```
 
+#### caretStyle
+
+Style the caret component using any [`View` style property](https://reactnative.dev/docs/view-style-props).
+
+```jsx
+<Popable caretStyle={{ backgroundColor: "blue" }}>@morning_cafe</Popable>
+```
+
+
 ### Popover
 
 The UI component in `Popable` can also be used on its own.
diff --git a/src/Popable.tsx b/src/Popable.tsx
index 75f214e..d0400b0 100644
--- a/src/Popable.tsx
+++ b/src/Popable.tsx
@@ -35,6 +35,7 @@ export type PopableProps = {
   style?: PopoverProps['style'];
   visible?: boolean;
   wrapperStyle?: ViewProps['style'];
+  caretStyle?: ViewProps['style'];
 };
 
 const DEFAULT_LAYOUT = {
@@ -61,6 +62,7 @@ const Popable = forwardRef<PopableManager, PopableProps>(function Popable(
     style,
     visible,
     wrapperStyle,
+    caretStyle,
   },
   ref
 ) {
@@ -223,6 +225,7 @@ const Popable = forwardRef<PopableManager, PopableProps>(function Popable(
             <Popover
               {...sharedPopoverProps}
               forceInitialAnimation
+              caretStyle={caretStyle}
               visible={isPopoverVisible}
               style={[
                 {
diff --git a/src/Popover.tsx b/src/Popover.tsx
index 6b5833f..c80164f 100644
--- a/src/Popover.tsx
+++ b/src/Popover.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, Text, View, ViewProps } from 'react-native';
+import { Animated, StyleSheet, Text, View, ViewProps} from 'react-native';
 import Caret from './Caret';
 import { ANIMATION_DURATION } from './constants';
 import {
@@ -21,6 +21,7 @@ export type PopoverProps = {
   forceInitialAnimation?: boolean;
   numberOfLines?: number;
   visible?: boolean;
+  caretStyle: ViewProps['style'];
   position?: 'top' | 'right' | 'bottom' | 'left';
 } & ViewProps;
 
@@ -35,6 +36,7 @@ const Popover = React.forwardRef<View, PopoverProps>(function Popover(
     forceInitialAnimation = false,
     numberOfLines,
     visible = true,
+    caretStyle = null,
     position = 'bottom',
     style,
     ...extraProps
@@ -84,7 +86,7 @@ const Popover = React.forwardRef<View, PopoverProps>(function Popover(
       align={caretPosition}
       position={position}
       backgroundColor={backgroundColor}
-      style={styles.caret}
+      style={[styles.caret, caretStyle]}
     />
   );
 

From b7fd53dc5e9d6a04fb009c0de7ab20d8ea77cb5a Mon Sep 17 00:00:00 2001
From: Raquel Muniesa <rmuniesa@eurofirms.es>
Date: Sun, 6 Mar 2022 18:54:54 +0100
Subject: [PATCH 2/2] Adding whitespace

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

diff --git a/src/Popover.tsx b/src/Popover.tsx
index c80164f..e6b027b 100644
--- a/src/Popover.tsx
+++ b/src/Popover.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, Text, View, ViewProps} from 'react-native';
+import { Animated, StyleSheet, Text, View, ViewProps } from 'react-native';
 import Caret from './Caret';
 import { ANIMATION_DURATION } from './constants';
 import {