{"_id":"@amrshadid/awesome-rn-bottom-sheet","name":"@amrshadid/awesome-rn-bottom-sheet","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@amrshadid/awesome-rn-bottom-sheet","version":"1.0.3","description":"React Native bottom sheet component for iOS + Android","source":"src/index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/amrshadid/awesome-rn-bottom-sheet.git"},"keywords":["react","react-native","react-component","bootm-sheet","bottomsheet","reanimated","sheet"],"author":{"name":"Amr Shadid","email":"amr.shadid@icloud.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.18.6","@types/react":"^18.0.15","@types/react-native":"^0.69.3","react":"^18.2.0","react-dom":"^18.2.0","react-native":"^0.69.1","typescript":"^4.7.4"},"peerDependencies":{"react-native-gesture-handler":"^2.5.0","react-native-reanimated":"^2.9.1","react-native-responsive-screen":"^1.4.2"},"gitHead":"3961cc0303c7b4cae5b90041344cd5f154dd7e4f","bugs":{"url":"https://github.com/amrshadid/awesome-rn-bottom-sheet/issues"},"homepage":"https://github.com/amrshadid/awesome-rn-bottom-sheet#readme","_id":"@amrshadid/awesome-rn-bottom-sheet@1.0.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-3/LPJUsyeF4us52dJ1YtiXaKnsDsPTR8gPk0Q0ZyUqDcSD+/wrYxCdRJInUNQMGIxJ8OG9yOFTl8Jsww/Fh+PA==","shasum":"c7ded1df11be16d65203639a5e00331ca2a8a334","tarball":"https://registry.npmjs.org/@amrshadid/awesome-rn-bottom-sheet/-/awesome-rn-bottom-sheet-1.0.3.tgz","fileCount":9,"unpackedSize":12748,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUgwwPQIKRVbWnBbM2dwMPstj9iDkN5xYp2ldSKU8x9wIgA44jgPSb+1VqG/1VujRgMLiuUo2EmIQGLOZ61oa05n4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2KLDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHLBAAgDLORB1Ex5/xRVSV+VsgPI8BmkXNougrCuvEXDh6F6bK3081\r\nNcnVCeW924JQw+1Ie3M5O/NyTIMDG1vgUNlu40+XmzQBBQDL6Q47ZzDGYL8X\r\n5k8PS8zDs4ymaNVejVHTNm4PbRPcwrlSdrDrPx6llXcbZqrvgjFPfRa0a4RM\r\nRUJZ5NJlFcmuy0eD32COzhQLfPY8rdIbcYm7frHOKI9Yyt0uUm/PmSxDVPsi\r\nZcGquoLqZuXEr5hofFqPVYQ4p5QemGL20kOCFkSbop9iN1JJUDkkjmG8Qj4I\r\nxsIDp1goK0Z9q0Ren89lHSmx8Y3OOhv5szeCBHzHshcKroK/cAU3d3SSJv50\r\n7gVmI/YEWK5YDfVXiXJ5u/poi1ElfycO48lY/tE7440XLMnF2S+S0DM5FFVo\r\nFfFCn2E465C1dT/80tqMHA6OVlBZ7zkLxPx49wYqf30npfgqNXbAVdLsui3t\r\npKGktl264dM0BJ9pkL+dxUmuGNFEiUL0sivJRfpPVA1Ii82rF76BD9alfY+G\r\nR+cnfAa9KIwz4QZvLMmCW3St740cHZMTqMvgPuFHrb2FD/njApI8sHgoeANX\r\nmB3Dha8TUR8BBzto2+NeIhANT3TEp56YJaBE2ff9T4pWctLwzAJIvy/mo+vl\r\nBih0BQWUZCrED6qvDd6mdC4uoBZ3hLJe0og=\r\n=4mnk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"amrshadid","email":"amr.shadid@icloud.com"},"directories":{},"maintainers":[{"name":"amrshadid","email":"amr.shadid@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/awesome-rn-bottom-sheet_1.0.3_1658364611218_0.49658177340886067"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-21T00:50:11.155Z","1.0.3":"2022-07-21T00:50:11.469Z","modified":"2022-07-21T00:50:11.600Z"},"maintainers":[{"name":"amrshadid","email":"amr.shadid@icloud.com"}],"description":"React Native bottom sheet component for iOS + Android","homepage":"https://github.com/amrshadid/awesome-rn-bottom-sheet#readme","keywords":["react","react-native","react-component","bootm-sheet","bottomsheet","reanimated","sheet"],"repository":{"type":"git","url":"git+https://github.com/amrshadid/awesome-rn-bottom-sheet.git"},"author":{"name":"Amr Shadid","email":"amr.shadid@icloud.com"},"bugs":{"url":"https://github.com/amrshadid/awesome-rn-bottom-sheet/issues"},"license":"MIT","readme":"# Awesome-rn-bottom-sheet\n\n<div align='center'>\n\t<img src=\"https://user-images.githubusercontent.com/32217515/180024549-ee3a0e7a-1fc7-41c9-a0c8-00ec6840e04d.gif\" width=\"200\" />\n\t<img src=\"https://user-images.githubusercontent.com/32217515/180023955-4ac36d12-3708-41a6-a9ff-7da9185893ce.gif\" width=\"200\" />\n</div>\n\n[\n![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)  [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)\n\n\n## Badges\n\nAdd badges from somewhere like: [shields.io](https://shields.io/)\n\n[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)\n[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)\n\n## Installation\n\nInstall my-project with npm\n\n```bash\n  npm install awesome-rn-bottom-sheet\n```\nor with yarn \n```bash\n yarn add awesome-rn-bottom-sheet\n```\n## Usage/Examples\n\n```javascript\nimport { StatusBar } from  'expo-status-bar';\nimport  React  from  'react';\nimport { StyleSheet, View, Text } from  'react-native';\nimport  Sheet  from  'awesome-rn-bottom-sheet'\n\n \nexport  default  function  Example(){\n\nreturn (\n<View  style={styles.container}>\n\t<StatusBar  style=\"light\"  />\n\t<Sheet\n\tinitState={25}\n\tmaxState={50}\n\tShowArrow >\n\t\t<Text style={{alignSelf:\"center\",fontSize:25}}>\n\t\t\tHello World!\n\t\t</Text>\n\t</Sheet>\n</View>\n);\n}\nconst  styles = StyleSheet.create({\n\tcontainer: {\n\t\tflex:  1,\n\t\tbackgroundColor:  '#111',\n\t\talignItems:  'center',\n\t\tjustifyContent:  'center',\n\t}\n});\n```\n```javascript\nimport { StatusBar } from  'expo-status-bar';\nimport  React, {useRef} from  'react';\nimport { StyleSheet, TouchableOpacity,View, Image} from  'react-native';\nimport  Sheet,{SheetRefProps} from  '../components/sheet'\n\nexport  default  function  SnapCode(){\n\nconst  ref = useRef<SheetRefProps>(null);\n\nconst  onPress =() => {\n\tconst  isActive = ref?.current?.isActive();\n\tif (isActive) {\n\t\tref?.current?.scrollTo(0,false);\n\t} else {\n\t\tref?.current?.scrollTo(40,true);\n\t}\n};\n\nreturn (\n\n<View  style={styles.container}>\n\n\t<StatusBar  style=\"light\"  />\n\t\n\t<TouchableOpacity  \n\tstyle={styles.button}  \n\tonPress={onPress}/>\n\n\t<Sheet\n\tref={ref}\n\tinitState={0}\n\tmaxState={40}\n\tShowArrow\n\tArrowStyle={{\n\tbackgroundColor:'black',\n\twidth:20\n\t}}\n\t>\n\t\t<View  style={styles.snapCodeContainer}>\n\t\t\t<Image\n\t\t\tstyle={styles.image}\n\t\t\tsource={require('../assets/code.png')}\n\t\t\t/>\n\t\t</View>\n\t</Sheet>\n</View>\n\n);\n}\n\nconst  styles = StyleSheet.create({\n\tcontainer: {\n\t\tflex:  1,\n\t\tbackgroundColor:  '#111',\n\t\talignItems:  'center',\n\t\tjustifyContent:  'center',\n\t},\n\tbutton: {\n\t\theight:  50,\n\t\tborderRadius:  25,\n\t\taspectRatio:  1,\n\t\tbackgroundColor:  'white',\n\t\topacity:  0.6,\n\t},\n\tsnapCodeContainer:{\n\t\talignSelf:\"center\",\n\t\twidth:'50%',\n\t\theight:'100%',\n\t\tborderRadius:20,\n\t\tmarginTop:10,\n\t\tshadowColor:  \"#000\",\n\t\tshadowOffset: {\n\t\twidth:  0,\n\t\theight:  3,\n\t\t},\n\t\tshadowOpacity:  0.27,\n\t\tshadowRadius:  4.65,\n\t\televation:  6,\n\t\toverflow:'hidden',\n\t},\n\timage: {\n\t\talignSelf:\"center\",\n\t\twidth:  180,\n\t\theight:  180,\n\t\tpadding:5,\n\t\tborderRadius:30,\n\t\tborderBottomLeftRadius:35,\n\t\tborderBottomRightRadius:35\n\t},\n});\n```\n## Props\n\n|Props| Type| mandatory|Description|default|\n|-|-|-|-|-|\n| initState | number| true |The value of initial height of sheet, the value must be between 0-100| none|\t\t\t\n| maxState | number| true | The value of max height of sheet, the value must be between 0-100|none|\n| contentContainerStyle | ViewStyle| false|StyleSheet| bottomSheetContainer|\n| ArrowStyle | ViewStyle| false | StyleSheet|ArrowStyle\n| ShowArrow | boolean| false | true: to show arrow or false to disable arrow |true\n\n\n## Methods\nTo used this methods you should use useRef hook and pass it to Sheet component \n```javascript\n...\n\tconst  ref = useRef<SheetRefProps>(null);\n\t<Sheet\n\tref={ref}\n\t...\n\t>\n    \n\t</sheet>\n...\n```\n**For more details take a look to second example**\n\n|Methods|Description|\n|-|-|\n| scrollTo | ScrollTo is void function used to scroll a sheet to a specific position. The first parameter is the destination a value of which must be between 0-100, and the second parameter the active is boolean. Example: **ScrollTo(50,true)** |\t\t\t\n| isActive | isActive function used to return a boolean value of sheet active or not Example: **ref?.current?.isActive()**|\n\n\n\n## 🔗 Author\n\nMade by [Amr shadid](https://github.com/amrshadid)\n\n[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://amrshadid.github.io) [![linkedin](https://img.shields.io/badge/github-000?style=for-the-badge&logo=github&logoColor=white)](https://www.linkedin.com/) \n","readmeFilename":"README.md"}