import 'react-native-gesture-handler';
import {NavigationContainer, useFocusEffect} from '@react-navigation/native';
import React, {useRef} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Button, TextInput, View} from 'react-native';

const Stack = createStackNavigator();

function Thing({navigation}: any) {
  const ref = useRef(null);

  useFocusEffect(() => {
    setTimeout(() => {
      ref.current?.focus();
    }, 300);
  });

  return (
    <View style={{flex: 1, backgroundColor: 'wheat'}}>
      <TextInput
        ref={ref}
        style={{backgroundColor: 'white', borderWidth: 1, borderColor: 'black'}}
      />
      <Button
        title="navigate"
        onPress={() => {
          navigation.navigate('Second');
        }}
      />
    </View>
  );
}

function Second() {
  return <View style={{flex: 1, backgroundColor: 'red'}} />;
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{headerShown: false}}
        detachInactiveScreens={false}>
        <Stack.Screen name="Home" component={Thing} />
        <Stack.Screen name="Second" component={Second} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;