test: Refactor Test3212, add option to set config from scroll view screen

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 }}>