feat: rendering and memoizing custom tile if renderTile is supplied

Author: Gustash

src/index.tsx

@@ -123,6 +123,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
   activeBadgeStyle,
   inactiveBadgeStyle,
   badgeTextStyle,
+  renderTile,
 }: SegmentedControlProps) => {
   const width = widthPercentageToDP('100%') - containerMargin * 2;
   const translateValue = width / segments.length;
@@ -190,22 +191,40 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
     ...badgeTextStyle,
   };
 
+  const flattenedTileStyle: ViewStyle = StyleSheet.flatten<ViewStyle>([
+    styles.movingSegmentStyle,
+    defaultShadowStyle,
+    StyleSheet.absoluteFill,
+    {
+      width: width / segments.length - 4,
+    },
+    tileStyle,
+  ]);
+
+  const memoizedTile = React.useMemo<React.ReactNode>(() => {
+    if (renderTile) {
+      return renderTile({
+        style: flattenedTileStyle,
+        transform: tabTranslateAnimatedStyles.transform,
+        width: translateValue,
+      });
+    }
+
+    return (
+      <Animated.View style={[flattenedTileStyle, tabTranslateAnimatedStyles]} />
+    );
+  }, [
+    flattenedTileStyle,
+    renderTile,
+    tabTranslateAnimatedStyles,
+    translateValue,
+  ]);
+
   return (
     <Animated.View
       style={[styles.defaultSegmentedControlWrapper, segmentedControlWrapper]}
     >
-      <Animated.View
-        style={[
-          styles.movingSegmentStyle,
-          defaultShadowStyle,
-          tileStyle,
-          StyleSheet.absoluteFill,
-          {
-            width: width / segments.length - 4,
-          },
-          tabTranslateAnimatedStyles,
-        ]}
-      />
+      {memoizedTile}
       {segments.map((segment, index) => {
         return (
           <Pressable