App.tsx

import React from 'react';
import {
  StatusBar,
  StyleSheet,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import { NavigationTree } from './src/NavigationTree';
import { SettingsProvider } from './src/SettingsContext';
import { NavigationContainer } from '@react-navigation/native';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const safePadding = '5%';

  return (
    <View style={[backgroundStyle, styles.flex_1]}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={[{ paddingVertical: safePadding }, styles.flex_1]}>
        <NavigationContainer>
          <SettingsProvider>
            <NavigationTree />
          </SettingsProvider>
        </NavigationContainer>
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  flex_1: {
    flex: 1,
  },
});