react-native-floating-action - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #machine-learning #rust #linux #java #windows #cli #vue #awesome-list #security #mcp #open-source

react-native-floating-action

(★ 486)

Material design action button for React Native

파일 탐색기

최종 버전 다운로드 (.zip)

- FUNDING.yml
- - packager-info.json
  - settings.json
- - assets.json
- - icon.png
  - splash.png
- - CustomActionComponent.js
  - Property.js
- - add.png
  - add@2x.png
  - add@3x.png
  - ic_accessibility_white.png
  - ic_accessibility_white_2x.png
  - ic_accessibility_white_3x.png
  - ic_language_white.png
  - ic_language_white_2x.png
  - ic_language_white_3x.png
  - ic_room_white.png
  - ic_room_white_2x.png
  - ic_room_white_3x.png
  - ic_videocam_white.png
  - ic_videocam_white_2x.png
  - ic_videocam_white_3x.png
- - FloatingActionActionsDistance.js
  - FloatingActionCenterScreen.js
  - FloatingActionChangeActionColor.js
  - FloatingActionCustomActionComponent.js
  - FloatingActionDistanceEdge.js
  - FloatingActionHexColorScreen.js
  - FloatingActionHideBackgroundScreen.js
  - FloatingActionLeftScreen.js
  - FloatingActionListenKeyboard.js
  - FloatingActionOpenMountScreen.js
  - FloatingActionOverlayScreen.js
  - FloatingActionOverrideWithActionScreen.js
  - FloatingActionRgbColorScreen.js
  - FloatingActionRightScreen.js
  - FloatingActionShadow.js
  - FloatingActionStatusProgramatically.js
  - FloatingActionVisibilityScreen.js
- .babelrc
- .DS_Store
- .watchmanconfig
- App.js
- app.json
- metro.config.js
- package.json
- yarn.lock
- - color.js
  - platform.js
  - touchable.js
- AddIcon.js
- FloatingAction.js
- FloatingActionItem.js
- index.js
.DS_Store
.eslintrc
.flowconfig
.gitignore
.npmignore
index.d.ts
index.js
LICENSE
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/santomegonzalo/react-native-floating-action

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-floating-action

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i react-native-floating-action --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn add react-native-floating-action

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn run run:example

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Floating Action

Floating action button for React Native

**Table of Content**:

