test: Refactor Test3212, add option to set config from scroll view screen (#3284)

## Description

This PR includes a small refactor for Test3212 that removes useCallback
in favor of regular functions, and adds a button to change
scrollEdgeEffect config right on the screen it is applied to - to have
more paths to test.

For instance, you can set the scrollEdgeEffect config to 'hard' on the
first Stack screen, push the second one with ScrollView, see the
configuration being applied, then click the button and see the effect
changed to 'hidden'.

Author: kmichalikk

apps/src/tests/Test3212/BottomTabsScenario.tsx

@@ -1,17 +1,23 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { SCROLL_EDGE_EFFECT_DEFAULTS, ScrollEdgeEffects, ScrollEdgeEffectsConfigContext } from "./context";
 import { NavigationContainer, NavigationIndependentTree } from "@react-navigation/native";
 import { BottomTabsContainer } from "../../shared/gamma/containers/bottom-tabs/BottomTabsContainer"
 import { Config } from "./Config";
 import { ScrollViewTemplate } from "./ScrollViewTemplate";
 import { ScrollView } from "react-native";
 
+function ConfigComponent() {
+  // Add ScrollView for automatic insets which are missing in BottomTabsScreen
+  return (
+    <ScrollView>
+      <Config title='Stack / scrollEdgeEffects:'/>
+    </ScrollView>
+  );
+}
+
 export function BottomTabsScenario() {
   const [config, setConfig] = useState<ScrollEdgeEffects>({ ...SCROLL_EDGE_EFFECT_DEFAULTS });
 
-  // Add ScrollView for automatic insets which are missing in BottomTabsScreen
-  const ConfigComponent = useCallback(() => <ScrollView><Config title='BottomTabs / scrollEdgeEffects:' /></ScrollView>, []);
-
   return (
     <NavigationIndependentTree>
       <ScrollEdgeEffectsConfigContext.Provider value={{ config, setConfig }}>

apps/src/tests/Test3212/ScrollViewTemplate.tsx

@@ -1,10 +1,16 @@
-import React, { ScrollView, Text } from "react-native";
+import React from "react";
+import { Button, ScrollView, Text } from "react-native";
+import { useScrollEdgeEffectsConfigContext } from "./context";
 
 export function ScrollViewTemplate() {
   const emoji = ['😎', '🍏', '👀', '🤖', '👾', '👨‍💻'];
+  const { setConfig }  = useScrollEdgeEffectsConfigContext();
 
   return (
-    <ScrollView>
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button title="Set effects to hidden" onPress={() => {
+        setConfig({ bottom: 'hidden', top: 'hidden', left: 'hidden', right: 'hidden' });
+      }}/>
       <Text style={{ fontSize: 21 }}>
         {Array.from({ length: 1000 }).map(_ => emoji[Math.floor(Math.random() * emoji.length)])}
       </Text>

apps/src/tests/Test3212/StackScenario.tsx

@@ -4,14 +4,18 @@ import { ConfigWithNavigation } from "./Config";
 import { NavigationContainer, NavigationIndependentTree } from "@react-navigation/native";
 import { ScrollViewTemplate } from './ScrollViewTemplate';
 import { SCROLL_EDGE_EFFECT_DEFAULTS, ScrollEdgeEffects, ScrollEdgeEffectsConfigContext } from './context';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
+
+function ConfigComponent() {
+  return (
+    <ConfigWithNavigation title='Stack / scrollEdgeEffects:'/>
+  );
+}
 
 export function StackScenario() {
   const Stack = createNativeStackNavigator();
   const [config, setConfig] = useState<ScrollEdgeEffects>({...SCROLL_EDGE_EFFECT_DEFAULTS});
 
-  const ConfigComponent = useCallback(() => <ConfigWithNavigation title='Stack / scrollEdgeEffects:'/>, []);
-
   return (
     <NavigationIndependentTree>
       <ScrollEdgeEffectsConfigContext.Provider value={{ config, setConfig }}>