Skip to content

Commit

Permalink
"keyboardHeightAdjustment" added
Browse files Browse the repository at this point in the history
  • Loading branch information
@sekizlipenguen
sekizlipenguen committed Jul 22, 2022
1 parent f3bf07f commit acc5d01
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 95 deletions.
41 changes: 21 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
<!-- [![github release](https://img.shields.io/github/release/sekizlipenguen/react-native-popup-confirm-toast.svg?style=flat-square)](https://github.com/sekizlipenguen/react-native-popup-confirm-toast/releases) -->
[![github issues](https://img.shields.io/github/issues/sekizlipenguen/react-native-popup-confirm-toast.svg?style=flat-square)](https://github.com/sekizlipenguen/react-native-popup-confirm-toast/issues)
[![github closed issues](https://img.shields.io/github/issues-closed/sekizlipenguen/react-native-popup-confirm-toast.svg?style=flat-square&colorB=44cc11)](https://github.com/sekizlipenguen/react-native-popup-confirm-toast/issues?q=is%3Aissue+is%3Aclosed)
### Release notes(2.1.2) 🐧 🐐
### Release notes 🐧

- bugfix(deprecated-react-native-prop-types)
- "keyboardHeightAdjustment" added

## Example Bottom Sheet

| Custom Example 1 | Custom Example 2 | Custom Example 3 |
|:----------------------:|:----------------------:|:----------------------:|
| ![](assets/popup6.gif) | ![](assets/popup5.gif) | ![](assets/popup7.gif) |
| Custom Example 1 | Custom Example 2 | Custom Example 3 | Custom Example 4 |
|:----------------------:|:----------------------:|:----------------------:|:----------------------:|
| ![](assets/popup6.gif) | ![](assets/popup5.gif) | ![](assets/popup7.gif) | ![](assets/popup8.gif) |

## Example Popup Message

Expand Down Expand Up @@ -196,21 +196,22 @@ import { Root, Toast } from 'react-native-popup-confirm-toast'

### SPSheet

| Key | Type | Description | Default |
|--------------------|--------------------------|-----------------------------------------------------------------|--------------------|
| `background` | string | | rgba(0, 0, 0, 0.5) |
| `height` | number | auto height (min: 250) | 250 |
| `duration` | number | animation time used when opening | 250(ms) |
| `closeDuration` | number | animation time used when closing | 300(ms) |
| `closeOnDragDown` | boolean | Use drag with motion to close the window | true |
| `closeOnPressMask` | boolean | press the outside space to close the window | true |
| `closeOnPressBack` | boolean | Press the back key to close the window (Android only) | true |
| `dragTopOnly` | boolean | use only the top area of the draggable icon to close the window | false |
| `component` | component(hook or class) | custom modal component container | null |
| `onOpenComplete` | function | works after the window is opened | null |
| `onCloseComplete` | function | works after window is closed | null |
| `customStyles` | object | customStyles: { draggableIcon: {}, container: {}} | {} |
| `timing` | number | Use this parameter for automatic shutdown. | 0(ms) |
| Key | Type | Description | Default |
|----------------------------|--------------------------|-----------------------------------------------------------------|--------------------|
| `background` | string | | rgba(0, 0, 0, 0.5) |
| `height` | number | auto height (min: 250) | 250 |
| `duration` | number | animation time used when opening | 250(ms) |
| `closeDuration` | number | animation time used when closing | 300(ms) |
| `closeOnDragDown` | boolean | Use drag with motion to close the window | true |
| `closeOnPressMask` | boolean | press the outside space to close the window | true |
| `closeOnPressBack` | boolean | Press the back key to close the window (Android only) | true |
| `dragTopOnly` | boolean | use only the top area of the draggable icon to close the window | false |
| `component` | component(hook or class) | custom modal component container | null |
| `onOpenComplete` | function | works after the window is opened | null |
| `onCloseComplete` | function | works after window is closed | null |
| `customStyles` | object | customStyles: { draggableIcon: {}, container: {}} | {} |
| `timing` | number | Use this parameter for automatic shutdown. | 0(ms) |
| `keyboardHeightAdjustment` | boolean | sdfsdf | false |

### Popup

Expand Down
Binary file added assets/popup8.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-popup-confirm-toast",
"version": "2.1.2",
"version": "2.1.3",
"description": "",
"main": "index.js",
"types": "index.d.ts",
Expand Down
180 changes: 106 additions & 74 deletions src/main/SPSheet.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, {Component} from 'react';
import {Animated, BackHandler, Dimensions, Easing, PanResponder, Platform, StatusBar, StyleSheet, TouchableOpacity, View} from 'react-native';
import React, { Component } from 'react'
import { Animated, BackHandler, Dimensions, Easing, Keyboard, PanResponder, Platform, StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native'

const HEIGHT = Platform.OS === 'android' ? Dimensions.get('screen').height - StatusBar.currentHeight : Dimensions.get('window').height;
const WIDTH = Platform.OS === 'android' ? Dimensions.get('screen').width : Dimensions.get('window').width;
const HEIGHT = Platform.OS === 'android' ? Dimensions.get('screen').height - StatusBar.currentHeight : Dimensions.get('window').height
const WIDTH = Platform.OS === 'android' ? Dimensions.get('screen').width : Dimensions.get('window').width

const minPopupHeight = 250;
const minPopupHeight = 250

const defaultState = {
height: minPopupHeight,
Expand All @@ -28,17 +28,22 @@ const defaultState = {
open: false,
onCloseComplete: false,
onOpenComplete: false,
marginBottom: new Animated.Value(0),
};

class SPSheet extends Component {

static spsheetInstance;

constructor(props) {
super(props);
constructor(props)
{
super(props)

this.state = defaultState;
this.createPanResponder();
this.state = defaultState
this.createPanResponder()

this.keyboardDidShow = this.keyboardDidShow.bind(this)
this.keyboardDidHide = this.keyboardDidHide.bind(this)
}

static show({...config}) {
Expand All @@ -49,19 +54,42 @@ class SPSheet extends Component {
this.spsheetInstance.hidePopup();
}

componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', () => this.handleBackButton());
componentDidMount ()
{
BackHandler.addEventListener('hardwareBackPress', () => this.handleBackButton())
this.keyboardDidShowSubscription = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow)
this.keyboardDidHideSubscription = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide)
}

componentWillUnmount ()
{
BackHandler.removeEventListener('hardwareBackPress', () => this.handleBackButton())
this.keyboardDidShowSubscription.remove()
this.keyboardDidHideSubscription.remove()

}

keyboardDidShow (e)
{
let newSize = e.endCoordinates.height
this.setState({
marginBottom: new Animated.Value(newSize),
})
}

componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', () => this.handleBackButton());
keyboardDidHide (e)
{
this.setState({
marginBottom: new Animated.Value(0),
})
}

handleBackButton() {
let {open, closeOnPressBack} = this.state;
handleBackButton ()
{
let { open, closeOnPressBack } = this.state
if (open && closeOnPressBack) {
this.hidePopup();
return true;
this.hidePopup()
return true
}
}

Expand Down Expand Up @@ -165,78 +193,82 @@ class SPSheet extends Component {
render() {

const {
open, closeOnDragDown, dragTopOnly, closeOnPressMask, component, customStyles, pan, height, start, background, opacity, positionView, positionPopup,
open, closeOnDragDown, dragTopOnly, closeOnPressMask, component, customStyles, pan, height, start, background, opacity, positionView, positionPopup, marginBottom,
} = this.state;

if (!open) {
return null;
return null
}

const BodyComponentElement = component ? component : false;
const panResponder = this.panResponder;
const BodyComponentElement = component ? component : false
const panResponder = this.panResponder

console.log('marginBottom', marginBottom)

return (
<Animated.View
ref={c => this._root = c}
style={[styles.modalContainer, {
<Animated.View
ref={c => this._root = c}
style={[
styles.modalContainer, {
backgroundColor: background || 'transparent',
opacity: opacity,
transform: [
{
translateY: positionView,
},
],
}]}>

<Animated.View
style={[{height: positionPopup}]}
>
<TouchableOpacity
style={[
styles.mask,
]}
activeOpacity={1}
onPress={() => (closeOnPressMask ? this.hidePopup() : null)}
/>
</Animated.View>

<View
onLayout={event => {
if (start) {
const height = event.nativeEvent.layout.height;
this.setState({height: height < minPopupHeight ? minPopupHeight : height}, () => {
this.startPopup();
});
}
}}
>
<Animated.View
{...(!dragTopOnly && panResponder?.panHandlers)}
style={[
styles.container,
{
height: height,
transform: [{translateX: pan.x}, {translateY: pan.y}],
},
customStyles.container,
]}
>
{
closeOnDragDown && (
<View {...(dragTopOnly && panResponder?.panHandlers)} style={styles.draggableContainer}>
<View style={[styles.draggableIcon, customStyles.draggableIcon]}/>
</View>
)
}
{
BodyComponentElement ? (
<BodyComponentElement {...this.props} />
) : null
}
</Animated.View>
</View>
</Animated.View>
},
]}>

<Animated.View
style={[{ height: positionPopup }]}
>
<TouchableOpacity
style={[
styles.mask,
]}
activeOpacity={1}
onPress={() => (closeOnPressMask ? this.hidePopup() : null)}
/>
</Animated.View>

<View
onLayout={event => {
if (start) {
const height = event.nativeEvent.layout.height
this.setState({ height: height < minPopupHeight ? minPopupHeight : height }, () => {
this.startPopup()
})
}
}}
>
<Animated.View
{...(!dragTopOnly && panResponder?.panHandlers)}
style={[
styles.container,
{
height: height,
transform: [{ translateX: pan.x }, { translateY: pan.y }],
bottom: marginBottom,
},
customStyles.container,
]}
>
{
closeOnDragDown && (
<View {...(dragTopOnly && panResponder?.panHandlers)} style={styles.draggableContainer}>
<View style={[styles.draggableIcon, customStyles.draggableIcon]}/>
</View>
)
}
{
BodyComponentElement ? (
<BodyComponentElement {...this.props} />
) : null
}
</Animated.View>
</View>
</Animated.View>

);
}
Expand Down

0 comments on commit acc5d01

Please sign in to comment.