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