Add settings page

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as LoadingView } from './loadingView';
+export { default as PaddedView } from './paddedView';

src/components/loadingView.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { useTheme } from 'react-native-paper';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+const LoadingView = () => {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <ActivityIndicator size="large" color={colors.primary} />
+    </View>
+  );
+};
+
+export default LoadingView;

src/components/paddedView.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: '5%',
+  },
+  centered: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+const PaddedView = ({
+  children,
+  style,
+  centered,
+}: {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  centered?: boolean;
+}): React.JSX.Element => {
+  return (
+    <View style={[styles.container, centered && styles.centered, style]}>
+      {children}
+    </View>
+  );
+};
+
+export default PaddedView;