Updating README / R Navigation update / App.json desc

.gitignore

@@ -15,3 +15,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json

App.js

@@ -1,18 +1,24 @@
-import React from 'react';
-import { RootStack } from './config/router';
-import Sentry from 'sentry-expo';
+import React from "react";
+import { RootStack } from "./config/router";
+import Sentry from "sentry-expo";
+import { createAppContainer } from "react-navigation";
 
 // Remove this once Sentry is correctly setup.
 Sentry.enableInExpoDevelopment = false;
 
-Sentry.config('https://705f92b0edb44599b814955f3219c1cd@sentry.io/1367138').install();
+Sentry.config(
+  "https://705f92b0edb44599b814955f3219c1cd@sentry.io/1367138"
+).install();
+
+// App Containers
+const AppContainer = createAppContainer(RootStack);
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
   }
 
   render() {
-    return <RootStack />;
+    return <AppContainer />;
   }
 }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Stephen Kempin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,8 +1,9 @@
 # Lyrics King
 
-<!-- badges here -->
+![](https://img.shields.io/github/stars/SKempin/Lyrics-King-React-Native.svg?style=flat-square)
+![](https://img.shields.io/github/forks/SKempin/Lyrics-King-React-Native.svg?style=flat-square)
 
-An [React Native](https://facebook.github.io/react-native/) native app utilising [Expo](https://expo.io/), [React Navigation](https://reactnavigation.org) and fetching data from mutliple API's ([Deezer](https://developers.deezer.com/) and [Lyrics.OVH](https://www.lyrics.ovh)).
+A [React Native](https://facebook.github.io/react-native/) native app utilising [Expo](https://expo.io/), [React Navigation](https://reactnavigation.org) and fetching data from mutliple API's ([Deezer](https://developers.deezer.com/) and [Lyrics.OVH](https://www.lyrics.ovh)).
 
 Built as a personal training project for [React Native](https://facebook.github.io/react-native/). Designed in [Adobe XD](https://www.adobe.com/uk/products/xd.html). Design and development by [Stephen Kempin](https://www.stephenkempin.co.uk).
 

app.json

@@ -1,10 +1,10 @@
 {
   "expo": {
     "name": "Lyrics King",
-    "description": "An React Native native app utilising Expo, React Navigation, and fetching data from mutliple API’s (Deezer and Lyrics.OVH). Built as a personal training project for React Native. Designed in Adobe XD. Design and development by Stephen Kempin.",
+    "description": "Lyrics King is lyrics search app, fetching data from Deezer an Lyrics.ovh. Designed with Adobe XD and built with Expo, by Stephen Kempin. https://github.com/SKempin/Lyrics-King-React-Native",
     "icon": "./assets/images/icon.png",
     "slug": "lyrics-king",
-    "sdkVersion": "31.0.0",
+    "sdkVersion": "32.0.0",
     "platforms": ["ios", "android"],
     "orientation": "portrait",
     "privacy": "public",

components/Credits.js

@@ -1,10 +1,16 @@
-import React from 'react';
-import { Text, TouchableOpacity, StyleSheet, Linking, Image } from 'react-native';
-import { Amplitude } from 'expo';
-import { Analytics, Event } from 'expo-analytics';
+import React from "react";
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Linking,
+  Image
+} from "react-native";
+import { Amplitude } from "expo";
+import { Analytics, Event } from "expo-analytics";
 
 // Config
-import colours from '../config/colours';
+import colours from "../config/colours";
 // Constants
 const { portfolio } = Expo.Constants.manifest.extra.social;
 const ID = Expo.Constants.manifest.extra.googleAnalytics;
@@ -18,11 +24,19 @@ export const Credits = props => {
       onPress={() =>
         Linking.openURL(portfolio).then(() => {
           Amplitude.logEvent(`BUTTON: Credits - ${props.screen} Screen`);
-          analytics.event(new Event('Button', 'Tap', `Credits - ${props.screen} Screen`));
+          analytics.event(
+            new Event("Button", "Tap", `Credits - ${props.screen} Screen`)
+          );
         })
-      }>
-      <Image source={require('../assets/images/SK.png')} style={styles.creditsImage} />
-      <Text style={styles.creditsText}>Design and development by Stephen Kempin</Text>
+      }
+    >
+      <Image
+        source={require("../assets/images/SK.png")}
+        style={styles.creditsImage}
+      />
+      <Text style={styles.creditsText}>
+        Design and development{"\n"} by Stephen Kempin
+      </Text>
     </TouchableOpacity>
   );
 };
@@ -32,20 +46,19 @@ export default Credits;
 //  Styles
 const styles = StyleSheet.create({
   creditsContainer: {
-    flexDirection: 'row',
-    width: 170,
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   creditsText: {
     fontSize: 12,
     color: colours.secondaryGrey,
-    textAlign: 'left',
+    textAlign: "left",
     paddingLeft: 20
   },
   creditsImage: {
     width: 30,
     height: 30,
     opacity: 0.2,
-    alignSelf: 'flex-start'
+    alignSelf: "flex-start"
   }
 });

config/router.js

@@ -1,22 +1,32 @@
-import React from 'react';
-import { createDrawerNavigator, createStackNavigator, DrawerItems } from 'react-navigation';
-import { Ionicons } from '@expo/vector-icons';
-import { StyleSheet, Image, ScrollView, SafeAreaView, View } from 'react-native';
+import React from "react";
+import {
+  createDrawerNavigator,
+  createStackNavigator,
+  DrawerItems
+} from "react-navigation";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  StyleSheet,
+  Image,
+  ScrollView,
+  SafeAreaView,
+  View
+} from "react-native";
 
 //  Components
-import { SocialButton } from '../components/SocialButton';
+import { SocialButton } from "../components/SocialButton";
 //  Helper functions
-import handleShare from '../utils/shareHelper.js';
+import handleShare from "../utils/shareHelper.js";
 // Config
-import colours from './colours';
+import colours from "./colours";
 // Constants
-import { socialLinks } from '../lib/constants';
+import { socialLinks } from "../lib/constants";
 const { ...extra } = Expo.Constants.manifest.extra;
 
 //  Screens
-import SearchScreen from '../screens/SearchScreen';
-import DetailsScreen from '../screens/DetailsScreen';
-import AboutScreen from '../screens/AboutScreen';
+import SearchScreen from "../screens/SearchScreen";
+import DetailsScreen from "../screens/DetailsScreen";
+import AboutScreen from "../screens/AboutScreen";
 
 // Main stack
 export const MainStack = createStackNavigator({
@@ -41,11 +51,11 @@ export const MainStack = createStackNavigator({
     navigationOptions: ({ navigation }) => ({
       headerStyle: {
         borderBottomWidth: 0,
-        backgroundColor: 'rgba(0,0,0,0.2)',
+        backgroundColor: "rgba(0,0,0,0.2)",
         elevation: 0
       },
       headerTransparent: true,
-      headerTintColor: 'rgba(255,255,255,0.7)',
+      headerTintColor: "rgba(255,255,255,0.7)",
       headerRight: (
         <Ionicons
           name="md-share"
@@ -97,8 +107,14 @@ export const RootStack = createDrawerNavigator(
   {
     contentComponent: props => (
       <ScrollView style={{ backgroundColor: colours.primaryBlack }}>
-        <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
-          <Image style={styles.logo} source={require('../assets/images/lk-logo.png')} />
+        <SafeAreaView
+          style={styles.container}
+          forceInset={{ top: "always", horizontal: "never" }}
+        >
+          <Image
+            style={styles.logo}
+            source={require("../assets/images/lk-logo.png")}
+          />
 
           <DrawerItems
             {...props}
@@ -133,7 +149,7 @@ const styles = StyleSheet.create({
   logo: {
     width: 150,
     height: 150,
-    alignSelf: 'center',
+    alignSelf: "center",
     marginBottom: 30
   },
   itemStyle: {

package.json

@@ -13,11 +13,10 @@
     "ios"
   ],
   "devDependencies": {
-    "jest-expo": "^31.0.0",
-    "react-native-scripts": "1.14.0",
+    "jest-expo": "^32.0.0",
     "react-test-renderer": "16.3.1"
   },
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "main": "./node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "react-native-scripts start",
     "eject": "react-native-scripts eject",
@@ -29,12 +28,12 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "expo": "^31.0.4",
+    "expo": "^32.0.0",
     "expo-analytics": "^1.0.7",
     "format-duration": "^1.3.1",
     "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
-    "react-navigation": "^2.18.2",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-navigation": "^3.0.9",
     "rn-placeholder": "^1.3.0",
     "sentry-expo": "^1.11.0"
   }