App Created and Checked in

App.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ErrorBoundary from "./components/ErrorBoundary";
+import MainScreen from './components/MainScreen';
+
+export default function App() {
+  return (
+    <ErrorBoundary>
+      <MainScreen />
+    </ErrorBoundary>
+  );
+}

app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "MorseCodeTranslator",
+    "slug": "MorseCodeTranslator",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

assets/morseCode.json

@@ -0,0 +1,40 @@
+{
+    "KeyValuePairs": [
+        {"key": ".-", "value": "A"},
+        {"key": "-...", "value": "B"},
+        {"key": "-.-.", "value": "C"},
+        {"key": "-..", "value": "D"},
+        {"key": ".", "value": "E"},
+        {"key": "..-.", "value": "F"},
+        {"key": "--.", "value": "G"},
+        {"key": "....", "value": "H"},
+        {"key": "..", "value": "I"},
+        {"key": ".---", "value": "J"},
+        {"key": "-.-", "value": "K"},
+        {"key": ".-..", "value": "L"},
+        {"key": "--", "value": "M"},
+        {"key": "-.", "value": "N"},
+        {"key": "---", "value": "O"},
+        {"key": ".--.", "value": "P"},
+        {"key": "--.-", "value": "Q"},
+        {"key": ".-.", "value": "R"},
+        {"key": "...", "value": "S"},
+        {"key": "-", "value": "T"},
+        {"key": "..-", "value": "U"},
+        {"key": "...-", "value": "V"},
+        {"key": ".--", "value": "W"},
+        {"key": "-..-", "value": "X"},
+        {"key": "-.--", "value": "Y"},
+        {"key": "--..", "value": "Z"},
+        {"key": ".----", "value": "1"},
+        {"key": "..---", "value": "2"},
+        {"key": "...--", "value": "3"},
+        {"key": "....-", "value": "4"},
+        {"key": ".....", "value": "5"},
+        {"key": "-....", "value": "6"},
+        {"key": "--...", "value": "7"},
+        {"key": "---..", "value": "8"},
+        {"key": "----.", "value": "9"},
+        {"key": "-----", "value": "0"}
+    ]
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/AppHeading.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+class AppHeading extends Component {
+    render(props) {
+        return (
+            <Text style={styles.header}>
+                {this.props.customTitle}
+            </Text>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    header: {
+        marginTop: 15,
+        fontSize: 26,
+        fontWeight: 'bold',
+        color: '#2580c0'
+      }
+});
+
+export default AppHeading

components/ErrorBoundary.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    logErrorToMyService(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children; 
+  }
+}
+
+export default ErrorBoundary

components/MainScreen.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import AppHeading from './AppHeading';
+import TranslationLogic from './TranslationLogic';
+
+class MainScreen extends React.Component { 
+    constructor() {
+        super()
+        this.state = {
+            morseCodeText: '',
+            translatedText: ''            
+        }
+    }
+
+    Translate() {
+      // Translate 
+      var translatedMorseCode = TranslationLogic(this.state.morseCodeText);        
+
+      // Update the result Text
+      this.setState( {translatedText: translatedMorseCode});
+    }
+
+    render() { 
+      return (
+        <View style={styles.container}>
+
+            {/* Custom Title Text Component */}
+            <AppHeading customTitle="Morse Code Translator" />
+
+            <View style={styles.instructions}>
+              <Text>. = Dot</Text>
+              <Text>- = Dash</Text>
+              <Text>|| = Break</Text>
+            </View>
+
+            <View style={styles.inputSection}>
+
+              <Text>Enter Morse Code into the textbox below</Text>
+
+              <TextInput 
+                onChangeText={(value) => this.setState({ morseCodeText: value})}
+                placeholder="...||---||..."
+                style={styles.textbox} 
+                underlineColorAndroid='transparent' 
+                />
+
+              <Button 
+                  titleStyle={styles.translateButton} 
+                  type="outline"
+                  onPress={this.Translate.bind(this)}
+                  title="Translate">
+              </Button>
+
+              <Text style={styles.resultSection}>
+                  {this.state.translatedText}
+              </Text>
+
+            </View>
+        </View>    
+      );
+    }
+  }
+
+  // Styles
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: "flex-start",
+      marginTop: 20
+    },
+    instructions: {
+      marginTop: 10,
+      justifyContent: "flex-start"
+    },
+    inputSection: {
+      height: 100,
+      marginTop: 15,
+
+    },
+    translateButton: {
+        borderWidth: 1,
+        borderColor: '#000',
+        borderRadius: 8,
+        marginTop: 15
+    },
+    textbox: {
+        height: 40,
+        width: 250,
+        borderColor: 'gray',
+        borderWidth: 1,
+        backgroundColor: '#fff',
+        marginBottom: 8,
+        padding: 5
+      },
+      resultSection: {
+          marginTop: 15,
+          fontSize: 18
+      }
+  });
+
+  export default MainScreen

components/TranslationLogic.js

@@ -0,0 +1,42 @@
+/*
+    Takes a string of dots, dashes, and pipes and returns it's English equivalent.
+    Patterns not found in the defined list (morseCode.json) will be ignored.
+*/
+function Translate(morseCodeText) {
+
+    if (morseCodeText == null || morseCodeText == '')
+    {
+        return '';
+    }
+
+    const DELIMITER = '||'
+
+    // Load the mapping
+    var morseCode = require('../assets/morseCode.json');
+
+    // Split the input string by the delimiter
+    var splitParts = morseCodeText.trim().split(DELIMITER);
+    var translatedTextValue = '';
+
+    for(let i = 0; i < splitParts.length ; i++)
+    {
+        var morseCodeItem = splitParts[i];
+        if (morseCodeItem != '')
+        {
+            // Look for a match
+            var matchingTranslation = morseCode.KeyValuePairs.find(x=> x.key==morseCodeItem);
+            if (matchingTranslation != null)
+            {
+                translatedTextValue += matchingTranslation.value;
+            }
+        }
+        else
+        {
+            // Add a space
+            translatedTextValue += ' ';
+        }
+    }
+    return translatedTextValue;    
+}
+
+module.exports = Translate