feat: introduce featureFlags struct & add controlledBottomTabs flag (#24)

## Description

This PR explores more comprehensive approach to handling library
behaviour configuration. Currently we have two configuration points:
`enableScreens` (which seems to not work so well) & `enableFreeze`.

This PR introduces (temporarily) third configuration point, which in
future is meant as the only configuration point.

Newly added `featureFlags` structure will contain all flags for
behaviour configuration & will be the only place to do it.

Currently only a single feature flag is added there & we'll move rest of
them in follow ups.

The `featureFlags` object contains additional logic to prevent
misconfiguration & changing the values more than a single time.

The `controlledBottomTabs` flag denotes whether the bottom tabs are
driven by JS or native side (who manages the navigation state) &
introduces changes in behaviour.


## Checklist

- [ ] Ensured that CI passes

Author: kkafar

src/components/BottomTabs.tsx

@@ -13,6 +13,7 @@ import {
   StyleSheet,
   type ViewProps,
 } from 'react-native';
+import featureFlags from '../flags';
 
 export interface BottomTabsProps extends ViewProps {
   // Events
@@ -38,7 +39,8 @@ function BottomTabs(props: BottomTabsProps) {
 
   const {
     onNativeFocusChange,
-    experimentalControlNavigationStateInJS = false,
+    experimentalControlNavigationStateInJS = featureFlags.experiment
+      .controlledBottomTabs,
     ...filteredProps
   } = props;
 

src/flags.ts

@@ -0,0 +1,72 @@
+const RNS_CONTROLLED_BOTTOM_TABS_DEFAULT = false;
+
+// TODO: Migrate freeze here
+
+/**
+ * Exposes information useful for downstream navigation library implementers,
+ * so they can keep reasonable backward compatibility, if desired.
+ *
+ * We don't mean for this object to only grow in number of fields, however at the same time
+ * we won't be very hasty to reduce it. Expect gradual changes.
+ */
+export const compatibilityFlags = {
+  /**
+   * Because of a bug introduced in https://github.com/software-mansion/react-native-screens/pull/1646
+   * react-native-screens v3.21 changed how header's backTitle handles whitespace strings in https://github.com/software-mansion/react-native-screens/pull/1726
+   * To allow for backwards compatibility in @react-navigation/native-stack we need a way to check if this version or newer is used.
+   * See https://github.com/react-navigation/react-navigation/pull/11423 for more context.
+   */
+  isNewBackTitleImplementation: true,
+
+  /**
+   * With version 4.0.0 the header implementation has been changed. To allow for backward compat
+   * with native-stack@v6 we want to expose a way to check whether the new implementation
+   * is in use or not.
+   *
+   * See:
+   * * https://github.com/software-mansion/react-native-screens/pull/2325
+   * * https://github.com/react-navigation/react-navigation/pull/12125
+   */
+  usesHeaderFlexboxImplementation: true,
+} as const;
+
+const _featureFlags = {
+  experiment: {
+    controlledBottomTabs: RNS_CONTROLLED_BOTTOM_TABS_DEFAULT,
+  },
+  stable: {},
+};
+
+/**
+ * Exposes configurable global behaviour of the library.
+ *
+ * Most of these can be overridden on particular component level, these are global switches.
+ */
+export const featureFlags = {
+  /**
+   *  Flags to enable experimental features. These might be removed w/o notice or moved to stable.
+   */
+  experiment: {
+    get controlledBottomTabs() {
+      return _featureFlags.experiment.controlledBottomTabs;
+    },
+    set controlledBottomTabs(value: boolean) {
+      if (
+        value !== _featureFlags.experiment.controlledBottomTabs &&
+        _featureFlags.experiment.controlledBottomTabs !==
+          RNS_CONTROLLED_BOTTOM_TABS_DEFAULT
+      ) {
+        console.error(
+          `[RNScreens] controlledBottomTabs feature flag modified for a second time; this might lead to unexpected effects`,
+        );
+      }
+      _featureFlags.experiment.controlledBottomTabs = value;
+    },
+  },
+  /**
+   * Section for stable flags, which can be used to configure library behaviour.
+   */
+  stable: {},
+};
+
+export default featureFlags;

src/index.tsx

@@ -48,10 +48,14 @@ export { default as BottomTabsScreen } from './components/BottomTabsScreen';
  */
 export {
   isSearchBarAvailableForCurrentPlatform,
-  compatibilityFlags,
   executeNativeBackPress,
 } from './utils';
 
+/**
+ * Flags
+ */
+export { compatibilityFlags, featureFlags } from './flags';
+
 /**
  * Hooks
  */

src/utils.ts

@@ -10,31 +10,3 @@ export function executeNativeBackPress() {
   BackHandler.exitApp();
   return true;
 }
-
-/**
- * Exposes information useful for downstream navigation library implementers,
- * so they can keep reasonable backward compatibility, if desired.
- *
- * We don't mean for this object to only grow in number of fields, however at the same time
- * we won't be very hasty to reduce it. Expect gradual changes.
- */
-export const compatibilityFlags = {
-  /**
-   * Because of a bug introduced in https://github.com/software-mansion/react-native-screens/pull/1646
-   * react-native-screens v3.21 changed how header's backTitle handles whitespace strings in https://github.com/software-mansion/react-native-screens/pull/1726
-   * To allow for backwards compatibility in @react-navigation/native-stack we need a way to check if this version or newer is used.
-   * See https://github.com/react-navigation/react-navigation/pull/11423 for more context.
-   */
-  isNewBackTitleImplementation: true,
-
-  /**
-   * With version 4.0.0 the header implementation has been changed. To allow for backward compat
-   * with native-stack@v6 we want to expose a way to check whether the new implementation
-   * is in use or not.
-   *
-   * See:
-   * * https://github.com/software-mansion/react-native-screens/pull/2325
-   * * https://github.com/react-navigation/react-navigation/pull/12125
-   */
-  usesHeaderFlexboxImplementation: true,
-};