feat: allow custom text transforms in buttons (#112)

* feat: allow custom text transform

* fix failing test

Author: vonovak

README.md

@@ -218,6 +218,10 @@ The default handler for overflow menu on iOS is `overflowMenuPressHandlerActionS
 
 One of the usual things you may want to do is override the cancel button label on iOS - see [example](example/screens/UsageWithOverflow.tsx).
 
+#### Using custom text transforms
+
+Use the `buttonStyle` prop to set [`textTransform`](https://reactnative.dev/docs/text-style-props#texttransform) styles for button titles.
+
 #### How to integrate in your project
 
 This sections covers how you should use the library in your project. Please note that there are numerous [example screens](https://github.com/vonovak/react-navigation-header-buttons/tree/master/example/screens).

example/screens/UsageWithIcons.tsx

@@ -15,7 +15,9 @@ const IoniconsHeaderButton = (props) => (
   <HeaderButton IconComponent={Ionicons} iconSize={23} color="blue" {...props} />
 );
 
-const ReusableSelectItem = ({ onPress }) => <Item title="Edit" onPress={onPress} />;
+const ReusableCapitalizedEditItem = ({ onPress }) => (
+  <Item title="edit" onPress={onPress} buttonStyle={{ textTransform: 'capitalize' }} />
+);
 
 const ReusableItem = ({ onPress }) => <HiddenItem title="hidden2" onPress={onPress} />;
 
@@ -27,7 +29,7 @@ export function UsageWithIcons({ navigation }) {
       headerRight: () => (
         <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
           <Item title="search" iconName="ios-search" onPress={() => alert('search')} />
-          <ReusableSelectItem onPress={() => alert('Edit')} />
+          <ReusableCapitalizedEditItem onPress={() => alert('Edit')} />
           <OverflowMenu
             style={{ marginHorizontal: 10 }}
             OverflowIcon={<Ionicons name="ios-more" size={23} color="blue" />}

src/HeaderItems.js

@@ -45,24 +45,23 @@ export function renderVisibleButton(visibleButtonProps: VisibleButtonProps): Rea
       style={StyleSheet.compose(styles.button, buttonStyle)}
     />
   ) : (
-    <Text style={[styles.text, { color }, buttonStyle]}>{textTransformer(title)}</Text>
+    <Text style={[styles.text, { color }, buttonStyle]}>{title}</Text>
   );
 }
 
-const textTransformer = (label: string) =>
-  Platform.OS === 'ios' ? label.charAt(0).toUpperCase() + label.substr(1) : label.toUpperCase();
-
 const styles = StyleSheet.create({
   text: {
     ...Platform.select({
       android: {
         fontFamily: 'sans-serif-medium',
         fontSize: 14,
         marginHorizontal: 11,
+        textTransform: 'uppercase',
       },
       default: {
         fontSize: 17,
         marginHorizontal: 10,
+        textTransform: 'capitalize',
       },
     }),
   },

src/__tests__/HeaderButtons.test.js

@@ -12,10 +12,10 @@ describe('HeaderButtons', () => {
   it('renders button with pressable labels when Item is a direct or indirect child', () => {
     const searchOnPress = jest.fn();
     const deleteOnPress = jest.fn();
-    const WrappedItem = () => <Item title="delete" onPress={deleteOnPress} />;
+    const WrappedItem = () => <Item title="Delete" onPress={deleteOnPress} />;
     const { getByText } = render(
       <HeaderButtons>
-        <Item title="search" onPress={searchOnPress} />
+        <Item title="Search" onPress={searchOnPress} />
         <WrappedItem />
       </HeaderButtons>
     );