0

Is there a way to change the fontFamily property for the label in a FAB.Group item?

The docs state to use the labelStyle property for label styling, but that hasn't worked.

 <Provider>
  <Portal>
    <FAB.Group
      open={open}
      icon={open ? 'calendar-today' : 'plus'}
      actions={[
        { icon: 'plus', onPress: () => console.log('Pressed add') },
        {
          icon: 'star',
          label: 'Star',
          labelStyle: { fontFamily: 'Ubuntu-Regular'},
          onPress: () => console.log('Pressed star'),
        },       
      ]}
      onStateChange={onStateChange}
      onPress={() => {
        if (open) {
          // do something if the speed dial is open
        }
      }}
    />
  </Portal>
</Provider>
Pyper
  • 75
  • 1
  • 7

1 Answers1

0

I figured out that you have to set the label style within each action. I ended up doing this:

Edit to include the code for the full component.

function FABGroup(props) {
    const {actions} = props
    const { theme, appearance } = useTheme()
    const styles = dynamicStyles(theme, appearance)
    const icon = 'gamepad-down'
    const [state, setState] = useState({ open: false });
    const onStateChange = ({ open }) => setState({ open });
    const { open } = state;

    const actionStyling = {
        labelTextColor: theme.colors[appearance].white,
        color: theme.colors[appearance].primaryForeground,
        style: {borderRadius: 50, backgroundColor: theme.colors[appearance].white},
        labelStyle: { fontSize: 20, fontFamily: appearance == 'dark' ? 'Ubuntu-Light' : 'Ubuntu-Regular'},
    }
    actions.map(action => Object.assign(action, actionStyling))

    return (
        <FAB.Group
        open={open}
        icon={open ? 'close' : icon }
        color={theme.colors[appearance].white}
        style={styles.fabContainer}
        backdropColor={'rgba(100, 100, 100, 0.25)'}
        fabStyle={styles.fabStyles}
        actions={actions}
        onStateChange={onStateChange}     
      />
    )

};

export default FABGroup;

I pass in actions as props since the actions vary from screen to screen, but to provide an example of one set of actions I pass in:

const actions = [
      { 
        icon: 'calendar-plus', 
        label: localized('Add Event'),
        accessibilityLabel: "add an event",
        onPress: () => setDatePickerModalVisible(!datePickerModalVisible),
      },
      { 
        icon: hidePastGames ? 'eye-outline' : 'eye-off-outline', 
        label: hidePastGames? localized('View Past Games') : localized("Hide Past Games"),
        accessibilityLabel: "add an event",
        onPress: () => setHidePastGames(!hidePastGames),
      },
    ]
Pyper
  • 75
  • 1
  • 7