react-native-screens/apps/src/tests/TestRepro.tsx at 818cde3d6d7d8aa4125280ed80acb5bfb70e17d3 · software-mansion/react-native-screens · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React from 'react';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { Button, Text, View } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const RootStack = createNativeStackNavigator();
const Tabs = createBottomTabNavigator();
const TabThreeStack = createNativeStackNavigator();

function RootStackHost() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="TabsHost" component={TabsHost} options={{
        headerShown: false,
      }} />
      <RootStack.Screen name="RootSheet" component={RootSheet} options={{
        presentation: 'formSheet',
        sheetAllowedDetents: [0.54, 1],
        headerShown: false,
        sheetCornerRadius: 12,
        contentStyle: {

        },
      }} />
    </RootStack.Navigator>
  );
}

function TabsHost() {
  const navigation = useNavigation();

  React.useEffect(() => {
    navigation.preload('RootSheet');
  }, [navigation]);

  return (
    <Tabs.Navigator>
      <Tabs.Screen name="TabOne" component={TabOne} />
      <Tabs.Screen name="TabTwo" component={TabTwo} />
      <Tabs.Screen name="TabThree" component={TabThree} listeners={({ route, navigation }) => {
        return {
          tabPress: (event) => {
            event.preventDefault();
            navigation.preload('TabThree');
            navigation.navigate('RootSheet');
          },
        };
      }} />
    </Tabs.Navigator>
  );
}

function RootHome() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, backgroundColor: 'seagreen' }}>
      <Text>RootHome</Text>
      <Button title="Open TabThree" onPress={() => navigation.navigate('TabsHost', { screen: 'TabThree' })} />
    </View>
  );
}

function RootSheet() {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, backgroundColor: 'seagreen' }}>
      <Text>RootSheet</Text>
      <Button title="Open TabTwo" onPress={() => navigation.navigate('TabsHost', { screen: 'TabTwo' })} />
      <Button title="Open TabThree" onPress={() => navigation.navigate('TabsHost', { screen: 'TabThree' })} />
      <Button title="Open TabThreeStackScreenOne" onPress={() => navigation.navigate('TabsHost', { screen: 'TabThree', params: { screen: 'TabThreeStackScreenOne' } })} />
      <Button title="Open TabThreeStackScreenTwo" onPress={() => navigation.navigate('TabsHost', { screen: 'TabThree', params: { screen: 'TabThreeStackScreenTwo' } })} />
      <Button title="Open TabThreeStackScreenOne OS" onPress={() => navigation.navigate('TabThreeStackScreenOne')} />
      <Button title="Open TabThreeStackScreenTwo OS" onPress={() => navigation.navigate('TabThreeStackScreenTwo')} />
    </View>
  );
}

function TabOne() {
  return (
    <View style={{ flex: 1, backgroundColor: 'orange' }}>
      <Text>TabOne</Text>
    </View>
  );
}

function TabTwo() {
  return (
    <View style={{ flex: 1, backgroundColor: 'lightblue' }}>
      <Text>TabTwo</Text>
    </View>
  );
}

function TabThree() {
  // return (
  //   <View style={{ flex: 1, backgroundColor: 'darkgreen' }}>
  //     <Text>TabThree</Text>
  //   </View>
  // );
  return (
    <TabThreeStackHost />
  );
}

function TabThreeStackScreenOne() {
  return (
    <View style={{ flex: 1, backgroundColor: 'orange' }}>
      <Text>TabThreeStackScreenOne</Text>
    </View>
  );
}

function TabThreeStackScreenTwo() {
  return (
    <View style={{ flex: 1, backgroundColor: 'lightblue' }}>
      <Text>TabThreeStackScreenTwo</Text>
    </View>
  );
}

function TabThreeStackHost() {
  return (
    <TabThreeStack.Navigator>
      <TabThreeStack.Screen name="TabThreeStackScreenOne" component={TabThreeStackScreenOne} />
      <TabThreeStack.Screen name="TabThreeStackScreenTwo" component={TabThreeStackScreenTwo} />
    </TabThreeStack.Navigator>

  );
}

function App() {
  return (
    <NavigationContainer navigationInChildEnabled>
      <RootStackHost />
    </NavigationContainer>
  );
}
export default App;