- [Expo example](#expo-example)
- [Example of how Expo looks](#example-of-how-expo-looks)
- [Installation](#installation)
- [Example (local)](#example)
- [How to use it](#how-to-use-it)
  - [Open and Hide it programatically](#open-and-hide-it-programatically)
- [Reference](#reference)
  - [Props](#props)
  - [`actions` Props](#actions-props)
- [TODO](#todo)

## Expo example

Open the following click on your phone: [Expo link](https://expo.io/@santomegonzalo/ReactNativeFloatingAction-Expo)

or user your phone and scan the following QR:

<img width="350" alt="Use it on Expo" src="https://user-images.githubusercontent.com/2914973/34082582-667c5738-e361-11e7-9251-5af5549b525c.png">

## Example of how Expo looks

<img src="https://user-images.githubusercontent.com/2914973/37876447-c5f553d0-304c-11e8-8c4f-7d6ef97d752c.gif" width="350">

## Installation

```
npm i react-native-floating-action --save
```

or

```
yarn add react-native-floating-action
```

## Example

Take a look into **example/ReactNativeFloatingAction-Expo**

To execute the example using **Expo** run the following command:

```bash
yarn run run:example
```

or open [Expo link](https://expo.io/@santomegonzalo/ReactNativeFloatingAction-Expo) from your mobile

## How to use it

**First step:** import the component:

```javascript
import { FloatingAction } from "react-native-floating-action";
```

**Second step:** define the buttons

```javascript
const actions = [
  {
    text: "Accessibility",
    icon: require("./images/ic_accessibility_white.png"),
    name: "bt_accessibility",
    position: 2
  },
  {
    text: "Language",
    icon: require("./images/ic_language_white.png"),
    name: "bt_language",
    position: 1
  },
  {
    text: "Location",
    icon: require("./images/ic_room_white.png"),
    name: "bt_room",
    position: 3
  },
  {
    text: "Video",
    icon: require("./images/ic_videocam_white.png"),
    name: "bt_videocam",
    position: 4
  }
];
```

**Third step:** use it

```javascript
<View style={styles.container}>
  <Text style={styles.example}>Floating Action example</Text>
  <FloatingAction
    actions={actions}
    onPressItem={name => {
      console.log(`selected button: ${name}`);
    }}
  />
</View>
```

### Open and hide it programatically

There are some cases where you want to show or hide the component without pressing the main button:

```javascript
<FloatingAction
  ref={(ref) => { this.floatingAction = ref; }}
  actions={[...]}
  ...
/>
```

and then:

```javascript
this.floatingAction.animateButton();
```

# Reference

## Props

#### `actions: Array<Object>`

**Default:** `[]`

Actions to be shown when user press the main Floating Button. See [Actions](#actions) section for more info about the `Object` keys and values.

#### ~~`buttonColor: String`~~

**Deprecated! use `color` instead!**

#### `color: String`

**Default:** `'#1253bc'`

Color of the main button. Pass this `String` as an hexadecimal color respecting the default format.

#### `distanceToEdge: Number | Object`

**Default:** `30`

Distance from button to edge. Can be a `Number` or an `Object` respecting the `{ vertical: Number, horizontal: Number }` format.

#### `visible: Boolean`

**Default:** `true`

Hide or Show the component using an animation.

#### `overlayColor: String`

**Default:** `'rgba(68, 68, 68, 0.6)'`

Color of the background overlay. The `String` must respect the `rgba()` pattern described in default value.

#### `position: String`

**Default:** `'right'`

Position to render the main button and actions, options: (`left`, `right`, `center`).

#### `overrideWithAction: String`

**Default:** `'false'`

Override the main action with the first action inside list actions, will not show other action.

#### `floatingIcon: Node`

**Default:** `ReactElement`

Change the default plus icon using `require(pathToImage)` or `ReactElement`.

#### `showBackground: Boolean`

**Default:** `true`

**Show** or **Hide** background after open.

#### `openOnMount: Boolean`

**Default:** `false`

Open component after mounting it, useful on some weird cases like tutorials.

#### `actionsPaddingTopBottom: Number`

**Default:** `8`

Change distance between actions.

#### `iconWidth: Number`

**Default:** `15`

Icon width of the main button.

#### `iconHeight: Number`

**Default:** `15`

Icon height of the main button.

#### `buttonSize: Number`

**Default:** `56`

Size of the main button.

#### `listenKeyboard: Boolean`

**Default:** `false`

Change position when the keyboard will appear.

#### `dismissKeyboardOnPress: Boolean`

**Default:** `false`

Dismiss keyboard when user press on the main button.

#### `shadow: Object`

**Default:** `{ shadowOpacity: 0.35, shadowOffset: { width: 0, height: 5 }, shadowColor: "#000000", shadowRadius: 3 }`

Change how we render the shadow of every button, this style will apply to the main button and to every action button.

#### `onPressItem: Function`

Function to be called as soon as the user select an option from actions. Will return the **`name`** of the action.

#### `onPressMain: Function`

Function to be called as soon as use click main button and will return `true` or `false` depeneding of the state.

#### `onPressBackdrop: Function`

Function to be called as soon as the backdrop is clicked.

#### `onClose: Function`

Function to be called after set state to **`false`**.

#### `onOpen: Function`

Function to be called after set state to **`true`**.

#### `onStateChange: Function`

Function to be called after every state change. Will return state object.

#### `animated: Boolean`

**Default:** `true`

Enable the animation to be called after every state change. Will return state object.

## `actions` Props

#### `color: String`

**Default:** `'#1253bc'`

Color of the action button.

#### `iconColor: String`

**Default:** `'#ffffff'`

Change default icon color

#### `icon: Any`

Icon to be rendered inside the action, will accept an URL or `React.Image`. If we want to send an URL we need to send it in this way: icon: `{ uri: 'https://imageurl.com' }` if we want to send a `React.Image` we will use it in this way: `icon: require('path/image')`.

#### `name: String`

Name of the icon, this name is used as parameter for `onPressItem` prop.

#### `buttonSize: Number`

**Default:** `40`

Size of of the action button.

#### `text: String`

Text to show near to the button. (Only apply for `position = ['left', 'right']`).

#### `textStyle: Object | Array`

**Default:** `{ fontSize: 12 }`

Style to update text size.

#### `textBackground: String`

**Default:** `#ffffff`

Background color for Text container.

#### `textColor: String`

**Default:** `#444444`

Text color for every action.

#### ~~`elevation: Number`~~

**Deprecated! use `textElevation` instead!*

#### `textElevation: Number`

**Default:** `5`

Elevation property (also modifies "shadowOffset" in iOS)

#### `render: Function => React Node`

**Default:** `5`

Custom render function for Action. If provided, other properties are not applicable. The provided function should return a `React Node`

#### `margin: Number`

**Default:** `8`

Additional margin for action. This property is useful when we want to override the current margin for example using custom render

#### `size: Number`

**Default:** `40`

Size of of the icon rendered inside the action

## TODO

- [x] first implementation
- [x] example
- [x] add colors configurations
- [x] add more positions like left, center and right
- [x] support hide or show the component with an animation
- [x] change plus icon to be customizable
- [x] use components as icon
- [x] hide background
- [x] open on mounting
- [ ] migrate to TypeScript
- [ ] allow user defined animations
- [ ] use crazy animations