react-native-animated-absolute-buttons

Animated absolute buttons that you can position anywhere on the screen. Feel free to use.

Example One | Example Two :-------------------------:|:-------------------------: |

Installation

npm install react-native-animated-absolute-buttons

Documentation

| Prop | Description | Type | Default | Required | |---|---|---|---|---| | buttonSize | Size of the main button. | number | 50 | NO | | buttonColor | Color of the main button. | string | 'indigo' | NO | | buttonShape | Shape of the main button. ('circular', 'rounded', 'square') | string | 'circular' | NO | | buttonContent | Content of the main button. | any (text, icon component etc.) | - | YES | | direction | The direction in which the buttons will open ('top', 'bottom', 'left', 'right') | string | 'top' | NO | | position | Position of all buttons ('top-left', 'top-right', 'bottom-left', 'bottom-right') | string | 'bottom-right' | NO | | positionVerticalMargin | Vertical distance in the position of the buttons | number | 10 | NO | | positionHorizontalMargin | Horizontal distance in the position of the buttons | number | 10 | NO | | time | Time to open buttons (animation time) | number | 500 | NO | | easing | Animation easing Please read | string | 'Linear' | NO | | buttons | Buttons (Detailed explanations are below) | array | - | YES |

Props table for buttons array:

| Prop | Description | Type | Default | Required | |---|---|---|---|---| | color | Color of the button. | string | - | YES | | content | Content of the button. | any (text, icon component etc.) | - | YES | | action | Function of the button. | function | - | YES |

Usage

const buttons = [
    {
        color: 'blue',
        content: <Text>👊</Text>,
        action: () => {
            alert("You clicked!");
        }
    },
    {
        color: 'red',
        content: <Text>🤙</Text>,
        action: () => {
            alert("You clicked!");
        }
    },
    {
        color: 'green',
        content: <Text>👋</Text>,
        action: () => {
            alert("You clicked!");
        }
    },
];

<AnimatedAbsoluteButton
    buttonSize={50}
    buttonColor='indigo'
    buttonShape='circular'
    buttonContent={<Text>👍</Text>}
    direction='top'
    position='bottom-right'
    positionVerticalMargin={10}
    positionHorizontalMargin={10}
    time={500}
    easing='bounce'
    buttons={buttons}
/>