App.js

import React from 'react';
import { Platform, UIManager } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// Local imports
import Root from './Root';
import Settings, { SettingsProvider } from './Settings';
import TagEditModal from './TagEditModal';

// RNGH
import { GestureHandlerRootView } from 'react-native-gesture-handler'

// Paper
import {
  Provider as PaperProvider,
  DefaultTheme,
} from 'react-native-paper';

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const StackNavigator = createNativeStackNavigator();

const mainTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    text: '#333',
  }
}

const App = () => (
  <PaperProvider theme={mainTheme}>
    <GestureHandlerRootView>
      <NavigationContainer>
        <SettingsProvider>
          <StackNavigator.Navigator screenOptions={{ headerShown: false, presentation: "card", animationEnabled: true }}>
            <StackNavigator.Screen name="Root" component={Root} />
            <StackNavigator.Screen name="Settings" component={Settings} />
            <StackNavigator.Screen name="Edit" component={TagEditModal} />
          </StackNavigator.Navigator>
        </SettingsProvider>
      </NavigationContainer>
    </GestureHandlerRootView>
  </PaperProvider>
);

export default App;