{"id":4107,"url":"https://github.com/melihberberolu/react-native-scaling-drawer","last_synced_at":"2025-08-04T00:31:30.463Z","repository":{"id":50575294,"uuid":"81874245","full_name":"melihberberolu/react-native-scaling-drawer","owner":"melihberberolu","description":"React Native Scaling Drawer","archived":false,"fork":false,"pushed_at":"2023-04-18T05:16:31.000Z","size":1091,"stargazers_count":238,"open_issues_count":20,"forks_count":62,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-07-19T02:13:37.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melihberberolu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-13T21:34:13.000Z","updated_at":"2024-04-02T17:40:49.000Z","dependencies_parsed_at":"2024-01-08T01:01:37.929Z","dependency_job_id":"310ddacd-f33f-467a-9ad1-38f4d7945001","html_url":"https://github.com/melihberberolu/react-native-scaling-drawer","commit_stats":{"total_commits":24,"total_committers":11,"mean_commits":"2.1818181818181817","dds":0.6666666666666667,"last_synced_commit":"d8c0a77491ff8fc72953db9f44d8fafede36c928"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/melihberberolu/react-native-scaling-drawer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihberberolu%2Freact-native-scaling-drawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihberberolu%2Freact-native-scaling-drawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihberberolu%2Freact-native-scaling-drawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihberberolu%2Freact-native-scaling-drawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melihberberolu","download_url":"https://codeload.github.com/melihberberolu/react-native-scaling-drawer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melihberberolu%2Freact-native-scaling-drawer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268633601,"owners_count":24281817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:01.263Z","updated_at":"2025-08-04T00:31:30.152Z","avatar_url":"https://github.com/melihberberolu.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI","Drawer"],"readme":"# react-native-scaling-drawer\nReact Native SwipeAble Scaling Drawer\n\n## Installation\n`npm i react-native-scaling-drawer --save`\n\n![Demo](https://cloud.githubusercontent.com/assets/3721734/23039111/278b754c-f495-11e6-8f59-6a3bd08e11cf.gif)\n![Demo](https://cloud.githubusercontent.com/assets/3721734/22906232/4c98dd34-f24c-11e6-931e-66a8c020e35d.gif)\n\n## API\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| ``scalingFactor`` | ``number`` | `0.6` | Maximum scaling size (in percantage) of your Front View's scale. Set value higher than `0.1` lower than `1` |\n| ``minimizeFactor`` | ``number`` | ``0.7`` | Maximum push offset (in percentage) of your Front View's position relative to left edge of screen. A value of `0.5` means middle of screen if scaling value is  |\n| ``content`` | ``element`` | - | Drawer content menu(Left Menu) |\n| ``swipeOffset`` | ``number`` | ``10`` | Minimum offset for your Front View to trigger Drawer's Swipe action |\n| ``contentWrapperStyle`` | ``object`` | - | Drawer Menu Wrapper custom style |\n| ``frontStyle`` | ``object`` | - | Front View custom style |\n| ``onOpen`` | ``function`` | - | If u open drawer trigger onOpen function |\n| ``onClose`` | ``function`` | - | If u close drawer trigger onClose function |\n\n## NOTE\nIf you want to disable drawer swipe, you can access blockSwipeAbleDrawer method and send true. (Default value false, you can swipe drawer any screen). You can check my example for block.\n\n## Example With React Navigation\n\n```jsx\n\nimport React, {Component} from 'react';\nimport {View, StatusBar, TouchableOpacity, Text} from 'react-native';\nimport ScalingDrawer from 'react-native-scaling-drawer';\nimport Home from './container/Home';\nimport Profile from './container/Profile';\nimport Wins from './container/Wins';\nimport Detail from './container/Detail';\nimport LeftMenu from './component/LeftMenu';\nimport {\n  createNavigator,\n  createNavigationContainer,\n  StackRouter,\n  addNavigationHelpers,\n} from 'react-navigation';\n\nlet defaultScalingDrawerConfig = {\n  scalingFactor: 0.6,\n  minimizeFactor: 0.6,\n  swipeOffset: 20\n};\n\nclass CustomDrawerView extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  componentWillReceiveProps(nextProps) {\n    /** Active Drawer Swipe **/\n    if (nextProps.navigation.state.index === 0)\n      this._drawer.blockSwipeAbleDrawer(false);\n\n    if (nextProps.navigation.state.index === 0 \u0026\u0026 this.props.navigation.state.index === 0) {\n      this._drawer.blockSwipeAbleDrawer(false);\n      this._drawer.close();\n    }\n\n    /** Block Drawer Swipe **/\n    if (nextProps.navigation.state.index \u003e 0) {\n      this._drawer.blockSwipeAbleDrawer(true);\n    }\n  }\n\n  setDynamicDrawerValue = (type, value) =\u003e {\n    defaultScalingDrawerConfig[type] = value;\n    /** forceUpdate show drawer dynamic scaling example **/\n    this.forceUpdate();\n  };\n\n  render() {\n    const {routes, index} = this.props.navigation.state;\n    const ActiveScreen = this.props.router.getComponentForState(this.props.navigation.state);\n\n    return (\n      \u003cScalingDrawer\n        ref={ref =\u003e this._drawer = ref}\n        content={\u003cLeftMenu navigation={this.props.navigation}/\u003e}\n        {...defaultScalingDrawerConfig}\n        onClose={() =\u003e console.log('close')}\n        onOpen={() =\u003e console.log('open')}\n      \u003e\n        \u003cActiveScreen\n          navigation={addNavigationHelpers({\n            ...this.props.navigation,\n            state: routes[index],\n            openDrawer: () =\u003e this._drawer.open(),\n          })}\n          dynamicDrawerValue={ (type, val) =\u003e this.setDynamicDrawerValue(type, val) }\n        /\u003e\n      \u003c/ScalingDrawer\u003e\n    )\n  }\n}\n\nconst AppNavigator = StackRouter({\n  Home: {screen: Home},\n  Profile: {screen: Profile},\n  Wins: {screen: Wins},\n  Detail: {\n    screen: Detail,\n    path: 'detail'\n  }\n}, {\n  initialRouteName: 'Home',\n});\n\nconst CustomDrawer = createNavigationContainer(createNavigator(AppNavigator)(CustomDrawerView));\n\nexport default CustomDrawer;\n\n```\n\n## TODO\n- Add Perspective Animation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelihberberolu%2Freact-native-scaling-drawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelihberberolu%2Freact-native-scaling-drawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelihberberolu%2Freact-native-scaling-drawer/lists"}