npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

myfork-react-native-actions-sheet

v0.2.3

Published

A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

Downloads

22

Readme

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
npm install react-native-actions-sheet --save

or if you use yarn:

yarn add react-native-actions-sheet
import ActionSheet from 'react-native-actions-sheet';

const App = () => {
  let actionSheet;

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

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

export default App;

Props

ref

Assigns a ref to ActionSheet component to use methods.

| Type | Required | | ---- | -------- | | ref | Yes |

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

openAnimationSpeed

Speed of opening animation. Higher means the ActionSheet will open more quickly.

| Type | Required | | ---- | -------- | | number | no |

Default: 12

closeAnimationDuration

Duration of closing animation.

| Type | Required | | ---- | -------- | | number | no |

Default: 300

gestureEnabled

Enables gesture control of ActionSheet

| Type | Required | | ---- | -------- | | boolean | no |

Default: false

closeOnTouchBackdrop

Control closing ActionSheet by touching on backdrop.

| Type | Required | | ---- | -------- | | boolean | no |

Default: true

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();

Event Listeners

Listen to changes in ActionSheet State.

addHasReachedTopListener

Attach a listener to know when ActionSheet is fully opened and has reached top. Use this if you want to use a ScrollView inside the ActionSheet. Check the example for demonstration on how to use nested ScrollViews inside ActionSheet.

import ActionSheet, {addHasReachedTopListener, removeHasReachedTopListener} from 'react-native-actions-sheet


// In your Component

  const _onHasReachedTop = () => {
    // handle the event
  }

  useEffect(() => {
    addHasReachedTopListener(_onHasReachedTop)
    return () => {
        removeHasReachedTopListener(_onHasReachedTop)
    }
  },[])

Find this library useful? ❤️

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

MIT Licensed