santomegonzalo / react-native-floating-action Goto Github PK

The expo app displays with the following message

"This project uses SDK v27.0.0, but this Expo Client requires at least v33.0.0"

As i understand so far, only image files are supported for icon. do you have plan to support any component like Icon (react-native-element)?

Hi,
Floating button is getting hidden by keyboard on iOS when the keyboard is on, but it works fine on Android

I was using this component in a test project some days ago, and the FAB looked just like the examples. However, when I started a new project yesterday, the button shadow, that should be under the button, is being rendered above it. The code for both projects is the same, just the colors are different.

Then:

<FloatingAction
    color="#efefef" overlayColor="rgba(0,0,0,0)"
    onPressMain={() => this.scan(2000)}
    floatingIcon={<Icon color="black" name="bluetooth-searching" />}
/>

Now:

<FloatingAction
    color="#006aff" overlayColor="rgba(0,0,0,0)"
    onPressMain={() => this.scan(2000)}
    floatingIcon={<Icon color="white" name="bluetooth-searching" />}
/>

Is it a problem with React Native version? The test project used version 0.60.5, this project used 0.61.1.

<FloatingAction actions={actions} color={"#000"} onPressItem={ (name) => { if(name== 'Logout'){ this.logout() } else if(name== 'ABC'){ Actions.ABC() } else if (name == 'DEF'){ Actions.DEF() } else if(name == 'XYZ'){ this.XYZ({ fromDashBoard: "fromDashBoard" }) } } } />

It gives me a Blue colored shadow for a while,  as i press the action button. I don't want that , kindly help

It would be great if you could use the button itself as a single action, with it's own icon. For things like "Save", etc.

Control cannot use in ScrollView

Expected text label for FAB Actions, works fine on most devices.

Experiencing the below case on iPad Mini.

Unsure what could be causing it, but the padding or margin on the text appears to be breaking for actions.

Will be removed by React 16

