I am using React Native Paper as my styling UI library and ran into an issue with the FAB. Within a FAB.group, I need to be able to put labels next to all the FAB options, but need the visuals to be the same for each of them. When putting a label for the original FAB, it becomes an extended FAB with the text on the right, while the others in the group have the text on the left. Is there a way to put the text on the left of the original FAB without just using an absolute positioning of a Text component and manually putting it there?

I’ve included the code below, as well as some images.

`import React, { useState } from “react”;
import { StyleSheet, Text } from “react-native”
import { FAB, Portal } from “react-native-paper”;

const HomeFAB = ({ onPress, onCreateExperiencePress, onCreateContactPress }) => {
const [state, setState] = useState({open: false})

const onStateChange = ({ open }) => setState({ open });

const { open } = state;

return (

     <FAB.Group
        open={open}
        visible
        size="med"
        // label="Create Experience"
        icon={open ? "notebook-outline" : "plus"}
        onPress={() => {
           if (open) {
              onCreateExperiencePress()
           }
        }}
        color={"white"}
        fabStyle={[!open ? {backgroundColor: "#51bdd4"} : {backgroundColor: 'grey'}]}

        actions={[
           {
              icon: "account-box", 
              label: "Create Contact",
              color: 'white',
              style: styles.buttonStyle,
              onPress: () => onCreateContactPress(),
              size: "med"
           }
        ]}
        onStateChange={onStateChange}
     />


     
  </Portal>

)
}

const styles = StyleSheet.create({
buttonStyle: {
backgroundColor: ‘grey’,
borderRadius: 12,

}
});

export default HomeFAB;`

FAB without being opened
FAB after opening

I can’t use the label attribute or it starts looking like this instead

FAB with label