title: Unable to successfully resize icon in floating action button packages React Native
body: <p><strong>Will be providing images in the bottom to show what I mean</strong></p>
  <p>I was hoping to get some advice on what might be going wrong on my end. I keep trying to find different packages but am unable to get what I want. When I tried using <code>react-native-floating-action</code> it gave me the right size I was looking for except I can't control how the closing is done. Like I don't want it to close when an item gets pressed.</p>
  <p>I also tried using <code>react-native-paper</code> but the icons are so tiny. If I try to resize it, they start to get cut off so was hoping some advice in regards to one of the two or something else if there is.</p>
  <p><strong>CODE</strong></p>
  <pre><code>    // react-native-paper
      &lt;Provider&gt;
          &lt;Portal&gt;
              &lt;FAB.Group
                  style={{
                      backgroundColor: 'transparent',
                      height: '100%',
                      width: '100%'
                  }}
                  open={isOpen}
                  fabStyle={{
                      marginBottom: 200,
                      backgroundColor: 'red'
                  }}
                  icon={(props) =&gt; (
                      &lt;MaterialIcons
                          {...props}
                          name=&quot;add-circle-outline&quot;
                          size={30}
                          color=&quot;white&quot;
                          style={{
                              backgroundColor: 'blue',
                              position: 'absolute',
                              left: 0,
                              fontSize: 50,
                              width: 200
                          }}
                      /&gt;
                  )}
                  actions={[
                      {
                          icon: (props) =&gt; {
                              console.log(props);
                              return (
                                  &lt;Avatar
                                      containerStyle={{
                                          backgroundColor: 'blue'
                                      }}
                                      size={30}
                                      rounded
                                      source={{
                                          uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'
                                      }}
                                  &gt;
                                      &lt;AntDesign
                                          style={{ position: 'absolute', left: 10, top: 15, color: 'red' }}
                                          name=&quot;pluscircle&quot;
                                          size={15}
                                          color=&quot;white&quot;
                                      /&gt;
                                  &lt;/Avatar&gt;
                              );
                          },
                          onPress: () =&gt; console.log('Pressed star'),
                          style: {
                              backgroundColor: 'transparent',
                              size: 50,
                              backgroundColor: 'white'
                          }
                      },
                      {
                          icon: (props) =&gt; {
                              console.log(props);
                              return &lt;AntDesign name=&quot;heart&quot; size={props.size} color={props.color} /&gt;;
                          },
                          onPress: (e) =&gt; console.log(e)
                      },
                      {
                          icon: (props) =&gt; {
                              console.log(props);
                              return (
                                  &lt;AntDesign
                                      {...props}
                                      name=&quot;message1&quot;
                                      color={props.color}
                                      style={{ width: props.size, height: props.size }}
                                  /&gt;
                              );
                          },
                          onPress: () =&gt; console.log('Pressed notifications')
                      }
                  ]}
                  onStateChange={onStateChange}
                  onPress={() =&gt; {
                      setIsOpen((prev) =&gt; !prev);
                      if (isOpen) {
                          // do something if the speed dial is open
                      }
                  }}
              /&gt;
          &lt;/Portal&gt;
      &lt;/Provider&gt;
      // react-native-floating-action
      &lt;FloatingAction
          onPressMain={(e) =&gt; console.log(e)}
          animated={false}
          color={'transparent'}
          showBackground={false}
          distanceToEdge={{ vertical: 100, horizontal: 20 }}
          floatingIcon={
              &lt;View
                  style={{
                      height: '100%',
                      width: '100%',
                      flex: 1,
                      justifyContent: 'center',
                      alignItems: 'center'
                  }}
              &gt;
                  &lt;MaterialIcons name=&quot;add-circle-outline&quot; size={50} color=&quot;white&quot; /&gt;
              &lt;/View&gt;
          }
          position={'right'}
          actions={actions}
          onPressBackdrop={(s) =&gt; console.log(s)}
          onPressItem={(name) =&gt; {
              console.log('PRESSING');
              // console.log(floatB);
              // floatB.animateButton();
              if (name === 'bt_language') {
                  navigation.navigate('Language');
              }
          }}
      /&gt;
  </code></pre>
  <p>In the image below. It shows what happens when i try to increase the side of the icon while using <code>react-native-paper</code>.</p>
  <p><a href="https://i.stack.imgur.com/2d3IL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2d3IL.png" alt="enter image description here" /></a></p>
  <p>The next image below is the <code>react-native-floating-action</code>. The icons are much better but the issue I'm having is mostly I'm unable to prevent the actions from collapsing after clicking on an item. I'm hoping to only open and close when the main button is pressed.</p>
  <p><a href="https://i.stack.imgur.com/eOPZq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eOPZq.png" alt="enter image description here" /></a></p>
  <p>Thank you for all the help and advice about this one.</p>