Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add stickyHeader component, update readme #115

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add stickyHeader component, update readme #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 22 additions & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
To install the package;

```
$ yarn add rn-swipeable-panel
yarn add rn-swipeable-panel
```

✅ It is done!
Expand Down Expand Up @@ -71,26 +71,27 @@ export default App = () => {

<br/>

| 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 | `{}` |
| **smallPanelHeight** | `Object` | Use this prop to override the small panel default height | |
| **barContainerStyle** | `Object` | Use this prop to override bar container 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 | `{}` |
| 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 | `{}` |
| **smallPanelHeight** | `Object` | Use this prop to override the small panel default height | |
| **barContainerStyle** | `Object` | Use this prop to override bar container 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 | `{}` |
| **stickyHeader** | `JSXElement` | Use this prop to override scroll view that inside the panel | |

#### ⭐️ Show Your Support

Expand Down
5 changes: 4 additions & 1 deletion src/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,10 @@ type SwipeablePanelProps = {
smallPanelHeight?: number;
noBar?: boolean;
barStyle?: object;
barContainerStyle?: object,
barContainerStyle?: object;
allowTouchOutside?: boolean;
scrollViewProps?: ScrollViewProps;
stickyHeader?: () => React.ReactNode;
};

type MaybeAnimated<T> = T | Animated.Value;
Expand Down Expand Up @@ -255,6 +256,8 @@ class SwipeablePanel extends Component<SwipeablePanelProps, SwipeablePanelState>
{this.props.showCloseButton && (
<Close rootStyle={closeRootStyle} iconStyle={closeIconStyle} onPress={this.props.onClose} />
)}
{this.props.stickyHeader && this.props.stickyHeader()}

<ScrollView
onTouchStart={() => {
return false;
Expand Down
5 changes: 5 additions & 0 deletions src/typings.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ declare interface SwipeablePanelProps extends React.Props<SwipeablePanel> {
* You can pass your scroll view props
*/
scrollViewProps?: ScrollViewProps;

/**
* You can pass your sticky header component
*/
stickyHeader?: () => React.ReactNode;
}

declare var LARGE_PANEL_CONTENT_HEIGHT: number;
Expand Down