Merge pull request #24 from santomegonzalo/open-on-mount

Open on mount

.npmignore

@@ -1,3 +1,6 @@
 #exclude all examples
 
 ./example
+.DS_STORE
+README.md
+node_modules/

README.md

@@ -32,7 +32,13 @@ yarn add react-native-floating-action
 
 ## Usage
 
-To see how works, take a look into **example/FloatingAction**
+To see how works, take a look into **example/ReactNativeFloatingAction-Expo**
+
+To execute an example using Expo run the following command:
+
+```bash
+yarn test
+```
 
 **First step:** import the component:
 
@@ -98,6 +104,8 @@ import { FloatingAction } from 'react-native-floating-action';
 | position                | string                | right                 | Position to render the main button and actions, options: (**left**, **right**, **center**)                          |
 | overrideWithAction      | string                | false                 | Override the main action with the first action inside list actions, will not show other action                      |
 | floatingIcon            | node | ReactElement   |                       | Change the default plus icon using **require(pathToImage)** or **ReactElement**                                     |
+| showBackground          | boolean               | true                  | **Show** or **Hide** background after open it                                                                       |
+| openOnMount             | boolean               | false                 | Open component after mounting it, useful on some weird cases like tutorials                                         |
 | onPressItem             | function              |                       | Function to be call as soon as the user select an option from actions. Will return the name of the action.          |
 | onPressMain             | function              |                       | Function to be call as soon as use click main button and will return **true** or **false** depeneding of the state. |
 
@@ -117,6 +125,9 @@ import { FloatingAction } from 'react-native-floating-action';
 - [x] add colors configurations
 - [x] add more positions like left, center and right
 - [x] support hide or show the component with an animation
-- [ ] add sizing configurations
 - [x] change plus icon to be customizable
 - [x] use components as icon
+- [x] hide background
+- [x] open on mounting
+- [ ] allow user defined animations
+- [ ] use crazy animations

component/FloatingAction.js

@@ -32,6 +32,14 @@ class FloatingAction extends Component {
     this.visibleAnimation = new Animated.Value(props.visible ? 0 : 1);
   }
 
+  componentDidMount() {
+    const { openOnMount } = this.props;
+
+    if (openOnMount) {
+      this.animateButton();
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.visible !== this.props.visible) {
       if (nextProps.visible) {
@@ -86,7 +94,12 @@ class FloatingAction extends Component {
   };
 
   animateButton = () => {
-    const { overrideWithAction, actions, floatingIcon, onPressMain } = this.props;
+    const {
+      overrideWithAction,
+      actions,
+      floatingIcon,
+      onPressMain
+    } = this.props;
 
     if (overrideWithAction) {
       this.handlePressItem(actions[0].name);
@@ -250,13 +263,16 @@ class FloatingAction extends Component {
   }
 
   render() {
+    const { active } = this.state;
+    const { showBackground } = this.props;
+
     return (
       <Animated.View
         pointerEvents="box-none"
         style={[styles.overlay, { backgroundColor: 'transparent' }]}
       >
         {
-          this.state.active &&
+          active && showBackground &&
             this.renderTappableBackground()
         }
         {
@@ -288,6 +304,8 @@ FloatingAction.propTypes = {
   overrideWithAction: PropTypes.bool, // use the first action like main action
   onPressItem: PropTypes.func,
   distanceToEdge: PropTypes.number,
+  openOnMount: PropTypes.bool,
+  showBackground: PropTypes.bool,
   onPressMain: PropTypes.func
 };
 
@@ -297,7 +315,9 @@ FloatingAction.defaultProps = {
   buttonColor: '#1253bc',
   overlayColor: 'rgba(68, 68, 68, 0.6)',
   position: 'right',
-  distanceToEdge: 30
+  distanceToEdge: 30,
+  openOnMount: false,
+  showBackground: true
 };
 
 const styles = StyleSheet.create({