react-native-screens 3.9.0 → 3.10.0

package/android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt

@@ -0,0 +1,90 @@
+package com.swmansion.rnscreens
+
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@ReactModule(name = SearchBarManager.REACT_CLASS)
+class SearchBarManager : ViewGroupManager<SearchBarView>() {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(context: ThemedReactContext): SearchBarView {
+        return SearchBarView(context)
+    }
+
+    override fun onAfterUpdateTransaction(view: SearchBarView) {
+        super.onAfterUpdateTransaction(view)
+        view.onUpdate()
+    }
+
+    @ReactProp(name = "autoCapitalize")
+    fun setAutoCapitalize(view: SearchBarView, autoCapitalize: String?) {
+        view.autoCapitalize = when (autoCapitalize) {
+            null, "none" -> SearchBarView.SearchBarAutoCapitalize.NONE
+            "words" -> SearchBarView.SearchBarAutoCapitalize.WORDS
+            "sentences" -> SearchBarView.SearchBarAutoCapitalize.SENTENCES
+            "characters" -> SearchBarView.SearchBarAutoCapitalize.CHARACTERS
+            else -> throw JSApplicationIllegalArgumentException(
+                "Forbidden auto capitalize value passed"
+            )
+        }
+    }
+
+    @ReactProp(name = "autoFocus")
+    fun setAutoFocus(view: SearchBarView, autoFocus: Boolean?) {
+        view.autoFocus = autoFocus ?: false
+    }
+
+    @ReactProp(name = "barTintColor", customType = "Color")
+    fun setTintColor(view: SearchBarView, color: Int?) {
+        view.tintColor = color
+    }
+
+    @ReactProp(name = "disableBackButtonOverride")
+    fun setDisableBackButtonOverride(view: SearchBarView, disableBackButtonOverride: Boolean?) {
+        view.shouldOverrideBackButton = disableBackButtonOverride != true
+    }
+
+    @ReactProp(name = "inputType")
+    fun setInputType(view: SearchBarView, inputType: String?) {
+        view.inputType = when (inputType) {
+            null, "text" -> SearchBarView.SearchBarInputTypes.TEXT
+            "phone" -> SearchBarView.SearchBarInputTypes.PHONE
+            "number" -> SearchBarView.SearchBarInputTypes.NUMBER
+            "email" -> SearchBarView.SearchBarInputTypes.EMAIL
+            else -> throw JSApplicationIllegalArgumentException(
+                "Forbidden input type value"
+            )
+        }
+    }
+
+    @ReactProp(name = "placeholder")
+    fun setPlaceholder(view: SearchBarView, placeholder: String?) {
+        view.placeholder = placeholder
+    }
+
+    @ReactProp(name = "textColor", customType = "Color")
+    fun setTextColor(view: SearchBarView, color: Int?) {
+        view.textColor = color
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.builder<String, Any>()
+            .put("onChangeText", MapBuilder.of("registrationName", "onChangeText"))
+            .put("onSearchButtonPress", MapBuilder.of("registrationName", "onSearchButtonPress"))
+            .put("onFocus", MapBuilder.of("registrationName", "onFocus"))
+            .put("onBlur", MapBuilder.of("registrationName", "onBlur"))
+            .put("onClose", MapBuilder.of("registrationName", "onClose"))
+            .put("onOpen", MapBuilder.of("registrationName", "onOpen"))
+            .build()
+    }
+
+    companion object {
+        const val REACT_CLASS = "RNSSearchBar"
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt

@@ -0,0 +1,150 @@
+package com.swmansion.rnscreens
+
+import android.annotation.SuppressLint
+import android.text.InputType
+import androidx.appcompat.widget.SearchView
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.views.view.ReactViewGroup
+
+@SuppressLint("ViewConstructor")
+class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext) {
+    var inputType: SearchBarInputTypes = SearchBarInputTypes.TEXT
+    var autoCapitalize: SearchBarAutoCapitalize = SearchBarAutoCapitalize.NONE
+    var textColor: Int? = null
+    var tintColor: Int? = null
+    var placeholder: String? = null
+    var shouldOverrideBackButton: Boolean = true
+    var autoFocus: Boolean = false
+
+    private var mSearchViewFormatter: SearchViewFormatter? = null
+
+    private var mAreListenersSet: Boolean = false
+
+    private val screenStackFragment: ScreenStackFragment?
+        get() {
+            val currentParent = parent
+            if (currentParent is ScreenStackHeaderSubview) {
+                return currentParent.config?.screenFragment
+            }
+            return null
+        }
+
+    fun onUpdate() {
+        setSearchViewProps()
+    }
+
+    private fun setSearchViewProps() {
+        val searchView = screenStackFragment?.searchView
+        if (searchView != null) {
+            if (!mAreListenersSet) {
+                setSearchViewListeners(searchView)
+                mAreListenersSet = true
+            }
+
+            searchView.inputType = inputType.toAndroidInputType(autoCapitalize)
+            searchView.queryHint = placeholder
+            mSearchViewFormatter?.setTextColor(textColor)
+            mSearchViewFormatter?.setTintColor(tintColor)
+            searchView.overrideBackAction = shouldOverrideBackButton
+        }
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+
+        screenStackFragment?.onSearchViewCreate = { newSearchView ->
+            if (mSearchViewFormatter == null) mSearchViewFormatter =
+                SearchViewFormatter(newSearchView)
+            setSearchViewProps()
+            if (autoFocus) {
+                screenStackFragment?.searchView?.focus()
+            }
+        }
+    }
+
+    private fun setSearchViewListeners(searchView: SearchView) {
+        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
+            override fun onQueryTextChange(newText: String?): Boolean {
+                handleTextChange(newText)
+                return true
+            }
+
+            override fun onQueryTextSubmit(query: String?): Boolean {
+                handleTextSubmit(query)
+                return true
+            }
+        })
+        searchView.setOnQueryTextFocusChangeListener { _, hasFocus ->
+            handleFocusChange(hasFocus)
+        }
+        searchView.setOnCloseListener {
+            handleClose()
+            false
+        }
+        searchView.setOnSearchClickListener {
+            handleOpen()
+        }
+    }
+
+    private fun handleTextChange(newText: String?) {
+        val event = Arguments.createMap()
+        event.putString("text", newText)
+        sendEvent("onChangeText", event)
+    }
+
+    private fun handleFocusChange(hasFocus: Boolean) {
+        sendEvent(if (hasFocus) "onFocus" else "onBlur", null)
+    }
+
+    private fun handleClose() {
+        sendEvent("onClose", null)
+    }
+
+    private fun handleOpen() {
+        sendEvent("onOpen", null)
+    }
+
+    private fun handleTextSubmit(newText: String?) {
+        val event = Arguments.createMap()
+        event.putString("text", newText)
+        sendEvent("onSearchButtonPress", event)
+    }
+
+    private fun sendEvent(eventName: String, eventContent: WritableMap?) {
+        (context as ReactContext).getJSModule(RCTEventEmitter::class.java)
+            ?.receiveEvent(id, eventName, eventContent)
+    }
+
+    enum class SearchBarAutoCapitalize {
+        NONE, WORDS, SENTENCES, CHARACTERS
+    }
+
+    enum class SearchBarInputTypes {
+        TEXT {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                when (capitalize) {
+                    SearchBarAutoCapitalize.NONE -> InputType.TYPE_CLASS_TEXT
+                    SearchBarAutoCapitalize.WORDS -> InputType.TYPE_TEXT_FLAG_CAP_WORDS
+                    SearchBarAutoCapitalize.SENTENCES -> InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+                    SearchBarAutoCapitalize.CHARACTERS -> InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+                }
+        },
+        PHONE {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                InputType.TYPE_CLASS_PHONE
+        },
+        NUMBER {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                InputType.TYPE_CLASS_NUMBER
+        },
+        EMAIL {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS
+        };
+
+        abstract fun toAndroidInputType(capitalize: SearchBarAutoCapitalize): Int
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/SearchViewFormatter.kt

@@ -0,0 +1,40 @@
+package com.swmansion.rnscreens
+
+import android.graphics.drawable.Drawable
+import android.view.View
+import android.widget.EditText
+import androidx.appcompat.widget.SearchView
+
+class SearchViewFormatter(var searchView: SearchView) {
+    private var mDefaultTextColor: Int? = null
+    private var mDefaultTintBackground: Drawable? = null
+
+    private val searchEditText
+        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_src_text) as? EditText
+    private val searchTextPlate
+        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_plate)
+
+    fun setTextColor(textColor: Int?) {
+        val currentDefaultTextColor = mDefaultTextColor
+        if (textColor != null) {
+            if (mDefaultTextColor == null) {
+                mDefaultTextColor = searchEditText?.textColors?.defaultColor
+            }
+            searchEditText?.setTextColor(textColor)
+        } else if (currentDefaultTextColor != null) {
+            searchEditText?.setTextColor(currentDefaultTextColor)
+        }
+    }
+
+    fun setTintColor(tintColor: Int?) {
+        val currentDefaultTintColor = mDefaultTintBackground
+        if (tintColor != null) {
+            if (mDefaultTintBackground == null) {
+                mDefaultTintBackground = searchTextPlate.background
+            }
+            searchTextPlate.setBackgroundColor(tintColor)
+        } else if (currentDefaultTintColor != null) {
+            searchTextPlate.background = currentDefaultTintColor
+        }
+    }
+}