My package.json dependencies
"dependencies": {
"expo": "^18.0.3",
"react": "16.0.0-alpha.12",
"react-native": "^0.45.1",
"react-native-floating-action": "^1.1.0",
"react-navigation": "^1.0.0-beta.11"
}
`

See below

Congratulations on your work and thank you very much for making it available.
I use react-native-material-bottom-navigation and the tab is superimposed on the button. How do I position him further up? I do not want him to override Tab, but rather stay a little above it.

First of all, congratulations and thank you for this excellent job!
Is it possible to change the icon of the main button?
If yes, how ?

Right now, it is not possible to modify the text style
https://github.com/santomegonzalo/react-native-floating-action/blob/master/component/FloatingActionItem.js#L62

It would be fantastic to be able to supply an optional prop for the style as well as some extra props that would be passed along the text component

I'd be great to be able to overwrite the bottom, for all positions, and left / right values for right and left positioning using props. Do you think it's a good idea? I can do a PR if you want.

When using react-navigation to render a bottom tab, it isn't covered by the overlay in the floating action button. Is there any way around this?

After I adjust the 'size' for the icon in my actions list, the rendered icon size doesn't change.

Is there a way to have the button fixed on bottom right while i switch between top tabs? Right now i'm switching screens but the button is on every single one of them.

I have used distanceToEdge props, to show the icon in every page in every position, but it's not working, I put that in main APP page
Here is my code,

floatingIconEdge = () => {
// floating icon showing edges for different screens
const { currentScreen } = this.state
Reactotron.log({ currentScreen: currentScreen });
switch (currentScreen) {
case 'ShopScreen':
return { vertical: 0, horizontal: 0 }
case 'StoreHome':
return { vertical: 10, horizontal: 10 }
default:
return { vertical: 40, horizontal: 40 }
}
}
<FloatingAction
actions={actions}
floatingIcon={<Icon name={'ios-help-circle-outline'} style={{ fontSize: 30, color: '#ffffff' }} />}
onPressItem={name => {
Reactotron.error({ name });
NavigationService.navigate('ChatRoom')
}}
distanceToEdge={this.floatingIconEdge()}
color={'#2cb673'}
visible={this.floatingIconVisible()}
/>

where to put key props ???

The buttonSize props is missing in the IFloatingActionProps.

While using the Floating Action component with TypeScript it throws the error "buttonSize property does not exist"

Kindly include buttonSize in iFlotingActionProps.

Hello, can i change the FloatingAction button's size? I tried to change the "floatingIcon" props, but it only changed the icon, not the size

The FAB is covered (i.e. not shown) when there are other components with an elevation on the same screen that take up the same space that it does. I tried adding elevation to PropTypes and elevation to the shadow properties, but it hasn't worked.

Is it possible to stop the rotation animation of the button when it is pressed? I just need the button itself.

Hi,

This is good component but i guess we can not use inside scrollview. When i put inside the scrollview fab button shows in the end of container. I expected that fab must stay spesific location.

You can see the behavior in your example. The header bar is not covered by the overlay. Is this on purpose?

Hello, first of all thank you for this library 👍

I had encountered a problem when wrapping a view with position absolute. The action button doesn't seem to trigger any click.

I am still fairly new to React Native, so if I had misunderstood any usage parts please let me know, thanks!

This issue is on Android. iOS is working fine.

Example code:

    <View style={ {position: 'absolute', top: 80, left: 80} }>
      <FloatingAction />
    </View>

React Native: 0.60.5
Device: Tried physical/emulator, Pixel XL API 29

How we can change the plus icon of the Button?

Hi,
I am trying to redirect to another screen in certain conditions when tapping on main button. This happens, however when navigating back to the screen is showing the inactive backdrop. User has to tap on the screen to make it active. Until then the state remained at false. How do I set the state to false programatically so that screen remains active after I navigate away ?

This code does not work as expected. The button is always visible in the first render.

Works as expected when updating the state and making the someArray an empty array.

     ...
      <FloatingAction
        overrideWithAction
        actions={FABactions}
        visible={this.state.someArray.length > 0}
        onPressItem={() => console.log('FAB pressed')}
        buttonColor="#6699CC"
      />

trying to set the visible prop to false also display the FAB...

This code below works as expected in first render. (but lacks the awesome entrance animation)

{this.state.someArray.length > 0 && (
          <FloatingAction
            overrideWithAction
            actions={FABactions}
            onPressItem={() => console.log('FAB pressed')}
            buttonColor="#6699CC"
          />
        )
}

Hello Gonzalo, how are you?

I am using this library and I have to thank you, this is an awesome library, the best that I found for React Native.

I am currently modifying it to use on my project, and I was thinking which those mods can be useful to this project.

Because of the size of lodash library, I am removing it from the lib, and I am enabling the some styles of FloatingActionItems, like width, height, padding, margin, even in the centered Items.
And of course, I am respecting the patterns keeping it like a high order component itself.

If this sounds interesting to your project, I would be glad to contribute with this project.

Ps.: these changes aren't done yet
Cheers.

Hello, the floating action button is giving error in andorid API <21. full error as follows:

Error while updating property 'nativeBackgroundAndroid' of a view managed by: RCTView

null

Ripple drawable is not available on android API <21
updateViewProp
ViewManagersPropertyCache.java:95
setProperty
ViewManagerPropertyUpdater.java:129
.
.
.

I am using Floating Action Button version 1.13.0. It's working find on iOS but doesnt even show up on Android, I even tried changing layouts and also tried out variants of relative and absolute position but no luck...

          <View style={{justifyContent:'flex-end'}}>
            <FloatingAction
              ref={(component)=>{this.floatingAtionMenu=component}}
              actions={this.state.actions}
              showBackground={false}
              color={Values.Colors.COLOR_PRIMARY}
              overlayColor={Values.Colors.COLOR_PRIMARY}
              onPressItem={(name)=>{
                console.log(`Selected Fab Action: ${name}`)
              }}
              />
            </View>

Some information about versions I am using...

React Native

"react-native": "0.52.0",
"react-native-floating-action": "^1.13.0"

Android

compileSdkVersion   = 27
targetSdkVersion    = 27
minSdkVersion       = 16
buildToolsVersion   = "27.0.3"
supportLibVersion   = "27.0.2"
googlePlayServicesVersion = "15.0.1"

Some Screenshots
iOS

Android

Getting this error after I updated to gradle 3

miapp/android/app/build/intermediates/res/merged/release/drawable-xhdpi/node_modules_reactnativefloatingaction_images_add.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file.. error: failed parsing overlays

text is not vertically aligned in Android , Ios working fine

Is this really fixed?

      <FloatingAction
        visible={false}
        actions={actions}
        ... />

In my Case the Button is still visible.

First of all it is really great. I was looking for this kind of fabs finally i got.
I want to change main floating icons.

I used floatingIcon props to change. icon is changed as expected but i need close icon when user click on floating button.

can anyone help me ?

First of all, thank you for publishing your great module. It perfectly matches my needs and is customize-able enough for more advanced scenarios as well.

One feature that will make it even better is for the component to accept a callback function which will be triggered every time the state of the main button changes (open/closed). My use-case is that I want to change the main button's background colour when it's active. There is an onPressMain callback, but I cannot detect when the user closes the overlay and thus I cannot change the colour to the default one.

I want to navigate to a new Screen when a item is pressed.
Is this possible ?

error ▶︎ Failed to compile.
error ▶︎ [ '/Users/vsts/agent/2.155.1/work/1/s/common/temp/node_modules/.onedrive.pkgs.visualstudio.com/react-native-floating-action/1.19.0/[email protected][email protected]/node_modules/react-native-floating-action/src/FloatingAction.js\nModule build failed (from /Users/vsts/agent/2.155.1/work/1/s/common/temp/node_modules/.onedrive.pkgs.visualstudio.com/babel-loader/8.0.6/[email protected]/node_modules/babel-loader/lib/index.js):\nSyntaxError: /Users/vsts/agent/2.155.1/work/1/s/common/temp/node_modules/.onedrive.pkgs.visualstudio.com/react-native-floating-action/1.19.0/[email protected][email protected]/node_modules/react-native-floating-action/src/FloatingAction.js: Unexpected token, expected "," (134:10)\n\n 132 | buttonSize +\n 133 | this.distanceToVerticalEdge\n> 134 | actionsPaddingTopBottom +\n | ^\n 135 | height -\n 136 | (isIphoneX() ? 40 : 0),\n 137 | duration:

I am facing an issue with this library when using it with flatlist, floating button is hiding behind flatlist items and also button has shadow from left, right and top.have a look on that two screens screens:

![Screenshot_2019-11-08-11-55-54-044_com cloudarchiveapp](https://user-images.githubusercontent.com/36499090/68455095-79915c80-0220-11ea-809f-2f78eadd508e.png

)

I'm interested in contributing and was wondering what you meant by crazy animations? Is there anything I can do to help this repo?

Thanks.

I don't want it to be tilted on pressing

Even if we are providing the custom component for The Floating Button, the shadow is still visible.

Code:

<FloatingAction
  distanceToEdge={30}
  actions={actions}
  floatingIcon={<View style={{ height: 50, width: 50, backgroundColor: 'yellow', borderRadius: 50 }} />}
  color="transparent"
  actionsPaddingTopBottom={0}
  showBackground={false}
  onOpen={this.handleOpen}
  onClose={this.handleClose}
  onPressItem={this.handlePressItem}
/>

is there any way to apply more styles in text ?

version: 1.10.1

Looks like shadeColor function supports only #00879d color format.

It causes weird ripple effect with wrong color in case of FloatingAction color is set in other formats.
It would be nice to have support of other color formats for example: rgba(0,135,157,1) or #888.
Or some note about it in readme at FloatingAction's color prop.

shadeColor('rgba(0,135,157,1)', -30);
// returns that color #ff0700

I suggest to use this lib for color shading:
https://github.com/Qix-/color

Hi,

I'm trying to put the FAB over a TopTapNavigator created using createMaterialTopTabNavigator method.
My idea is that the button floats over any tab (not changing with tab content)

Do you have an example of how to do that ? That would be great !

Thanks

While trying to open the expo example in its latest android app, it shows the following error:
"This experience uses SDK v27.0.0, but this Expo client requires at least v33.0.0".

I can see a branch #update-expo-example. I am willing to make a pull request. Where do I start?