sidevesh / react-native-fab Goto Github PK

I start my screen with

 state={is_fab_visible : false}
 <FAB
               ...
              visible={this.state.is_fab_visible} 
              iconTextComponent={<ImageSvg image={"ArrowDownIcon"}/>}/>

Fab is not visible on start, but i see ImageSvg on my screen. And if a swich is_fab_visible to on/off, than ImageSvg is gone

Like this, props of 'style' occur warning.

So, I try to find a solution.

export default class FAB extends Component {
  static propTypes = {
    buttonColor: PropTypes.string,
    iconTextColor: PropTypes.string,
    onClickAction: PropTypes.func,
    iconTextComponent: PropTypes.element,
    visible: PropTypes.bool,
    snackOffset: PropTypes.number,
    style: PropTypes.shape,
  };

replace

export default class FAB extends Component {
  static propTypes = {
    buttonColor: PropTypes.string,
    iconTextColor: PropTypes.string,
    onClickAction: PropTypes.func,
    iconTextComponent: PropTypes.element,
    visible: PropTypes.bool,
    snackOffset: PropTypes.number,
    style: PropTypes.objectOf(PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
  ])),
  };

It doesn't occur warning.

Plus icon is not in the centre. How do set it to centre

Please keep this warning in consideration for coming updates

When I try to use attribute iconTextComponent, and pass in Icon element, I got the following error:
Invariant Violation: Nesting of <View> within <Text> is not currently supported.
Is there any solution for using custom icons?

A warning comes up to replace componentWillReceiveProps() to componentDidUpdate()
Thank you for your work.

Hi, thanks for the component!
I'm trying to use a custom icon on it, but I'm getting the error Unexpected view type nested under text node, my code is the same from your example:

<FAB buttonColor="red" iconTextColor="#FFFFFF" 
onClickAction={() => { console.log("FAB pressed") }} 
visible={true} iconTextComponent={<Icon name="add" />} />

Using import { Icon } from 'react-native-elements';

For testing purposes there is need of testID parameter in props.

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false` 
FAB@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:219503:36

solved by adding useNativeDriver: false to the animation config objects like so:

// ./node_modules/react-native-fab/index.js:105
    if (nextProps.visible && !visible) {
      Animated.timing(
        translateValue,
        {
          duration: durationValues.entry,
          toValue: 1,
          easing: sharpEasingValues.entry,
          useNativeDriver: false // <-- add this line and also in the other 3 instances.
        },

setting it to true leads to an error.

Can i change the icon from "+" to any image icon of my choice. I dont want to use material icons What I tried is:

    <FAB
       buttonColor="#fca335"
       iconTextComponent={ 
           <Image
                  source={require('../img/right.png')}
                 style={styles.rightIconStyle}
            />
        }
        iconTextColor="#FFFFFF"
        onClickAction={() => {this.popupDialog.show();}}
        visible={true} />

The button simply does not appear on screen. Some propType warnings are thrown:

Warning: Failed prop type: Invalid props.style key 'fontSize' supplied to 'View'.

Warning: FAB: type specification of prop 'style' is invalid; the type checker function must return 'null' or an 'Error' but returned a function. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf,oneOfType, and shape all require an argument).

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types

Please Solve it

This behavior appear after change focus between Input Text Fields, i added a listener to keyboard to verify that current status has no changes.

I put the component in my app render and got :

Warning: FAB: type specification of prop `style` is invalid; the type checker function must return `null` or an `Error` but returned a function. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).

Do you know how I can turn off the warning or fix the issue ?

Thanks !

Using : "react": "16.8.3",

render() {
  return (
    <ScrollView>
       <View style={{height: 9000}} />
       <FAB />
    </ScrollView>
  )
}

In a scenario like this, the FAB is pushed all the way to the bottom, and out of view.

Expected result:
Button should float above content and always anchor to the lower right, even on scroll

It seems that the demo gif also has this problem.