react-native-screens 3.7.2 → 3.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -3
- package/android/build.gradle +8 -7
- package/android/src/main/java/com/swmansion/rnscreens/CustomSearchView.kt +71 -0
- package/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt +7 -0
- package/android/src/main/java/com/swmansion/rnscreens/FragmentBackPressOverrider.kt +29 -0
- package/android/src/main/java/com/swmansion/rnscreens/RNScreensPackage.kt +2 -1
- package/android/src/main/java/com/swmansion/rnscreens/Screen.kt +7 -41
- package/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt +55 -40
- package/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt +19 -1
- package/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt +30 -101
- package/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt +76 -14
- package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt +13 -4
- package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt +8 -0
- package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.kt +7 -1
- package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.kt +1 -0
- package/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt +90 -0
- package/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt +150 -0
- package/android/src/main/java/com/swmansion/rnscreens/SearchViewFormatter.kt +40 -0
- package/ios/RNSScreen.h +1 -0
- package/ios/RNSScreen.m +35 -0
- package/ios/RNSScreenContainer.h +2 -0
- package/ios/RNSScreenStack.m +24 -6
- package/ios/RNSScreenStackHeaderConfig.m +45 -2
- package/ios/RNSScreenWindowTraits.h +5 -0
- package/ios/RNSScreenWindowTraits.m +29 -0
- package/lib/commonjs/index.js +24 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.native.js +103 -17
- package/lib/commonjs/index.native.js.map +1 -1
- package/lib/commonjs/native-stack/utils/useBackPressSubscription.js +67 -0
- package/lib/commonjs/native-stack/utils/useBackPressSubscription.js.map +1 -0
- package/lib/commonjs/native-stack/views/HeaderConfig.js +46 -4
- package/lib/commonjs/native-stack/views/HeaderConfig.js.map +1 -1
- package/lib/commonjs/reanimated/ReanimatedNativeStackScreen.js +60 -0
- package/lib/commonjs/reanimated/ReanimatedNativeStackScreen.js.map +1 -0
- package/lib/commonjs/reanimated/ReanimatedScreen.js +7 -79
- package/lib/commonjs/reanimated/ReanimatedScreen.js.map +1 -1
- package/lib/commonjs/reanimated/ReanimatedScreenProvider.js +61 -0
- package/lib/commonjs/reanimated/ReanimatedScreenProvider.js.map +1 -0
- package/lib/commonjs/reanimated/index.js +2 -2
- package/lib/commonjs/reanimated/index.js.map +1 -1
- package/lib/commonjs/utils.js +20 -0
- package/lib/commonjs/utils.js.map +1 -0
- package/lib/module/index.js +5 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.native.js +99 -19
- package/lib/module/index.native.js.map +1 -1
- package/lib/module/native-stack/utils/useBackPressSubscription.js +50 -0
- package/lib/module/native-stack/utils/useBackPressSubscription.js.map +1 -0
- package/lib/module/native-stack/views/HeaderConfig.js +46 -5
- package/lib/module/native-stack/views/HeaderConfig.js.map +1 -1
- package/lib/module/reanimated/ReanimatedNativeStackScreen.js +40 -0
- package/lib/module/reanimated/ReanimatedNativeStackScreen.js.map +1 -0
- package/lib/module/reanimated/ReanimatedScreen.js +6 -73
- package/lib/module/reanimated/ReanimatedScreen.js.map +1 -1
- package/lib/module/reanimated/ReanimatedScreenProvider.js +49 -0
- package/lib/module/reanimated/ReanimatedScreenProvider.js.map +1 -0
- package/lib/module/reanimated/index.js +1 -1
- package/lib/module/reanimated/index.js.map +1 -1
- package/lib/module/utils.js +8 -0
- package/lib/module/utils.js.map +1 -0
- package/lib/typescript/index.d.ts +2 -0
- package/lib/typescript/native-stack/types.d.ts +0 -2
- package/lib/typescript/native-stack/utils/useBackPressSubscription.d.ts +16 -0
- package/lib/typescript/reanimated/ReanimatedNativeStackScreen.d.ts +5 -0
- package/lib/typescript/reanimated/ReanimatedScreen.d.ts +5 -2
- package/lib/typescript/reanimated/ReanimatedScreenProvider.d.ts +2 -0
- package/lib/typescript/reanimated/index.d.ts +1 -1
- package/lib/typescript/types.d.ts +46 -1
- package/lib/typescript/utils.d.ts +2 -0
- package/native-stack/README.md +35 -7
- package/package.json +5 -2
- package/src/index.native.tsx +138 -43
- package/src/index.tsx +10 -0
- package/src/native-stack/types.tsx +0 -2
- package/src/native-stack/utils/useBackPressSubscription.tsx +66 -0
- package/src/native-stack/views/HeaderConfig.tsx +46 -3
- package/src/reanimated/ReanimatedNativeStackScreen.tsx +61 -0
- package/src/reanimated/ReanimatedScreen.tsx +6 -84
- package/src/reanimated/ReanimatedScreenProvider.tsx +42 -0
- package/src/reanimated/index.tsx +1 -1
- package/src/types.tsx +46 -1
- package/src/utils.ts +12 -0
|
@@ -1,83 +1,16 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
|
|
5
3
|
import React from 'react';
|
|
6
|
-
import {
|
|
7
|
-
import { Screen, ScreenContext } from 'react-native-screens'; // @ts-ignore file to be used only if `react-native-reanimated` available in the project
|
|
4
|
+
import { Screen } from 'react-native-screens'; // @ts-ignore file to be used only if `react-native-reanimated` available in the project
|
|
8
5
|
|
|
9
|
-
import Animated
|
|
10
|
-
import ReanimatedTransitionProgressContext from './ReanimatedTransitionProgressContext';
|
|
6
|
+
import Animated from 'react-native-reanimated';
|
|
11
7
|
const AnimatedScreen = Animated.createAnimatedComponent(Screen);
|
|
12
|
-
|
|
13
|
-
class ReanimatedScreenWrapper extends React.Component {
|
|
14
|
-
constructor(...args) {
|
|
15
|
-
super(...args);
|
|
16
|
-
|
|
17
|
-
_defineProperty(this, "ref", null);
|
|
18
|
-
|
|
19
|
-
_defineProperty(this, "setRef", ref => {
|
|
20
|
-
var _this$props$onCompone, _this$props;
|
|
21
|
-
|
|
22
|
-
this.ref = ref;
|
|
23
|
-
(_this$props$onCompone = (_this$props = this.props).onComponentRef) === null || _this$props$onCompone === void 0 ? void 0 : _this$props$onCompone.call(_this$props, ref);
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
setNativeProps(props) {
|
|
28
|
-
var _this$ref;
|
|
29
|
-
|
|
30
|
-
(_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.setNativeProps(props);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
render() {
|
|
34
|
-
return /*#__PURE__*/React.createElement(ReanimatedScreen, _extends({}, this.props, {
|
|
35
|
-
// @ts-ignore some problems with ref
|
|
36
|
-
ref: this.setRef
|
|
37
|
-
}));
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
8
|
const ReanimatedScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
43
|
-
const {
|
|
44
|
-
children,
|
|
45
|
-
...rest
|
|
46
|
-
} = props;
|
|
47
|
-
const progress = useSharedValue(0);
|
|
48
|
-
const closing = useSharedValue(0);
|
|
49
|
-
const goingForward = useSharedValue(0);
|
|
50
9
|
return /*#__PURE__*/React.createElement(AnimatedScreen // @ts-ignore some problems with ref and onTransitionProgressReanimated being "fake" prop for parsing of `useEvent` return value
|
|
51
10
|
, _extends({
|
|
52
|
-
ref: ref
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
'worklet';
|
|
56
|
-
|
|
57
|
-
progress.value = event.progress;
|
|
58
|
-
closing.value = event.closing;
|
|
59
|
-
goingForward.value = event.goingForward;
|
|
60
|
-
}, [// This should not be necessary, but is not properly managed by `react-native-reanimated`
|
|
61
|
-
// @ts-ignore wrong type
|
|
62
|
-
Platform.OS === 'android' ? 'onTransitionProgress' : 'topTransitionProgress'])
|
|
63
|
-
}, rest), !props.isNativeStack ? // see comment of this prop in types.tsx for information why it is needed
|
|
64
|
-
children : /*#__PURE__*/React.createElement(ReanimatedTransitionProgressContext.Provider, {
|
|
65
|
-
value: {
|
|
66
|
-
progress: progress,
|
|
67
|
-
closing: closing,
|
|
68
|
-
goingForward: goingForward
|
|
69
|
-
}
|
|
70
|
-
}, children));
|
|
71
|
-
}); // used to silence error "Component definition is missing display name"
|
|
72
|
-
|
|
11
|
+
ref: ref
|
|
12
|
+
}, props));
|
|
13
|
+
});
|
|
73
14
|
ReanimatedScreen.displayName = 'ReanimatedScreen';
|
|
74
|
-
export default
|
|
75
|
-
return (
|
|
76
|
-
/*#__PURE__*/
|
|
77
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
78
|
-
React.createElement(ScreenContext.Provider, {
|
|
79
|
-
value: ReanimatedScreenWrapper
|
|
80
|
-
}, props.children)
|
|
81
|
-
);
|
|
82
|
-
}
|
|
15
|
+
export default ReanimatedScreen;
|
|
83
16
|
//# sourceMappingURL=ReanimatedScreen.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReanimatedScreen.tsx"],"names":["React","
|
|
1
|
+
{"version":3,"sources":["ReanimatedScreen.tsx"],"names":["React","Screen","Animated","AnimatedScreen","createAnimatedComponent","ReanimatedScreen","forwardRef","props","ref","displayName"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAoC,sBAApC,C,CAEA;;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAEA,MAAMC,cAAc,GAAGD,QAAQ,CAACE,uBAAT,CACpBH,MADoB,CAAvB;AAIA,MAAMI,gBAAgB,gBAAGL,KAAK,CAACM,UAAN,CACvB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,sBACE,oBAAC,cAAD,CACE;AADF;AAEE,IAAA,GAAG,EAAEA;AAFP,KAGMD,KAHN,EADF;AAOD,CATsB,CAAzB;AAYAF,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;AAEA,eAAeJ,gBAAf","sourcesContent":["import React from 'react';\nimport { Screen, ScreenProps } from 'react-native-screens';\n\n// @ts-ignore file to be used only if `react-native-reanimated` available in the project\nimport Animated from 'react-native-reanimated';\n\nconst AnimatedScreen = Animated.createAnimatedComponent(\n (Screen as unknown) as React.ComponentClass\n);\n\nconst ReanimatedScreen = React.forwardRef<typeof AnimatedScreen, ScreenProps>(\n (props, ref) => {\n return (\n <AnimatedScreen\n // @ts-ignore some problems with ref and onTransitionProgressReanimated being \"fake\" prop for parsing of `useEvent` return value\n ref={ref}\n {...props}\n />\n );\n }\n);\n\nReanimatedScreen.displayName = 'ReanimatedScreen';\n\nexport default ReanimatedScreen;\n"]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { ScreenContext } from 'react-native-screens';
|
|
7
|
+
import ReanimatedNativeStackScreen from './ReanimatedNativeStackScreen';
|
|
8
|
+
import AnimatedScreen from './ReanimatedScreen';
|
|
9
|
+
|
|
10
|
+
class ReanimatedScreenWrapper extends React.Component {
|
|
11
|
+
constructor(...args) {
|
|
12
|
+
super(...args);
|
|
13
|
+
|
|
14
|
+
_defineProperty(this, "ref", null);
|
|
15
|
+
|
|
16
|
+
_defineProperty(this, "setRef", ref => {
|
|
17
|
+
var _this$props$onCompone, _this$props;
|
|
18
|
+
|
|
19
|
+
this.ref = ref;
|
|
20
|
+
(_this$props$onCompone = (_this$props = this.props).onComponentRef) === null || _this$props$onCompone === void 0 ? void 0 : _this$props$onCompone.call(_this$props, ref);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
setNativeProps(props) {
|
|
25
|
+
var _this$ref;
|
|
26
|
+
|
|
27
|
+
(_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.setNativeProps(props);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
render() {
|
|
31
|
+
const ReanimatedScreen = this.props.isNativeStack ? ReanimatedNativeStackScreen : AnimatedScreen;
|
|
32
|
+
return /*#__PURE__*/React.createElement(ReanimatedScreen, _extends({}, this.props, {
|
|
33
|
+
// @ts-ignore some problems with ref
|
|
34
|
+
ref: this.setRef
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export default function ReanimatedScreenProvider(props) {
|
|
41
|
+
return (
|
|
42
|
+
/*#__PURE__*/
|
|
43
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
44
|
+
React.createElement(ScreenContext.Provider, {
|
|
45
|
+
value: ReanimatedScreenWrapper
|
|
46
|
+
}, props.children)
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=ReanimatedScreenProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["ReanimatedScreenProvider.tsx"],"names":["React","ScreenContext","ReanimatedNativeStackScreen","AnimatedScreen","ReanimatedScreenWrapper","Component","ref","props","onComponentRef","setNativeProps","render","ReanimatedScreen","isNativeStack","setRef","ReanimatedScreenProvider","children"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAyC,OAAzC;AAEA,SAAsBC,aAAtB,QAA2C,sBAA3C;AACA,OAAOC,2BAAP,MAAwC,+BAAxC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;;AAEA,MAAMC,uBAAN,SAAsCJ,KAAK,CAACK,SAA5C,CAAmE;AAAA;AAAA;;AAAA,iCACb,IADa;;AAAA,oCAOvDC,GAAD,IAAqD;AAAA;;AAC5D,WAAKA,GAAL,GAAWA,GAAX;AACA,mDAAKC,KAAL,EAAWC,cAAX,kGAA4BF,GAA5B;AACD,KAVgE;AAAA;;AAGjEG,EAAAA,cAAc,CAACF,KAAD,EAA2B;AAAA;;AACvC,sBAAKD,GAAL,wDAAUG,cAAV,CAAyBF,KAAzB;AACD;;AAODG,EAAAA,MAAM,GAAG;AACP,UAAMC,gBAAgB,GAAG,KAAKJ,KAAL,CAAWK,aAAX,GACrBV,2BADqB,GAErBC,cAFJ;AAGA,wBACE,oBAAC,gBAAD,eACM,KAAKI,KADX;AAEE;AACA,MAAA,GAAG,EAAE,KAAKM;AAHZ,OADF;AAOD;;AAvBgE;;AA0BnE,eAAe,SAASC,wBAAT,CACbP,KADa,EAEb;AACA;AAAA;AACE;AACA,wBAAC,aAAD,CAAe,QAAf;AAAwB,MAAA,KAAK,EAAEH;AAA/B,OACGG,KAAK,CAACQ,QADT;AAFF;AAMD","sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport { View } from 'react-native';\nimport { ScreenProps, ScreenContext } from 'react-native-screens';\nimport ReanimatedNativeStackScreen from './ReanimatedNativeStackScreen';\nimport AnimatedScreen from './ReanimatedScreen';\n\nclass ReanimatedScreenWrapper extends React.Component<ScreenProps> {\n private ref: React.ElementRef<typeof View> | null = null;\n\n setNativeProps(props: ScreenProps): void {\n this.ref?.setNativeProps(props);\n }\n\n setRef = (ref: React.ElementRef<typeof View> | null): void => {\n this.ref = ref;\n this.props.onComponentRef?.(ref);\n };\n\n render() {\n const ReanimatedScreen = this.props.isNativeStack\n ? ReanimatedNativeStackScreen\n : AnimatedScreen;\n return (\n <ReanimatedScreen\n {...this.props}\n // @ts-ignore some problems with ref\n ref={this.setRef}\n />\n );\n }\n}\n\nexport default function ReanimatedScreenProvider(\n props: PropsWithChildren<unknown>\n) {\n return (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n <ScreenContext.Provider value={ReanimatedScreenWrapper as any}>\n {props.children}\n </ScreenContext.Provider>\n );\n}\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default as ReanimatedScreenProvider } from './
|
|
1
|
+
export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
|
|
2
2
|
export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["default","ReanimatedScreenProvider","useReanimatedTransitionProgress"],"mappings":"AAAA,SAASA,OAAO,IAAIC,wBAApB,QAAoD,
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["default","ReanimatedScreenProvider","useReanimatedTransitionProgress"],"mappings":"AAAA,SAASA,OAAO,IAAIC,wBAApB,QAAoD,4BAApD;AACA,SAASD,OAAO,IAAIE,+BAApB,QAA2D,mCAA3D","sourcesContent":["export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';\nexport { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { BackHandler, Platform } from 'react-native';
|
|
2
|
+
export const isSearchBarAvailableForCurrentPlatform = ['ios', 'android'].includes(Platform.OS);
|
|
3
|
+
export function executeNativeBackPress() {
|
|
4
|
+
// This function invokes the native back press event
|
|
5
|
+
BackHandler.exitApp();
|
|
6
|
+
return true;
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["utils.ts"],"names":["BackHandler","Platform","isSearchBarAvailableForCurrentPlatform","includes","OS","executeNativeBackPress","exitApp"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,QAAtB,QAAsC,cAAtC;AAEA,OAAO,MAAMC,sCAAsC,GAAG,CACpD,KADoD,EAEpD,SAFoD,EAGpDC,QAHoD,CAG3CF,QAAQ,CAACG,EAHkC,CAA/C;AAKP,OAAO,SAASC,sBAAT,GAAkC;AACvC;AACAL,EAAAA,WAAW,CAACM,OAAZ;AACA,SAAO,IAAP;AACD","sourcesContent":["import { BackHandler, Platform } from 'react-native';\n\nexport const isSearchBarAvailableForCurrentPlatform = [\n 'ios',\n 'android',\n].includes(Platform.OS);\n\nexport function executeNativeBackPress() {\n // This function invokes the native back press event\n BackHandler.exitApp();\n return true;\n}\n"]}
|
|
@@ -3,8 +3,10 @@ import { Animated, View, ViewProps, ImageProps } from 'react-native';
|
|
|
3
3
|
import { ScreenProps, ScreenContainerProps, ScreenStackProps, ScreenStackHeaderConfigProps, HeaderSubviewTypes, SearchBarProps } from './types';
|
|
4
4
|
export * from './types';
|
|
5
5
|
export { default as useTransitionProgress } from './useTransitionProgress';
|
|
6
|
+
export { isSearchBarAvailableForCurrentPlatform, executeNativeBackPress, } from './utils';
|
|
6
7
|
export declare function enableScreens(shouldEnableScreens?: boolean): void;
|
|
7
8
|
export declare function screensEnabled(): boolean;
|
|
9
|
+
export declare function enableFreeze(shouldEnableReactFreeze?: boolean): void;
|
|
8
10
|
export declare class NativeScreen extends React.Component<ScreenProps> {
|
|
9
11
|
render(): JSX.Element;
|
|
10
12
|
}
|
|
@@ -253,8 +253,6 @@ export declare type NativeStackNavigationOptions = {
|
|
|
253
253
|
screenOrientation?: ScreenProps['screenOrientation'];
|
|
254
254
|
/**
|
|
255
255
|
* Object in which you should pass props in order to render native iOS searchBar.
|
|
256
|
-
*
|
|
257
|
-
* @platform ios
|
|
258
256
|
*/
|
|
259
257
|
searchBar?: SearchBarProps;
|
|
260
258
|
/**
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface Args {
|
|
2
|
+
onBackPress: () => boolean;
|
|
3
|
+
isDisabled: boolean;
|
|
4
|
+
}
|
|
5
|
+
interface UseBackPressSubscription {
|
|
6
|
+
handleAttached: () => void;
|
|
7
|
+
handleDetached: () => void;
|
|
8
|
+
createSubscription: () => void;
|
|
9
|
+
clearSubscription: () => void;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* This hook is an abstraction for keeping back press subscription
|
|
13
|
+
* logic in one place.
|
|
14
|
+
*/
|
|
15
|
+
export declare function useBackPressSubscription({ onBackPress, isDisabled, }: Args): UseBackPressSubscription;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScreenProps } from 'react-native-screens';
|
|
3
|
+
import Animated from 'react-native-reanimated';
|
|
4
|
+
declare const ReanimatedNativeStackScreen: React.ForwardRefExoticComponent<Pick<ScreenProps, "children" | "active" | "activityState" | "customAnimationOnSwipe" | "enabled" | "isNativeStack" | "fullScreenSwipeEnabled" | "gestureEnabled" | "nativeBackButtonDismissalEnabled" | "onAppear" | "onComponentRef" | "onDisappear" | "onDismissed" | "onHeaderBackButtonClicked" | "onTransitionProgress" | "onWillAppear" | "onWillDisappear" | "replaceAnimation" | "screenOrientation" | "stackAnimation" | "stackPresentation" | "statusBarAnimation" | "statusBarColor" | "statusBarHidden" | "statusBarStyle" | "statusBarTranslucent" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
|
|
5
|
+
export default ReanimatedNativeStackScreen;
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScreenProps } from 'react-native-screens';
|
|
3
|
+
import Animated from 'react-native-reanimated';
|
|
4
|
+
declare const ReanimatedScreen: React.ForwardRefExoticComponent<Pick<ScreenProps, "children" | "active" | "activityState" | "customAnimationOnSwipe" | "enabled" | "isNativeStack" | "fullScreenSwipeEnabled" | "gestureEnabled" | "nativeBackButtonDismissalEnabled" | "onAppear" | "onComponentRef" | "onDisappear" | "onDismissed" | "onHeaderBackButtonClicked" | "onTransitionProgress" | "onWillAppear" | "onWillDisappear" | "replaceAnimation" | "screenOrientation" | "stackAnimation" | "stackPresentation" | "statusBarAnimation" | "statusBarColor" | "statusBarHidden" | "statusBarStyle" | "statusBarTranslucent" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<React.ComponentClass<Animated.AnimateProps<{}>, any>>>;
|
|
5
|
+
export default ReanimatedScreen;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as ReanimatedScreenProvider } from './
|
|
1
|
+
export { default as ReanimatedScreenProvider } from './ReanimatedScreenProvider';
|
|
2
2
|
export { default as useReanimatedTransitionProgress } from './useReanimatedTransitionProgress';
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { Animated, NativeSyntheticEvent, ViewProps, View, TargetedEvent, TextInputFocusEventData } from 'react-native';
|
|
3
2
|
export declare type StackPresentationTypes = 'push' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal' | 'fullScreenModal' | 'formSheet';
|
|
4
3
|
export declare type StackAnimationTypes = 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'none' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left';
|
|
@@ -270,6 +269,14 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
|
|
|
270
269
|
* Boolean that allows for disabling drop shadow under navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.
|
|
271
270
|
*/
|
|
272
271
|
largeTitleHideShadow?: boolean;
|
|
272
|
+
/**
|
|
273
|
+
* Callback which is executed when screen header is attached
|
|
274
|
+
*/
|
|
275
|
+
onAttached?: () => void;
|
|
276
|
+
/**
|
|
277
|
+
* Callback which is executed when screen header is detached
|
|
278
|
+
*/
|
|
279
|
+
onDetached?: () => void;
|
|
273
280
|
/**
|
|
274
281
|
* String that can be displayed in the header as a fallback for `headerTitle`.
|
|
275
282
|
*/
|
|
@@ -309,22 +316,46 @@ export interface SearchBarProps {
|
|
|
309
316
|
* The auto-capitalization behavior
|
|
310
317
|
*/
|
|
311
318
|
autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
|
|
319
|
+
/**
|
|
320
|
+
* Automatically focuses search bar on mount
|
|
321
|
+
*
|
|
322
|
+
* @platform android
|
|
323
|
+
*/
|
|
324
|
+
autoFocus?: boolean;
|
|
312
325
|
/**
|
|
313
326
|
* The search field background color
|
|
314
327
|
*/
|
|
315
328
|
barTintColor?: string;
|
|
316
329
|
/**
|
|
317
330
|
* The text to be used instead of default `Cancel` button text
|
|
331
|
+
*
|
|
332
|
+
* @platform ios
|
|
318
333
|
*/
|
|
319
334
|
cancelButtonText?: string;
|
|
335
|
+
/**
|
|
336
|
+
* Specifies whether the back button should close search bar's text input or not.
|
|
337
|
+
*
|
|
338
|
+
* @platform android
|
|
339
|
+
*/
|
|
340
|
+
disableBackButtonOverride?: boolean;
|
|
320
341
|
/**
|
|
321
342
|
* Indicates whether to hide the navigation bar
|
|
343
|
+
*
|
|
344
|
+
* @platform ios
|
|
322
345
|
*/
|
|
323
346
|
hideNavigationBar?: boolean;
|
|
324
347
|
/**
|
|
325
348
|
* Indicates whether to hide the search bar when scrolling
|
|
349
|
+
*
|
|
350
|
+
* @platform ios
|
|
326
351
|
*/
|
|
327
352
|
hideWhenScrolling?: boolean;
|
|
353
|
+
/**
|
|
354
|
+
* Sets type of the input. Defaults to `text`.
|
|
355
|
+
*
|
|
356
|
+
* @platform android
|
|
357
|
+
*/
|
|
358
|
+
inputType?: 'text' | 'phone' | 'number' | 'email';
|
|
328
359
|
/**
|
|
329
360
|
* Indicates whether to to obscure the underlying content
|
|
330
361
|
*/
|
|
@@ -335,6 +366,8 @@ export interface SearchBarProps {
|
|
|
335
366
|
onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
|
|
336
367
|
/**
|
|
337
368
|
* A callback that gets called when the cancel button is pressed
|
|
369
|
+
*
|
|
370
|
+
* @platform ios
|
|
338
371
|
*/
|
|
339
372
|
onCancelButtonPress?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
|
|
340
373
|
/**
|
|
@@ -344,7 +377,19 @@ export interface SearchBarProps {
|
|
|
344
377
|
/**
|
|
345
378
|
* A callback that gets called when search bar has received focus
|
|
346
379
|
*/
|
|
380
|
+
onClose?: () => void;
|
|
381
|
+
/**
|
|
382
|
+
* A callback that gets called when search bar is opened
|
|
383
|
+
*
|
|
384
|
+
* @platform android
|
|
385
|
+
*/
|
|
347
386
|
onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
|
|
387
|
+
/**
|
|
388
|
+
* A callback that gets called when search bar is closed
|
|
389
|
+
*
|
|
390
|
+
* @platform android
|
|
391
|
+
*/
|
|
392
|
+
onOpen?: () => void;
|
|
348
393
|
/**
|
|
349
394
|
* A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
|
|
350
395
|
*/
|
package/native-stack/README.md
CHANGED
|
@@ -362,7 +362,7 @@ Search bar is only supported on iOS.
|
|
|
362
362
|
Example:
|
|
363
363
|
|
|
364
364
|
```js
|
|
365
|
-
React.
|
|
365
|
+
React.useLayoutEffect(() => {
|
|
366
366
|
navigation.setOptions({
|
|
367
367
|
searchBar: {
|
|
368
368
|
// search bar options
|
|
@@ -371,6 +371,8 @@ React.useEffect(() => {
|
|
|
371
371
|
}, [navigation]);
|
|
372
372
|
```
|
|
373
373
|
|
|
374
|
+
We advise using `useLayoutEffect` hook instead of `useEffect` when managing `searchBar` props to avoid unexpected layout issues.
|
|
375
|
+
|
|
374
376
|
Supported properties are described below.
|
|
375
377
|
|
|
376
378
|
#### `autoCapitalize`
|
|
@@ -383,7 +385,11 @@ Possible values:
|
|
|
383
385
|
- `sentences`
|
|
384
386
|
- `characters`
|
|
385
387
|
|
|
386
|
-
Defaults to `sentences
|
|
388
|
+
Defaults to `sentences` on iOS and `'none'` on Android.
|
|
389
|
+
|
|
390
|
+
#### `autoFocus` (Android only)
|
|
391
|
+
|
|
392
|
+
When set to `true` focuses search bar automatically when screen is appearing. Default value is `false`.
|
|
387
393
|
|
|
388
394
|
#### `barTintColor`
|
|
389
395
|
|
|
@@ -391,23 +397,37 @@ The search field background color.
|
|
|
391
397
|
|
|
392
398
|
By default bar tint color is translucent.
|
|
393
399
|
|
|
394
|
-
#### `cancelButtonText`
|
|
400
|
+
#### `cancelButtonText` (iOS only)
|
|
395
401
|
|
|
396
402
|
The text to be used instead of default `Cancel` button text.
|
|
397
403
|
|
|
398
|
-
#### `
|
|
404
|
+
#### `disableBackButtonOverride` (Android only)
|
|
405
|
+
|
|
406
|
+
Default behavior is to prevent screen from going back when search bar is open (`disableBackButtonOverride: false`). If you don't want this to happen set `disableBackButtonOverride` to `true`
|
|
407
|
+
|
|
408
|
+
#### `hideNavigationBar` (iOS only)
|
|
399
409
|
|
|
400
410
|
Boolean indicating whether to hide the navigation bar during searching.
|
|
401
411
|
|
|
402
412
|
Defaults to `true`.
|
|
403
413
|
|
|
404
|
-
#### `hideWhenScrolling`
|
|
414
|
+
#### `hideWhenScrolling` (iOS only)
|
|
405
415
|
|
|
406
416
|
Boolean indicating whether to hide the search bar when scrolling.
|
|
407
417
|
|
|
408
418
|
Defaults to `true`.
|
|
409
419
|
|
|
410
|
-
####
|
|
420
|
+
#### `inputType` (Android only)
|
|
421
|
+
|
|
422
|
+
This prop is used to change type of the input and keyboard. Default value is `'text'`.
|
|
423
|
+
|
|
424
|
+
All values:
|
|
425
|
+
- `'text'` - normal text input
|
|
426
|
+
- `'number'` - number input
|
|
427
|
+
- `'email'` - email input
|
|
428
|
+
- `'phone'` - phone input
|
|
429
|
+
|
|
430
|
+
#### `obscureBackground` (iOS only)
|
|
411
431
|
|
|
412
432
|
Boolean indicating whether to obscure the underlying content with semi-transparent overlay.
|
|
413
433
|
|
|
@@ -430,7 +450,7 @@ Example:
|
|
|
430
450
|
```js
|
|
431
451
|
const [search, setSearch] = React.useState('');
|
|
432
452
|
|
|
433
|
-
React.
|
|
453
|
+
React.useLayoutEffect(() => {
|
|
434
454
|
navigation.setOptions({
|
|
435
455
|
searchBar: {
|
|
436
456
|
onChangeText: (event) => setSearch(event.nativeEvent.text),
|
|
@@ -438,11 +458,19 @@ React.useEffect(() => {
|
|
|
438
458
|
});
|
|
439
459
|
}, [navigation]);
|
|
440
460
|
```
|
|
461
|
+
#### `onClose` (Android only)
|
|
462
|
+
|
|
463
|
+
A callback that gets called when search bar is closing
|
|
464
|
+
|
|
441
465
|
|
|
442
466
|
#### `onFocus`
|
|
443
467
|
|
|
444
468
|
A callback that gets called when search bar has received focus.
|
|
445
469
|
|
|
470
|
+
#### `onOpen` (Android only)
|
|
471
|
+
|
|
472
|
+
A callback that gets called when search bar is expanding
|
|
473
|
+
|
|
446
474
|
#### `onSearchButtonPress`
|
|
447
475
|
|
|
448
476
|
A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-screens",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.1",
|
|
4
4
|
"description": "Native navigation primitives for your React Native app.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"check-types": "tsc --noEmit",
|
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
"windows/",
|
|
36
36
|
"RNScreens.podspec",
|
|
37
37
|
"README.md",
|
|
38
|
-
"!**/__tests__"
|
|
38
|
+
"!**/__tests__",
|
|
39
|
+
"!android/src/main/java/com/swmansion/rnscreens/LifecycleHelper.kt"
|
|
39
40
|
],
|
|
40
41
|
"repository": {
|
|
41
42
|
"type": "git",
|
|
@@ -52,6 +53,7 @@
|
|
|
52
53
|
},
|
|
53
54
|
"homepage": "https://github.com/software-mansion/react-native-screens#readme",
|
|
54
55
|
"dependencies": {
|
|
56
|
+
"react-freeze": "^1.0.0",
|
|
55
57
|
"warn-once": "^0.1.0"
|
|
56
58
|
},
|
|
57
59
|
"peerDependencies": {
|
|
@@ -80,6 +82,7 @@
|
|
|
80
82
|
"eslint-plugin-node": "^11.1.0",
|
|
81
83
|
"eslint-plugin-promise": "^4.2.1",
|
|
82
84
|
"eslint-plugin-react": "^7.20.5",
|
|
85
|
+
"eslint-plugin-react-hooks": "^4.2.0",
|
|
83
86
|
"eslint-plugin-react-native": "^3.2.1",
|
|
84
87
|
"eslint-plugin-standard": "^4.0.1",
|
|
85
88
|
"husky": "^7.0.1",
|