Giter Site home page Giter Site logo

react-native-fab's Introduction

react-native-fab

A FAB button component for Android and iOS, customizable, simple and as per material design specs.

FAB demo with snackbar

See Google Material Design for more info on FABs.

Installation

npm install --save react-native-fab

Basic Usage

import FAB from 'react-native-fab'

Code

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

Options

Prop Type Effect Default Value
visible boolean Show or hide the FAB true
buttonColor string The color of FAB red
onClickAction function Function to be called when button is pressed ()=>{}
iconTextColor color The color of icon of FAB #FFFFFF
iconTextComponent component Text component or any other component based on it, works great with Icon from react-native-vector-icons <Text>+</Text>
snackOffset number The amount by which to move up the FAB to accomodate snackbar 0

Note

  • When visible prop is changed, the FAB will be animated in/out of screen.
  • This works great together with react-native-snackbar-component. See demo for example and instructions how to.

react-native-fab's People

Contributors

dependabot[bot] avatar jkomyno avatar pedramveisi avatar radko93 avatar sidevesh avatar taejoongyoon avatar tarikbc avatar thajay avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-native-fab's Issues

Animated: `useNativeDriver` was not specified.

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.

Type specification of prop `style` is invalid

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",

Not working on Expo and iOS Simulator

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).

Missing testID

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

props of 'style' Occur warning

image

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.

fab visible=false, but component in iconTextComponent visible

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

Change FAB icon

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} />


Unexpected view type nested under text node

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';

Can't use custom icon

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?

Button doesn't float as expected

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.