React-native-pullie NPM

`react-native-pullie`

(it's not slow, the gif has a low framerate)

🤔 What on earth is that?

This is a fully customizable pull-from-bottom <View />, useful for displaying extra information on the screen without having to worry too much about space.

📖 Installation

NOTE: REACT-NATIVE >= 0.59.0 REQUIRED. We're usingHooks()!

yarn add react-native-pullie

💡 Minimum usage Example

import React from 'react'
import { View, Text } from 'react-native'
import Pullie from 'react-native-pullie'

function MyView() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <React.Fragment>
      {/* my content... */}
      <Pullie
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        teaser={
          <View style={{ height: 70 }}>
            <Text>Drag me</Text>
          </View>
        }
        teaserHeight={70}
      >
        <View>
          <Text>Hey there!</Text>
        </View>
      </Pullie>
    </React.Fragment>
  )
}

As you can see, it's a controlled component: it only opens if you want to and you close it programmatically (using context, for example).

🛠 Props

Name	Description	Type	Required (default)
`isOpen`	If the `Pullie` is opened	`boolean`	Yes
`setIsOpen`	A `callback` fired when the view was opened	`function(bool)`	Yes
`children`	The content	`React.ReactNode`	Yes
`teaser`	The pullable content	`React.ReactNode`	Yes
`teaserHeight`	The height of the `teaser`	`number`	No (70)
`screenHeightPercentage`	The % of the screen that will be filled	`number`	No (70)
`backdropOpacity`	The opacity of the backdrop when opened	`number`	No (70)
`style`	The styles of the wrapper component	`ViewProps.style`	No

😳 Known issues / TODO

the backdrop suddenly disappears on click instead of fading out gracefully;
it's boring to specify a teaser height, maybe use the onLayout callback to measure it;
make an uncontrolled version.

👍 How to contribute

Have an idea? Found a bug? Please file an issue. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

✨ Credits

This library is basically react-native-bottom-drawer rewritten with the purpose of fitting my needs at toodo. Huge kudos to @rationalappdev.

📜 License

MIT

@infinitebrahmanuniverse/nolb-react-native-pu @everything-registry/sub-chunk-2588 @zalastax/nolb-react-native-pu

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago