Duck APp

App.tsx

@@ -1,21 +1,19 @@
-import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import * as eva from '@eva-design/eva';
+import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
+import { NavigationContainer } from '@react-navigation/native';
+import { EvaIconsPack } from '@ui-kitten/eva-icons';
+import TabNavigator from './src/navigation/TabNavigator';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <>
+      <IconRegistry icons={EvaIconsPack} />
+      <ApplicationProvider {...eva} theme={eva.dark}>
+        <NavigationContainer>
+          <TabNavigator/>
+        </NavigationContainer>
+      </ApplicationProvider>
+    </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

app.json

@@ -8,7 +8,7 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#2196F3"
     },
     "updates": {
       "fallbackToCacheTimeout": 0

metro.config.js

@@ -0,0 +1,16 @@
+const { getDefaultConfig } = require('@expo/metro-config');
+
+module.exports = (async () => {
+    const {
+      resolver: { sourceExts, assetExts },
+    } = await getDefaultConfig(__dirname);
+    return {
+      transformer: {
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        assetExts: assetExts.filter(ext => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+      },
+    };
+  })();

package.json

@@ -8,11 +8,24 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@eva-design/eva": "^2.1.0",
+    "@expo/webpack-config": "^0.12.77",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.11",
+    "@react-navigation/native": "^5.9.4",
+    "@ui-kitten/components": "^5.1.0",
+    "@ui-kitten/eva-icons": "^5.1.0",
     "expo": "~41.0.1",
     "expo-status-bar": "~1.0.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-reanimated": "~2.1.0",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.0.0",
+    "react-native-svg": "12.1.0",
+    "react-native-svg-transformer": "^0.14.3",
     "react-native-web": "~0.13.12"
   },
   "devDependencies": {

src/components/Icons/BirdIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RenderProp } from '@ui-kitten/components/devsupport';
+import { ImageProps } from 'react-native';
+import { Icon } from '@ui-kitten/components';
+
+const BirdIcon: RenderProp<Partial<ImageProps>> = (props) => (
+    <Icon {...props} name='twitter-outline'/>
+);
+
+export default BirdIcon;

src/components/Icons/InfoIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RenderProp } from '@ui-kitten/components/devsupport';
+import { ImageProps } from 'react-native';
+import { Icon } from '@ui-kitten/components';
+
+const InfoIcon: RenderProp<Partial<ImageProps>> = (props) => (
+    <Icon {...props} name='info-outline'/>
+);
+
+export default InfoIcon;

src/components/Images/DuckImage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Duck from '../../../assets/duck.svg';
+
+const DuckImage: React.FC = (props) => <Duck style={styles.image} {...props}/>;
+
+const styles = StyleSheet.create({
+    image: {
+        width: 300,
+        height: 300,
+        marginVertical: 50,
+    },
+});
+
+export default DuckImage;

src/components/Images/DuckImage.web.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Image } from 'react-native';
+
+const DuckImage: React.FC = (props) => <Image style={styles.image} {...props} source={require('../../../assets/duck.svg')} />;
+
+const styles = StyleSheet.create({
+    image: {
+        width: 300,
+        height: 300,
+        marginVertical: 50,
+    },
+});
+
+export default DuckImage;

src/components/ScreenWrapper.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Layout } from '@ui-kitten/components';
+import { StyleSheet } from 'react-native';
+
+const ScreenWrapper: React.FC = ({children}) => (
+    <Layout style={styles.wrapper}>
+        {children}
+    </Layout>
+);
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+});
+
+export default ScreenWrapper;

src/navigation/BottomTabBar.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
+import BirdIcon from '../components/Icons/BirdIcon';
+import InfoIcon from '../components/Icons/InfoIcon';
+
+const BottomTabBar: React.FC<BottomTabBarProps> = ({ navigation, state }) => (
+    <BottomNavigation
+        selectedIndex={state.index}
+        onSelect={index => navigation.navigate(state.routeNames[index])}>
+        <BottomNavigationTab title='DUCK' icon={BirdIcon}/>
+        <BottomNavigationTab title='INFO' icon={InfoIcon}/>
+    </BottomNavigation>
+);
+
+export default BottomTabBar;

src/navigation/TabNavigator.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import BottomTabBar from './BottomTabBar';
+import DuckScreen from '../screens/DuckScreen';
+import InfoScreen from '../screens/InfoScreen';
+
+const { Navigator, Screen } = createBottomTabNavigator();
+
+const TabNavigator = () => (
+    <Navigator tabBar={props => <BottomTabBar {...props} />}>
+        <Screen name='Duck' component={DuckScreen}/>
+        <Screen name='Info' component={InfoScreen}/>
+    </Navigator>
+);
+
+export default TabNavigator;

src/screens/DuckScreen.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Text } from '@ui-kitten/components';
+import DuckImage from '../components/Images/DuckImage';
+import ScreenWrapper from '../components/ScreenWrapper';
+
+const DuckScreen = () => (
+    <ScreenWrapper>
+        <Text category="h1">Talk to me</Text>
+        <DuckImage/>
+    </ScreenWrapper>
+);
+
+export default DuckScreen;

src/screens/InfoScreen.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Layout, Text } from '@ui-kitten/components';
+import ScreenWrapper from '../components/ScreenWrapper';
+import { StyleSheet } from 'react-native';
+
+const InfoScreen = () => (
+    <ScreenWrapper>
+        <Text category='h1'>Rubber Duck Debugging</Text>
+        <Layout style={styles.textWrapper}>
+            <Text category="p1">
+                Explain to the duck what your code is supposed to do,
+                and then go into detail and explain your code line by line.
+                At some point you will tell the duck what you are doing next and
+                then realise that that is not in fact what you are actually doing.
+                The duck will sit there serenely, happy in the knowledge that it has helped
+                you on your way.
+            </Text>
+        </Layout>
+    </ScreenWrapper>
+);
+
+const styles = StyleSheet.create({
+    textWrapper: {
+        maxWidth: 500,
+    },
+});
+
+export default InfoScreen;

types.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+    import { SvgProps } from "react-native-svg";
+    const content: React.FC<SvgProps>;
+    export default content;
+}

webpack.config.js

@@ -0,0 +1,19 @@
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+const path = require('path')
+
+module.exports = async function(env, argv) {
+    const config = await createExpoWebpackConfigAsync(env, argv);
+    config.module.rules.forEach(r => {
+        if (r.oneOf) {
+            r.oneOf.forEach(o => {
+                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
+                    o.include = [
+                        path.resolve('.'),
+                        path.resolve('node_modules/@ui-kitten/components'),
+                    ]
+                }
+            })
+        }
+    })
+    return config;
+};