Allow touchable to be stylable (#299)

* feat: allow touchable to be stylable

* Review: remove tabstyles from ios

* Review: rename touchableStyle to tabStyle

* Include Tips and Tricks section and add the implemented style documentation

* Remove superflous array notation from style prop

Author: mmehmetAliIzci

README.md

@@ -225,6 +225,41 @@ An object container
 - `fontFamily`: overrides font-family of selected segment text
 - `fontWeight`: overrides font-weight of selected segment text
 
+### `tabStyle`
+
+(Android and Web only) Styles the clickable surface which is responsible to change tabs
+| Type | Required | Platform |
+| ------ | -------- | -------- |
+| object | No | Android, Web |
+
+Extends [ViewStyles](https://reactnative.dev/docs/view-style-props)
+
+## Tips and Tricks
+
+### How can I increase the height of the tab ?
+
+For android and IOS, simply pass `prop.style`:
+
+```json
+{
+  "height": number
+}
+```
+
+For react-native-web, additionally pass :
+
+```json
+{
+  "paddingVertical": number,
+  or
+  "height": number
+}
+```
+
+### Adding padding makes text disappear on Android
+
+If padding amount exceeds the fixed height of the container, it will shrink the text. So either increase the height or reduce your padding. 
+
 ## Maintainers
 
 - [M.Haris Baig](https://github.com/harisbaig100)

index.d.ts

@@ -8,6 +8,7 @@ import {
   NativeMethods,
   Constructor,
   TargetedEvent,
+  ViewStyle,
 } from 'react-native';
 
 export interface NativeSegmentedControlIOSChangeEvent extends TargetedEvent {
@@ -104,6 +105,11 @@ export interface SegmentedControlProps extends ViewProps {
    * Active Font style properties of the Segmented Control
    */
   activeFontStyle?: FontStyle;
+
+  /**
+   * Touchable style properties for Segmented Control Tab
+   */
+  tabStyle?: ViewStyle;
 }
 
 /**

js/SegmentedControl.js

@@ -32,6 +32,7 @@ const SegmentedControl = ({
   values,
   tintColor,
   backgroundColor,
+  tabStyle,
   fontStyle,
   activeFontStyle,
   appearance,
@@ -101,6 +102,7 @@ const SegmentedControl = ({
                 key={index}
                 value={value}
                 tintColor={tintColor}
+                tabStyle={tabStyle}
                 fontStyle={fontStyle}
                 activeFontStyle={activeFontStyle}
                 appearance={colorScheme}

js/SegmentedControlTab.js

@@ -15,7 +15,7 @@ import {
   useColorScheme,
 } from 'react-native';
 
-import type {FontStyle} from './types';
+import type {FontStyle, ViewStyle} from './types';
 
 type Props = $ReadOnly<{|
   value: string | number | Object,
@@ -25,6 +25,7 @@ type Props = $ReadOnly<{|
   enabled: boolean,
   fontStyle?: FontStyle,
   activeFontStyle?: FontStyle,
+  tabStyle?: ViewStyle,
   appearance?: 'dark' | 'light' | null,
 |}>;
 
@@ -42,6 +43,7 @@ export const SegmentedControlTab = ({
   fontStyle = {},
   activeFontStyle = {},
   appearance,
+  tabStyle,
 }: Props): React.Node => {
   const colorSchemeHook = useColorScheme();
   const colorScheme = appearance || colorSchemeHook;
@@ -82,11 +84,11 @@ export const SegmentedControlTab = ({
 
   return (
     <TouchableOpacity
-      style={styles.container}
+      style={[styles.container, tabStyle]}
       disabled={!enabled}
       onPress={onSelect}
       accessibilityState={{selected: selected, disabled: !enabled}}>
-      <View style={[styles.default]}>
+      <View style={styles.default}>
         {typeof value === 'number' || typeof value === 'object' ? (
           <Image source={value} style={styles.segmentImage} />
         ) : isBase64(value) ? (

js/types.js

@@ -5,6 +5,7 @@
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 export type Event = SyntheticEvent<
   $ReadOnly<{|
@@ -13,6 +14,8 @@ export type Event = SyntheticEvent<
   |}>,
 >;
 
+export type ViewStyle = ViewStyleProp;
+
 export type FontStyle = $ReadOnly<{|
   /**
    * Font Color of Segmented Control
@@ -99,4 +102,9 @@ export type SegmentedControlProps = $ReadOnly<{|
    * it will override fontStyle for the selected segment
    */
   activeFontStyle?: FontStyle,
+
+  /**
+   * Touchable style properties for Segmented Control Tab
+   */
+  tabStyle?: ViewStyle,
 |}>;