feat: ⚡ Added example with custom tile style and fixing style overrid…

…ing issue of #18
Karthik-B-06 · Apr 24, 2021 · d5838d7 · d5838d7
1 parent ab0b630
commit d5838d7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/...gmentedControl.xcworkspace/xcuserdata/timeless.xcuserdatad/UserInterfaceState.xcuserstate b/...gmentedControl.xcworkspace/xcuserdata/timeless.xcuserdatad/UserInterfaceState.xcuserstate
diff --git a/examples/RNSegmentedControl/src/appRoot/index.js b/examples/RNSegmentedControl/src/appRoot/index.js
@@ -41,6 +41,10 @@ const AppRoot = () => {
         paddingVertical={6}
         containerStyle={{
           marginVertical: 20,
+          borderRadius: 15,
+        }}
+        tileStyle={{
+          borderRadius: 15,
         }}
         currentIndex={tabIndex}
         onChange={handleTabsChange}

diff --git a/examples/RNSegmentedControl/src/components/segmentedControl/index.js b/examples/RNSegmentedControl/src/components/segmentedControl/index.js
@@ -67,8 +67,8 @@ const SegmentedControl = (props) => {
   return (
     <Animated.View
       style={[
-        props?.containerStyle,
         styles.segmentedControlWrapper,
+        props?.containerStyle,
         {
           width: width,
         },
@@ -85,18 +85,17 @@ const SegmentedControl = (props) => {
     >
       <Animated.View
         style={[
+          styles.defaultTileStyle,
+          props?.tileStyle,
           {
             ...StyleSheet.absoluteFill,
             position: "absolute",
             width: (width - 4) / props?.tabs?.length,
             top: 0,
-            marginVertical: 2,
-            marginHorizontal: 2,
             backgroundColor: getActiveSegmentedBackgroundColor(
               props?.theme,
               props?.activeSegmentBackgroundColor
             ),
-            borderRadius: 8,
             ...shadow,
           },
           {
@@ -164,6 +163,11 @@ const styles = StyleSheet.create({
     textAlign: "center",
     fontWeight: "600",
   },
+  defaultTileStyle: {
+    marginVertical: 2,
+    marginHorizontal: 2,
+    borderRadius: 8,
+  }
 });
 
 SegmentedControl.propTypes = {
@@ -191,6 +195,7 @@ SegmentedControl.propTypes = {
     shadowRadius: PropTypes.number,
     elevation: PropTypes.number,
   }),
+  tileStyle: ViewPropTypes.style,
 };
 
 SegmentedControl.defaultProps = {
@@ -209,6 +214,7 @@ SegmentedControl.defaultProps = {
   isRTL: false,
   theme: "LIGHT",
   shadowStyle: null,
+  tileStyle: {},
 };
 
 export default SegmentedControl;