package/createNativeStackNavigator/README.md

@@ -360,12 +360,10 @@ Defaults to `auto`.
 
 Sets the translucency of the status bar (similar to the `StatusBar` component). Defaults to `false`.
 
-### Search bar (iOS only)
+### Search bar
 
 The search bar is just a `searchBar` property that can be specified in the navigator's `defaultNavigationOptions` prop or an individual screen's `navigationOptions`. Search bars are rarely static so normally it is controlled by passing an object to `searchBar` navigation option in the component's body.
 
-Search bar is only supported on iOS.
-
 Example: 
 
 ```js
@@ -390,7 +388,11 @@ Possible values:
 - `sentences`
 - `characters`
 
-Defaults to `sentences`.
+Defaults to `sentences` on iOS and `'none'` on Android.
+
+#### `autoFocus` (Android only)
+
+When set to `true` focuses search bar automatically when screen is appearing. Default value is `false`.
 
 #### `barTintColor`
 
@@ -398,23 +400,37 @@ The search field background color.
 
 By default bar tint color is translucent.
 
-#### `cancelButtonText`
+#### `cancelButtonText` (iOS only)
 
 The text to be used instead of default `Cancel` button text.
 
-#### `hideNavigationBar`
+#### `disableBackButtonOverride` (Android only)
+
+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` 
+
+#### `hideNavigationBar` (iOS only)
 
 Boolean indicating whether to hide the navigation bar during searching.
 
 Defaults to `true`.
 
