Skip to content
This repository has been archived by the owner on Jan 5, 2022. It is now read-only.

Add setSafeBounceHeight() #67

Merged
merged 2 commits into from
Feb 3, 2019
Merged

Add setSafeBounceHeight() #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
016c84d
add getSafeBounceHeight option
benevbright Feb 3, 2019
51898c5
update README
benevbright Feb 3, 2019
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
22 changes: 10 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,21 +93,19 @@ and [example/src/TabChild1Screen.js](https://github.com/benevbright/react-naviga
#### HoC and config method

```
function withCollapsible (WrappedScreen, collapsibleParams = {})
function withCollapsibleForTab (MaterialTapNavigator, collapsibleParams = {})
function withCollapsibleForTabChild (WrappedScreen)

type collapsibleParams = {
// for Deault collapsible header (iOS only)
iOSCollapsedColor?: string,
type CollapsibleParams = {
iOSCollapsedColor: string, // iOS only
} | {
// for Extra collapsible header
collapsibleComponent?: React.Component,
collapsibleBackgroundStyle?: React.Style,
collapsibleComponent: React.Component,
collapsibleBackgroundStyle: React.Style,
}

// expo only
function setExpoStatusBarHeight (height)
function withCollapsible (WrappedScreen, collapsibleParams: CollapsibleParams = {})
function withCollapsibleForTab (MaterialTapNavigator, collapsibleParams: CollapsibleParams = {})
function withCollapsibleForTabChild (WrappedScreen)

function setExpoStatusBarHeight (height) // expo only
function setSafeBounceHeight (height)
```

#### Given `props`
Expand Down
3 changes: 3 additions & 0 deletions example/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import S2_DefaultHeaderForTab from './S2_DefaultHeaderForTab';
import S3_ExtraHeaderForTab from './S3_ExtraHeaderForTab';
import ContextScreen from './ContextScreen';

// import { setSafeBounceHeight } from 'react-navigation-collapsible';
// setSafeBounceHeight(0);

/* Support Expo */
// import { setExpoStatusBarHeight } from 'react-navigation-collapsible';
// import { Constants } from 'expo';
Expand Down
15 changes: 9 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ export const IS_IPHONE_X =


const defaultHeaderHeight = Platform.select({ios: 44, android: 56, web: 50});
const safeBounceHeight = Platform.select({ios: 300, android: 100, web: 200});
let _safeBounceHeight;
const getSafeBounceHeight = () => _safeBounceHeight != null ? _safeBounceHeight : Platform.select({ios: 300, android: 100, web: 200});
export const setSafeBounceHeight = (height) => { _safeBounceHeight = height };


const getStatusBarHeight = (isLandscape) => {
if (Platform.OS === 'ios') {
Expand All @@ -47,21 +50,21 @@ const getNavigationHeight = (isLandscape, headerHeight) => {

const getTranslateY = (animatedDiffClampY, headerHeight, offset = 0) => (
animatedDiffClampY && headerHeight && animatedDiffClampY.interpolate({
inputRange: [safeBounceHeight, safeBounceHeight + headerHeight],
inputRange: [getSafeBounceHeight(), getSafeBounceHeight() + headerHeight],
outputRange: [offset, offset - headerHeight],
extrapolate: 'clamp'
})
) || 0;
const getTranslateProgress = (animatedDiffClampY, headerHeight) => (
animatedDiffClampY && headerHeight && animatedDiffClampY.interpolate({
inputRange: [safeBounceHeight, safeBounceHeight + headerHeight],
inputRange: [getSafeBounceHeight(), getSafeBounceHeight() + headerHeight],
outputRange: [0, 1],
extrapolate: 'clamp'
})
) || 0;
const getOpacity = (animatedDiffClampY, headerHeight) => (
animatedDiffClampY && headerHeight && animatedDiffClampY.interpolate({
inputRange: [safeBounceHeight, safeBounceHeight + headerHeight],
inputRange: [getSafeBounceHeight(), getSafeBounceHeight() + headerHeight],
outputRange: [1, 0],
extrapolate: 'clamp'
})
Expand Down Expand Up @@ -167,7 +170,7 @@ const collapsibleNavigationOptions = (configOptions, userOptions, navigation) =>
? userOptions.headerStyle.height
: defaultHeaderHeight;
if(navigationParams.headerHeight !== headerHeight){
const animatedDiffClampY = Animated.diffClamp(navigationParams.animatedYSum, 0, safeBounceHeight + headerHeight);
const animatedDiffClampY = Animated.diffClamp(navigationParams.animatedYSum, 0, getSafeBounceHeight() + headerHeight);
navigation.setParams({
headerHeight,
animatedDiffClampY,
Expand Down Expand Up @@ -221,7 +224,7 @@ export const withCollapsible = (WrappedScreen, collapsibleParams = {}, tabNaviga
break;
case CollapsibleType.extraHeader: {
const headerHeight = collapsibleParams.collapsibleBackgroundStyle && collapsibleParams.collapsibleBackgroundStyle.height || 0;
const animatedDiffClampY = Animated.diffClamp(this.animatedYSum, 0, safeBounceHeight + headerHeight);
const animatedDiffClampY = Animated.diffClamp(this.animatedYSum, 0, getSafeBounceHeight() + headerHeight);
this.props.navigation.setParams({
animatedDiffClampY,
collapsibleTranslateY: getTranslateY(animatedDiffClampY, headerHeight, headerHeight),
Expand Down