Cross Platform, highly customizable native performance ActionSheet for react native.

栏目: IT技术 · 发布时间: 4年前

内容简介:A highly customizable cross platform ActionSheet for react native.

react-native-actions-sheet

A highly customizable cross platform ActionSheet for react native.

Cross Platform, highly customizable native performance ActionSheet for react native.

Screenshots

Cross Platform, highly customizable native performance ActionSheet for react native. Cross Platform, highly customizable native performance ActionSheet for react native.

Features

❶ Native Animations & Performance ❷ Cross Platform (iOS and Android) ❸ Identical Working on Android and iOS ❹ Gesture Control ❺ Raw ActionSheet - You can Add Anything ❻ Allow ActionSheet to be partially shown when opened ➐ Support TextInputs ❽ Cool bounce effect on open.

Run Example

To run the example app clone the project

git clone https://github.com/ammarahm-ed/react-native-actions-sheet.git

then run yarn or npm install in the example folder and finally to run the example app:

react-native run-android

Installation Guide

npm install react-native-actions-sheet --save

or if you use yarn:

yarn add react-native-actions-sheet

Usage Example

For complete usage, see the example project.

<View
        style={{
          justifyContent: 'center',
          flex: 1,
        }}>
        <TouchableOpacity
          onPress={() => {
            actionSheet.setModalVisible();
          }}>
          <Text>
            Open ActionSheet
          </Text>
        </TouchableOpacity>

        <ActionSheet
          ref={ref => (actionSheet = ref)}
          children={YOUR CUSTOM COMPONENT INSIDE THE ACTIONSHEET}
        />
        
      </View>

Reference

Props

ref

Assigns a ref to ActionSheet component to use methods.

Type Required
ref Yes

children

Renders a custom component inside the ActionSheet.

Type Required
React.Component Yes

Default: An Empty <View/>

<ActionSheet
	children={<View/>}
	/>

You can also wrap your component in ActionSheet like this:

<ActionSheet>
	<View/>
	</ActionSheet>

initialOffsetFromBottom

Use if you want to show the ActionSheet Partially on Opening. Requires gestureEnabled=true

Type Required
boolean no

Default: 1

extraScroll

Normally when the ActionSheet is fully opened, a small portion from the bottom is hidden by default. Use this prop if you want the ActionSheet to hover over the bottom of screen and not hide a little behind it.

Type Required
number no

Default: 0

containerStyle

Any custom styles for the container.

Type Required
Object no

CustomHeaderComponent

Your custom header component. Using this will hide the default indicator.

Type Required
React.Component no

headerAlwaysVisible

Keep the header always visible even when gestures are disabled.

Type Required
boolean no

Default: false

CustomFooterComponent

A footer component if you want to add some info at the bottom.

Type Required
React.Component no

Note:Remember to give footer a fixed height and provide ActionSheet the footerHeight prop with same value. If you have added margins etc, add those values to footerHeight also.

footerHeight

Height of the footer

Type Required
number no
Default: 80

footerStyle

Custom Styles for the footer container.

Type Required
Object no

footerAlwaysVisible

Keep footer visible. Currently when you overdraw, the footer appears, however you can change this by setting this to true .

Type Required
boolean no

Default: false

animated

Keep footer visible. Currently when you overdraw, the footer appears, however you can change this by setting this to true .

Type Required
boolean no

Default: true

openAnimationDuration

Duration of opening animation.

Type Required
number no

Default: 200

closeAnimationDuration

Duration of closing animation.

Type Required
number no

Default: 300

gestureEnabled

Enables gesture control of ActionSheet

Type Required
boolean no

Default: false

bounceOnOpen

Bounces the ActionSheet on open.

Type Required
boolean no

Default: false

bounciness

How much you want the ActionSheet to bounce when it is opened.

Type Required
number no

Default: 8

springOffset

When touch ends and user has not moved farther from the set springOffset, the ActionSheet will return to previous position.

Type Required
number no

Default: 50

elevation

Add elevation to the ActionSheet container.

Type Required
number no

Default: 0

indicatorColor

Color of the gestureEnabled Indicator.

Type Required
string no

Default: "#f0f0f0"

overlayColor

Color of the overlay/backdrop.

Type Required
string no

Default: "black"

defaultOverlayOpacity

Default opacity of the overlay/backdrop.

Type Required
number 0 - 1 no

Default: 0.3

closeOnPressBack

Will the ActionSheet close on hardwareBackPress event.

Type Required
boolean no

Default: true

onClose

Event called when the ActionSheet closes.

Type Required
function no

onOpen

An event called when the ActionSheet Opens.

Type Required
function no

Methods

Methods require you to set a ref on ActionSheet Component.

setModalVisible

ActionSheet can be opened or closed using its ref.

// First create a ref on your <ActionSheet/> Component.

<ActionSheet
ref={ref => this.actionSheet = ref}
/>

// then later in your function to open the ActionSheet:

this.actionSheet.setModalVisible();

Find this library useful? :heart:

Support it by joining stargazers for this repository. :star:️ and follow me for my next creations!

MIT Licensed


以上所述就是小编给大家介绍的《Cross Platform, highly customizable native performance ActionSheet for react native.》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

常用算法程序集

常用算法程序集

2009-7 / 58.00元

《常用算法程序集(C++语言描述)第4版》是针对工程中常用且行之有效的算法而编写的,主要内容包括矩阵运算,矩阵特征值与特征向量的计算,线性代数方程组的求解,非线性方程与方程组的求解,插值与逼近,数值积分,常微分方程组的求解,数据处理,极值问题的求解,复数、多项式与特殊函数的计算,查找与排序。书中所有的算法程序均用C++描述,全部程序可从清华大学出版社网站上的《常用算法程序集(C++语言描述)第4版......一起来看看 《常用算法程序集》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具