-#### `hideWhenScrolling`
+#### `hideWhenScrolling` (iOS only)
 
 Boolean indicating whether to hide the search bar when scrolling.
 
 Defaults to `true`.
 
-####  `obscureBackground`
+#### `inputType` (Android only)
+
+This prop is used to change type of the input and keyboard. Default value is `'text'`.
+
+All values:
+- `'text'` - normal text input
+- `'number'` - number input
+- `'email'` - email input
+- `'phone'` - phone input
+
+####  `obscureBackground` (iOS only)
 
 Boolean indicating whether to obscure the underlying content with semi-transparent overlay.
 
@@ -424,7 +440,7 @@ Defaults to `true`.
 
 A callback that gets called when search bar has lost focus.
 
-#### `onCancelButtonPress`
+#### `onCancelButtonPress` (iOS only)
 
 A callback that gets called when the cancel button is pressed.
 
@@ -446,10 +462,18 @@ static navigationOptions = ({navigation}) => {
 };
 ```
 
+#### `onClose` (Android only)
+
+A callback that gets called when search bar is closing
+
 #### `onFocus`
 
 A callback that gets called when search bar has received focus.
 
+#### `onOpen` (Android only)
+
+A callback that gets called when search bar is expanding
+
 #### `onSearchButtonPress`
 
 A callback that gets called when the search button is pressed. It receives the current text value of the search bar.

package/ios/RNSScreen.m

@@ -688,6 +688,10 @@
 
 - (void)traverseForScrollView:(UIView *)view
 {
+  if (![[self.view valueForKey:@"_bridge"] valueForKey:@"_jsThread"]) {
+    // we don't want to send `scrollViewDidEndDecelerating` event to JS before the JS thread is ready
+    return;
+  }
   if ([view isKindOfClass:[UIScrollView class]] &&
       ([[(UIScrollView *)view delegate] respondsToSelector:@selector(scrollViewDidEndDecelerating:)])) {
     [[(UIScrollView *)view delegate] scrollViewDidEndDecelerating:(id)view];

package/ios/RNSScreenStack.m

@@ -425,12 +425,12 @@
   // controller is still there
   BOOL firstTimePush = ![lastTop isKindOfClass:[RNSScreen class]];
 
-  BOOL shouldAnimate = !firstTimePush && ((RNSScreenView *)lastTop.view).stackAnimation != RNSScreenStackAnimationNone;
-
   if (firstTimePush) {
     // nothing pushed yet
     [_controller setViewControllers:controllers animated:NO];
   } else if (top != lastTop) {
+    // we always provide `animated:YES` since, if the user does not want the animation, he will provide
+    // `stackAnimation: 'none'`, which will resolve in no animation anyways.
     if (![controllers containsObject:lastTop]) {
       // if the previous top screen does not exist anymore and the new top was not on the stack before, probably replace
       // was called, so we check the animation
@@ -445,7 +445,7 @@
         NSMutableArray *newControllers = [NSMutableArray arrayWithArray:controllers];
         [newControllers addObject:lastTop];
         [_controller setViewControllers:newControllers animated:NO];
-        [_controller popViewControllerAnimated:shouldAnimate];
+        [_controller popViewControllerAnimated:YES];
       }
     } else if (![_controller.viewControllers containsObject:top]) {
       // new top controller is not on the stack
@@ -454,11 +454,11 @@
       NSMutableArray *newControllers = [NSMutableArray arrayWithArray:controllers];
       [newControllers removeLastObject];
       [_controller setViewControllers:newControllers animated:NO];
-      [_controller pushViewController:top animated:shouldAnimate];
+      [_controller pushViewController:top animated:YES];
     } else {
       // don't really know what this case could be, but may need to handle it
       // somehow
-      [_controller setViewControllers:controllers animated:shouldAnimate];
+      [_controller setViewControllers:controllers animated:NO];
     }
   } else {
     // change wasn't on the top of the stack. We don't need animation.
@@ -572,7 +572,8 @@
 {
   RNSScreenView *topScreen = (RNSScreenView *)_controller.viewControllers.lastObject.view;
 
-  if (!topScreen.gestureEnabled || _controller.viewControllers.count < 2) {
+  if (![topScreen isKindOfClass:[RNSScreenView class]] || !topScreen.gestureEnabled ||
+      _controller.viewControllers.count < 2) {
     return NO;
   }
 

package/lib/commonjs/index.js

@@ -24,7 +24,9 @@ var _exportNames = {
   SearchBar: true,
   ScreenStackHeaderSubview: true,
   shouldUseActivityState: true,
-  useTransitionProgress: true
+  useTransitionProgress: true,
+  isSearchBarAvailableForCurrentPlatform: true,
+  executeNativeBackPress: true
 };
 exports.enableScreens = enableScreens;
 exports.screensEnabled = screensEnabled;
@@ -35,6 +37,18 @@ Object.defineProperty(exports, "useTransitionProgress", {
     return _useTransitionProgress.default;
   }
 });
+Object.defineProperty(exports, "isSearchBarAvailableForCurrentPlatform", {
+  enumerable: true,
+  get: function () {
+    return _utils.isSearchBarAvailableForCurrentPlatform;
+  }
+});
+Object.defineProperty(exports, "executeNativeBackPress", {
+  enumerable: true,
+  get: function () {
+    return _utils.executeNativeBackPress;
+  }
+});
 exports.shouldUseActivityState = exports.ScreenStackHeaderSubview = exports.SearchBar = exports.ScreenStackHeaderConfig = exports.ScreenStackHeaderSearchBarView = exports.ScreenStackHeaderCenterView = exports.ScreenStackHeaderLeftView = exports.ScreenStackHeaderRightView = exports.ScreenStackHeaderBackButtonImage = exports.FullWindowOverlay = exports.ScreenStack = exports.NativeScreenNavigationContainer = exports.NativeScreenContainer = exports.ScreenContainer = exports.ScreenContext = exports.Screen = exports.NativeScreen = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -57,6 +71,8 @@ Object.keys(_types).forEach(function (key) {
 
 var _useTransitionProgress = _interopRequireDefault(require("./useTransitionProgress"));
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["ENABLE_SCREENS","enableScreens","shouldEnableScreens","screensEnabled","enableFreeze","shouldEnableReactFreeze","NativeScreen","React","Component","render","active","activityState","style","enabled","rest","props","undefined","display","Screen","Animated","createAnimatedComponent","ScreenContext","createContext","ScreenContainer","View","NativeScreenContainer","NativeScreenNavigationContainer","ScreenStack","FullWindowOverlay","ScreenStackHeaderBackButtonImage","ScreenStackHeaderRightView","ScreenStackHeaderLeftView","ScreenStackHeaderCenterView","ScreenStackHeaderSearchBarView","ScreenStackHeaderConfig","SearchBar","ScreenStackHeaderSubview","shouldUseActivityState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAUA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;;;AAEA,IAAIA,cAAc,GAAG,IAArB;;AAEO,SAASC,aAAT,CAAuBC,mBAAmB,GAAG,IAA7C,EAAyD;AAC9DF,EAAAA,cAAc,GAAGE,mBAAjB;AACD;;AAEM,SAASC,cAAT,GAAmC;AACxC,SAAOH,cAAP;AACD,C,CAED;AACA;;;AACO,SAASI,YAAT,CAAsBC,uBAAuB,GAAG,IAAhD,EAA4D,CACjE;AACD;;AAEM,MAAMC,YAAN,SAA2BC,eAAMC,SAAjC,CAAwD;AAC7DC,EAAAA,MAAM,GAAgB;AACpB,QAAI;AACFC,MAAAA,MADE;AAEFC,MAAAA,aAFE;AAGFC,MAAAA,KAHE;AAIFC,MAAAA,OAAO,GAAGb,cAJR;AAKF,SAAGc;AALD,QAMA,KAAKC,KANT;;AAQA,QAAIF,OAAJ,EAAa;AACX,UAAIH,MAAM,KAAKM,SAAX,IAAwBL,aAAa,KAAKK,SAA9C,EAAyD;AACvDL,QAAAA,aAAa,GAAGD,MAAM,KAAK,CAAX,GAAe,CAAf,GAAmB,CAAnC,CADuD,CACjB;AACvC;;AACD,0BACE,6BAAC,iBAAD,CACE;AADF;AAEE,QAAA,MAAM,EAAEC,aAAa,KAAK,CAF5B;AAGE,QAAA,KAAK,EAAE,CAACC,KAAD,EAAQ;AAAEK,UAAAA,OAAO,EAAEN,aAAa,KAAK,CAAlB,GAAsB,MAAtB,GAA+B;AAA1C,SAAR;AAHT,SAIMG,IAJN,EADF;AAQD;;AAED,wBAAO,6BAAC,iBAAD,EAAUA,IAAV,CAAP;AACD;;AAzB4D;;;;AA4BxD,MAAMI,MAAM,GAAGC,sBAASC,uBAAT,CAAiCd,YAAjC,CAAf;;;;AAEA,MAAMe,aAAa,gBAAGd,eAAMe,aAAN,CAAoBJ,MAApB,CAAtB;;;AAEA,MAAMK,eAA0D,GAAGC,iBAAnE;;AAEA,MAAMC,qBAAgE,GAAGD,iBAAzE;;AAEA,MAAME,+BAA0E,GAAGF,iBAAnF;;AAEA,MAAMG,WAAkD,GAAGH,iBAA3D;;AAEA,MAAMI,iBAAiB,GAAGJ,iBAA1B;;;AAEA,MAAMK,gCAAgC,GAC3Cd,KAD8C,iBAG9C,6BAAC,iBAAD,qBACE,6BAAC,kBAAD;AAAO,EAAA,UAAU,EAAC,QAAlB;AAA2B,EAAA,YAAY,EAAE;AAAzC,GAAgDA,KAAhD,EADF,CAHK;;;;AAQA,MAAMe,0BAA0B,GACrCf,KADwC,iBAExB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMgB,yBAAyB,GACpChB,KADuC,iBAEvB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMiB,2BAA2B,GACtCjB,KADyC,iBAEzB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMkB,8BAA8B,GACzClB,KAD4C,iBAE5B,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;AAIA,MAAMmB,uBAA0E,GAAGV,iBAAnF,C,CAEP;;;AACO,MAAMW,SAA8C,GAAGX,iBAAvD;;AAEA,MAAMY,wBAEX,GAAGZ,iBAFE;;AAIA,MAAMa,sBAAsB,GAAG,IAA/B","sourcesContent":["import React from 'react';\nimport { Animated, View, ViewProps, ImageProps, Image } from 'react-native';\nimport {\n  ScreenProps,\n  ScreenContainerProps,\n  ScreenStackProps,\n  ScreenStackHeaderConfigProps,\n  HeaderSubviewTypes,\n  SearchBarProps,\n} from './types';\n\nexport * from './types';\nexport { default as useTransitionProgress } from './useTransitionProgress';\n\nlet ENABLE_SCREENS = true;\n\nexport function enableScreens(shouldEnableScreens = true): void {\n  ENABLE_SCREENS = shouldEnableScreens;\n}\n\nexport function screensEnabled(): boolean {\n  return ENABLE_SCREENS;\n}\n\n// @ts-ignore function stub, freezing logic is located in index.native.tsx\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function enableFreeze(shouldEnableReactFreeze = true): void {\n  // noop\n}\n\nexport class NativeScreen extends React.Component<ScreenProps> {\n  render(): JSX.Element {\n    let {\n      active,\n      activityState,\n      style,\n      enabled = ENABLE_SCREENS,\n      ...rest\n    } = this.props;\n\n    if (enabled) {\n      if (active !== undefined && activityState === undefined) {\n        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx\n      }\n      return (\n        <View\n          // @ts-expect-error: hidden exists on web, but not in React Native\n          hidden={activityState === 0}\n          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}\n          {...rest}\n        />\n      );\n    }\n\n    return <View {...rest} />;\n  }\n}\n\nexport const Screen = Animated.createAnimatedComponent(NativeScreen);\n\nexport const ScreenContext = React.createContext(Screen);\n\nexport const ScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const ScreenStack: React.ComponentType<ScreenStackProps> = View;\n\nexport const FullWindowOverlay = View;\n\nexport const ScreenStackHeaderBackButtonImage = (\n  props: ImageProps\n): JSX.Element => (\n  <View>\n    <Image resizeMode=\"center\" fadeDuration={0} {...props} />\n  </View>\n);\n\nexport const ScreenStackHeaderRightView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderLeftView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderCenterView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderSearchBarView = (\n  props: React.PropsWithChildren<SearchBarProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> = View;\n\n// @ts-expect-error: search bar props have no common props with View\nexport const SearchBar: React.ComponentType<SearchBarProps> = View;\n\nexport const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<\n  ViewProps & { type?: HeaderSubviewTypes }\n>> = View;\n\nexport const shouldUseActivityState = true;\n"]}
+{"version":3,"sources":["index.tsx"],"names":["ENABLE_SCREENS","enableScreens","shouldEnableScreens","screensEnabled","enableFreeze","shouldEnableReactFreeze","NativeScreen","React","Component","render","active","activityState","style","enabled","rest","props","undefined","display","Screen","Animated","createAnimatedComponent","ScreenContext","createContext","ScreenContainer","View","NativeScreenContainer","NativeScreenNavigationContainer","ScreenStack","FullWindowOverlay","ScreenStackHeaderBackButtonImage","ScreenStackHeaderRightView","ScreenStackHeaderLeftView","ScreenStackHeaderCenterView","ScreenStackHeaderSearchBarView","ScreenStackHeaderConfig","SearchBar","ScreenStackHeaderSubview","shouldUseActivityState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAUA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;;;;;AAKA,IAAIA,cAAc,GAAG,IAArB;;AAEO,SAASC,aAAT,CAAuBC,mBAAmB,GAAG,IAA7C,EAAyD;AAC9DF,EAAAA,cAAc,GAAGE,mBAAjB;AACD;;AAEM,SAASC,cAAT,GAAmC;AACxC,SAAOH,cAAP;AACD,C,CAED;AACA;;;AACO,SAASI,YAAT,CAAsBC,uBAAuB,GAAG,IAAhD,EAA4D,CACjE;AACD;;AAEM,MAAMC,YAAN,SAA2BC,eAAMC,SAAjC,CAAwD;AAC7DC,EAAAA,MAAM,GAAgB;AACpB,QAAI;AACFC,MAAAA,MADE;AAEFC,MAAAA,aAFE;AAGFC,MAAAA,KAHE;AAIFC,MAAAA,OAAO,GAAGb,cAJR;AAKF,SAAGc;AALD,QAMA,KAAKC,KANT;;AAQA,QAAIF,OAAJ,EAAa;AACX,UAAIH,MAAM,KAAKM,SAAX,IAAwBL,aAAa,KAAKK,SAA9C,EAAyD;AACvDL,QAAAA,aAAa,GAAGD,MAAM,KAAK,CAAX,GAAe,CAAf,GAAmB,CAAnC,CADuD,CACjB;AACvC;;AACD,0BACE,6BAAC,iBAAD,CACE;AADF;AAEE,QAAA,MAAM,EAAEC,aAAa,KAAK,CAF5B;AAGE,QAAA,KAAK,EAAE,CAACC,KAAD,EAAQ;AAAEK,UAAAA,OAAO,EAAEN,aAAa,KAAK,CAAlB,GAAsB,MAAtB,GAA+B;AAA1C,SAAR;AAHT,SAIMG,IAJN,EADF;AAQD;;AAED,wBAAO,6BAAC,iBAAD,EAAUA,IAAV,CAAP;AACD;;AAzB4D;;;;AA4BxD,MAAMI,MAAM,GAAGC,sBAASC,uBAAT,CAAiCd,YAAjC,CAAf;;;;AAEA,MAAMe,aAAa,gBAAGd,eAAMe,aAAN,CAAoBJ,MAApB,CAAtB;;;AAEA,MAAMK,eAA0D,GAAGC,iBAAnE;;AAEA,MAAMC,qBAAgE,GAAGD,iBAAzE;;AAEA,MAAME,+BAA0E,GAAGF,iBAAnF;;AAEA,MAAMG,WAAkD,GAAGH,iBAA3D;;AAEA,MAAMI,iBAAiB,GAAGJ,iBAA1B;;;AAEA,MAAMK,gCAAgC,GAC3Cd,KAD8C,iBAG9C,6BAAC,iBAAD,qBACE,6BAAC,kBAAD;AAAO,EAAA,UAAU,EAAC,QAAlB;AAA2B,EAAA,YAAY,EAAE;AAAzC,GAAgDA,KAAhD,EADF,CAHK;;;;AAQA,MAAMe,0BAA0B,GACrCf,KADwC,iBAExB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMgB,yBAAyB,GACpChB,KADuC,iBAEvB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMiB,2BAA2B,GACtCjB,KADyC,iBAEzB,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;;AAIA,MAAMkB,8BAA8B,GACzClB,KAD4C,iBAE5B,6BAAC,iBAAD,EAAUA,KAAV,CAFX;;;AAIA,MAAMmB,uBAA0E,GAAGV,iBAAnF,C,CAEP;;;AACO,MAAMW,SAA8C,GAAGX,iBAAvD;;AAEA,MAAMY,wBAEX,GAAGZ,iBAFE;;AAIA,MAAMa,sBAAsB,GAAG,IAA/B","sourcesContent":["import React from 'react';\nimport { Animated, View, ViewProps, ImageProps, Image } from 'react-native';\nimport {\n  ScreenProps,\n  ScreenContainerProps,\n  ScreenStackProps,\n  ScreenStackHeaderConfigProps,\n  HeaderSubviewTypes,\n  SearchBarProps,\n} from './types';\n\nexport * from './types';\nexport { default as useTransitionProgress } from './useTransitionProgress';\nexport {\n  isSearchBarAvailableForCurrentPlatform,\n  executeNativeBackPress,\n} from './utils';\n\nlet ENABLE_SCREENS = true;\n\nexport function enableScreens(shouldEnableScreens = true): void {\n  ENABLE_SCREENS = shouldEnableScreens;\n}\n\nexport function screensEnabled(): boolean {\n  return ENABLE_SCREENS;\n}\n\n// @ts-ignore function stub, freezing logic is located in index.native.tsx\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function enableFreeze(shouldEnableReactFreeze = true): void {\n  // noop\n}\n\nexport class NativeScreen extends React.Component<ScreenProps> {\n  render(): JSX.Element {\n    let {\n      active,\n      activityState,\n      style,\n      enabled = ENABLE_SCREENS,\n      ...rest\n    } = this.props;\n\n    if (enabled) {\n      if (active !== undefined && activityState === undefined) {\n        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx\n      }\n      return (\n        <View\n          // @ts-expect-error: hidden exists on web, but not in React Native\n          hidden={activityState === 0}\n          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}\n          {...rest}\n        />\n      );\n    }\n\n    return <View {...rest} />;\n  }\n}\n\nexport const Screen = Animated.createAnimatedComponent(NativeScreen);\n\nexport const ScreenContext = React.createContext(Screen);\n\nexport const ScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> = View;\n\nexport const ScreenStack: React.ComponentType<ScreenStackProps> = View;\n\nexport const FullWindowOverlay = View;\n\nexport const ScreenStackHeaderBackButtonImage = (\n  props: ImageProps\n): JSX.Element => (\n  <View>\n    <Image resizeMode=\"center\" fadeDuration={0} {...props} />\n  </View>\n);\n\nexport const ScreenStackHeaderRightView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderLeftView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderCenterView = (\n  props: React.PropsWithChildren<ViewProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderSearchBarView = (\n  props: React.PropsWithChildren<SearchBarProps>\n): JSX.Element => <View {...props} />;\n\nexport const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> = View;\n\n// @ts-expect-error: search bar props have no common props with View\nexport const SearchBar: React.ComponentType<SearchBarProps> = View;\n\nexport const ScreenStackHeaderSubview: React.ComponentType<React.PropsWithChildren<\n  ViewProps & { type?: HeaderSubviewTypes }\n>> = View;\n\nexport const shouldUseActivityState = true;\n"]}

package/lib/commonjs/index.native.js

@@ -8,10 +8,14 @@ var _reactFreeze = require("react-freeze");
 
 var _processColor = _interopRequireDefault(require("react-native/Libraries/StyleSheet/processColor"));
 
+var _package = require("react-native/package.json");
+
 var _TransitionProgressContext = _interopRequireDefault(require("./TransitionProgressContext"));
 
 var _useTransitionProgress = _interopRequireDefault(require("./useTransitionProgress"));
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -33,6 +37,13 @@ function enableScreens(shouldEnableScreens = true) {
 let ENABLE_FREEZE = false;
 
 function enableFreeze(shouldEnableReactFreeze = true) {
+  const minor = parseInt(_package.version.split('.')[1]); // eg. takes 66 from '0.66.0'
+  // react-freeze requires react-native >=0.64, react-native from main is 0.0.0
+
+  if (!(minor === 0 || minor >= 64) && shouldEnableReactFreeze) {
+    console.warn('react-freeze library requires at least react-native 0.64. Please upgrade your react-native version in order to use this feature.');
+  }
+
   ENABLE_FREEZE = shouldEnableReactFreeze;
 } // const that tells if the library should use new implementation, will be undefined for older versions
 
@@ -97,12 +108,34 @@ const ScreensNativeModules = {
 
 };
 
+// This component allows one more render before freezing the screen.
+// Allows activityState to reach the native side and useIsFocused to work correctly.
+function DelayedFreeze({
+  freeze,
+  children
+}) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = _react.default.useState(false);
+
+  if (freeze !== freezeState) {
+    // setImmediate is executed at the end of the JS execution block.
+    // Used here for changing the state right after the render.
+    setImmediate(() => {
+      setFreezeState(freeze);
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactFreeze.Freeze, {
+    freeze: freeze ? freezeState : false
+  }, children);
+}
+
 function MaybeFreeze({
   freeze,
   children
 }) {
   if (ENABLE_FREEZE) {
-    return /*#__PURE__*/_react.default.createElement(_reactFreeze.Freeze, {
+    return /*#__PURE__*/_react.default.createElement(DelayedFreeze, {
       freeze: freeze
     }, children);
   } else {
@@ -117,19 +150,20 @@ function ScreenStack(props) {
       ...rest
     } = props;
 
-    const count = _react.default.Children.count(children);
+    const size = _react.default.Children.count(children); // freezes all screens except the top one
 
-    const childrenWithProps = _react.default.Children.map(children, (child, index) => {
-      return /*#__PURE__*/_react.default.createElement(_reactFreeze.Freeze, {
-        freeze: count - index > 2
-      }, child);
-    });
 
-    return /*#__PURE__*/_react.default.createElement(ScreensNativeModules.NativeScreenStack, rest, childrenWithProps);
+    const childrenWithFreeze = _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(DelayedFreeze, {
+      freeze: size - index > 1
+    }, child));
+
+    return /*#__PURE__*/_react.default.createElement(ScreensNativeModules.NativeScreenStack, rest, childrenWithFreeze);
   }
 
   return /*#__PURE__*/_react.default.createElement(ScreensNativeModules.NativeScreenStack, props);
-}
+} // Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+
 
 class Screen extends _react.default.Component {
   constructor(...args) {
@@ -183,10 +217,24 @@ class Screen extends _react.default.Component {
       }
 
       const processedColor = (0, _processColor.default)(statusBarColor);
-      return /*#__PURE__*/_react.default.createElement(AnimatedNativeScreen, _extends({}, props, {
+      return /*#__PURE__*/_react.default.createElement(MaybeFreeze, {
+        freeze: activityState === 0
+      }, /*#__PURE__*/_react.default.createElement(AnimatedNativeScreen, _extends({}, props, {
         statusBarColor: processedColor,
-        activityState: activityState,
-        ref: this.setRef,
+        activityState: activityState // This prevents showing blank screen when navigating between multiple screens with freezing
+        // https://github.com/software-mansion/react-native-screens/pull/1208
+        ,
+        ref: ref => {
+          var _ref$viewConfig, _ref$viewConfig$valid;
+
+          if (ref !== null && ref !== void 0 && (_ref$viewConfig = ref.viewConfig) !== null && _ref$viewConfig !== void 0 && (_ref$viewConfig$valid = _ref$viewConfig.validAttributes) !== null && _ref$viewConfig$valid !== void 0 && _ref$viewConfig$valid.style) {
+            ref.viewConfig.validAttributes.style = { ...ref.viewConfig.validAttributes.style,
+              display: false
+            };
+          }
+
+          this.setRef(ref);
+        },
         onTransitionProgress: !isNativeStack ? undefined : _reactNative.Animated.event([{
           nativeEvent: {
             progress: this.progress,
@@ -196,9 +244,7 @@ class Screen extends _react.default.Component {
         }], {
           useNativeDriver: true
         })
-      }), /*#__PURE__*/_react.default.createElement(MaybeFreeze, {
-        freeze: activityState === 0
-      }, !isNativeStack ? // see comment of this prop in types.tsx for information why it is needed
+      }), !isNativeStack ? // see comment of this prop in types.tsx for information why it is needed
       children : /*#__PURE__*/_react.default.createElement(_TransitionProgressContext.default.Provider, {
         value: {
           progress: this.progress,
@@ -322,8 +368,8 @@ module.exports = {
   },
 
   get SearchBar() {
-    if (_reactNative.Platform.OS !== 'ios') {
-      console.warn('Importing SearchBar is only valid on iOS devices.');
+    if (!_utils.isSearchBarAvailableForCurrentPlatform) {
+      console.warn('Importing SearchBar is only valid on iOS and Android devices.');
       return _reactNative.View;
     }
 
@@ -350,6 +396,8 @@ module.exports = {
   enableFreeze,
   screensEnabled,
   shouldUseActivityState,
-  useTransitionProgress: _useTransitionProgress.default
+  useTransitionProgress: _useTransitionProgress.default,
+  isSearchBarAvailableForCurrentPlatform: _utils.isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress: _utils.executeNativeBackPress
 };
 //# sourceMappingURL=index.native.js.map