All Projects β†’ enesozturk β†’ Rn Swipeable Panel

enesozturk / Rn Swipeable Panel

Licence: mit
Zero dependency swipeable bottom panel for React Native πŸ“±

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Rn Swipeable Panel

moonlight-admin
Easy to use admin panel, designed for cheat loaders.
Stars: ✭ 29 (-93.01%)
Mutual labels:  panel
tint3
A C++ rewrite of the tint2 panel
Stars: ✭ 39 (-90.6%)
Mutual labels:  panel
Ubottomsheet
iPhone Maps App bottom sheet - A Protocol Oriented Approach
Stars: ✭ 259 (-37.59%)
Mutual labels:  bottom-sheet
rc-dock
Dock Layout for React Component
Stars: ✭ 318 (-23.37%)
Mutual labels:  panel
vue-smart-widget
πŸ—ƒοΈSmart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.
Stars: ✭ 110 (-73.49%)
Mutual labels:  panel
homebridge-konnected
A Homebridge plugin for Konnected Alarm Panel devices
Stars: ✭ 25 (-93.98%)
Mutual labels:  panel
remove-gutenberg-panel
Removes the Try Gutenberg panel from the WP-Admin Dashboard, introduced in WordPress 4.9.5 Beta 1. We only want to try Gutenberg once it's ready. Not now.
Stars: ✭ 16 (-96.14%)
Mutual labels:  panel
Linearmodels
Add linear models including instrumental variable and panel data models that are missing from statsmodels.
Stars: ✭ 406 (-2.17%)
Mutual labels:  panel
ha-floorplan
Bring new life to Home Assistant. By mapping entities to a SVG-object, you're able to control devices, show states, calling services - and much more. Add custom styling on top, to visualize whatever you can think of. Your imagination just become the new limit.
Stars: ✭ 415 (+0%)
Mutual labels:  panel
jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (-78.55%)
Mutual labels:  panel
jaulp-wicket
This project is a collection of Apache Wicket components and utilities.
Stars: ✭ 14 (-96.63%)
Mutual labels:  panel
Cartkit
Cartkit - The [quick] starter kit!
Stars: ✭ 39 (-90.6%)
Mutual labels:  panel
NBBottomSheet
An iOS library that presents a bottom sheet using Auto Layout.
Stars: ✭ 60 (-85.54%)
Mutual labels:  bottom-sheet
sliding panel
A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!
Stars: ✭ 88 (-78.8%)
Mutual labels:  panel
Mqtt Panel
A web interface for MQTT
Stars: ✭ 315 (-24.1%)
Mutual labels:  panel
react-native-panel
A Customizable React Native Panel for Android and iOS
Stars: ✭ 35 (-91.57%)
Mutual labels:  panel
mangium
(Needs contributors) Service/project manager for developers/small teams
Stars: ✭ 12 (-97.11%)
Mutual labels:  panel
React Native Actions Sheet
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
Stars: ✭ 412 (-0.72%)
Mutual labels:  bottom-sheet
Toolbarpanel
Toolbar that can be slided down to show a panel
Stars: ✭ 397 (-4.34%)
Mutual labels:  panel
panel
Panel for your CS:GO cheat.
Stars: ✭ 25 (-93.98%)
Mutual labels:  panel

React Native Swipeable Panel

rn-swipeable-panel is a swipeable, easy to use bottom panel for your React Native projects. You can extend panel by swiping up, make it small or close by swiping down with pan gestures. Feel free to redesign inside of the panel.

npm version



βš™οΈ Installation

To install the package;

$ yarn add rn-swipeable-panel

βœ… It is done!

πŸš€ How to use

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { SwipeablePanel } from 'rn-swipeable-panel';

export default App = () => {
  const [panelProps, setPanelProps] = useState({
    fullWidth: true,
    openLarge: true,
    showCloseButton: true,
    onClose: () => closePanel(),
    onPressCloseButton: () => closePanel(),
    // ...or any prop you want
  });
  const [isPanelActive, setIsPanelActive] = useState(false);

  const openPanel = () => {
    setIsPanelActive(true);
  };

  const closePanel = () => {
    setIsPanelActive(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to React Native!</Text>
      <Text style={styles.instructions}>To get started, edit App.js</Text>
      <SwipeablePanel {...panelProps} isActive={isPanelActive}>
        <PanelContent /> {/* Your Content Here */}
      </SwipeablePanel>
    </View>
  );
};

☝️ Options


Properties Type Description Default
isActive bool Show/Hide the panel false
onClose Function Fired when the panel is closed
showCloseButton bool Set true if you want to show close button
fullWidth bool Set true if you want to make full with panel false
openLarge bool Set true if you want to open panel large by default false
onlyLarge bool Set true if you want to let panel open just large mode false
onlySmall bool Set true if you want to let panel open just small mode false
noBackgroundOpacity bool Set true if you want to disable black background opacity false
style Object Use this prop to override panel style {}
closeRootStyle Object Use this prop to override close button background style {}
closeIconStyle Object Use this prop to override close button icon style {}
barStyle Object Use this prop to override bar style {}
closeOnTouchOutside bool Set true if you want to close panel by touching outside false
allowTouchOutside bool Set true if you want to make toucable outside of panel false
noBar bool Set true if you want to remove gray bar false
scrollViewProps Object Use this prop to override scroll view that inside the panel {}

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

πŸ‘ Contributing

If you have any questions or requests or want to contribute to rn-swipeable-panel, please write the issue or give me a Pull Request freely.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].