init, happy hacking!

.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

.watchmanconfig

@@ -0,0 +1 @@
+{}

README.md

@@ -0,0 +1,65 @@
+## "From React Native to the App Store"
+
+### Daily Tarot for iPhone
+
+Daily Tarot: One Card Draw is a simple app I designed and built over the weekend in React Native as a personal exploration in releasing and distributing iOS apps with Expo. In short, Expo provides a great developer experience that makes launching apps really easy.
+
+This project can serve as a reference for developers who are working with Expo & React Native for the first time, or even as a foundation for someone who might be creating their own card game for iPhone. You are free to use and build upon this code however you want 👍
+
+#### Built with React Native
+
+<div style="display: flex">
+  <div style="flex: 1">
+    <img src="screenshot0.png" width="320" height="697" />
+  </div>
+  <div style="flex: 1">
+    <img src="screenshot3.png" width="320" height="697" />
+  </div>
+</div>
+
+<div style="display: flex">
+  <div style="flex: 1">
+    <img src="screenshot4.png" width="320" height="697" />
+  </div>
+  <div style="flex: 1">
+    <img src="screenshot1.png" width="320" height="697" />
+  </div>
+</div>
+
+### Development
+
+#### 1. Run the app locally with Expo
+
+```
+yarn install && yarn start
+```
+
+#### 2. Scan the QR code
+
+A QR code will appear in your terminal. Scan it using iOS Camera and your device will prompt you to open the app in Expo. Note: Install Expo on your device first.
+
+### Distribution
+
+#### 1. Build for iOS
+
+```
+expo build:ios
+```
+
+Building starts a [wizard-like build process](https://docs.expo.io/versions/latest/distribution/building-standalone-apps/#if-you-choose-to-build-for-ios) command line flow that requires you to authenticate your Expo account as well as your Apple Developer account (which is $99/year) – so make sure you have those. Expo automates a lot of the tedious work to prepare your app for distribution, which is nice.
+
+
+#### 2. Upload your build
+
+After completing the steps, you'll end up with an [Expo project](https://expo.io/@bennyschmidt/daily-tarot) that people can share around, and an iOS build uploaded to [App Store Connect](https://appstoreconnect.apple.com). When you login to App Store Connect, notice the "Submit For Review" button in the top-right.
+
+#### 3. Submit for Approval
+
+Before clicking that button, you can easily integrate TestFlight within App Store Connect if you want to invite users to a closed test to ensure everything works. When you're satisfied with the app and ready to launch to the masses, click the "Submit for Review" button and it's off to Apple for consideration on the App Store. Apple tends to be pretty strict in their review process about apps that aren't very unique or useful. With tarot being a rather saturated market, the app you actually submit might require more functionality than the one in this guide in order to get approved.
+
+Happy hacking and good luck!
+
+#### License
+
+Code files are MIT.
+Some creative assets have restrictions (see [src/assets/License.md](src/assets/License.md)).

app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "Daily Tarot",
+    "slug": "daily-tarot",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./src/assets/img/icon.png",
+    "splash": {
+      "image": "./src/assets/img/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#000000"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "bundleIdentifier": "com.bennyschmidt.dailytarot",
+      "supportsTablet": false
+    }
+  }
+}

babel.config.js

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

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "daily-tarot",
+  "version": "1.0.1",
+  "private": true,
+  "main": "src/index.js",
+  "dependencies": {
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-native-card-stack-swiper": "^1.1.0",
+    "react-native-iphone-x-helper": "^1.2.0",
+    "react-native-prompt": "^1.0.0",
+    "styled-components": "^4.1.3"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "author": {
+    "name": "Benny Schmidt",
+    "url": "https://github.com/exactchange"
+  }
+}

rn-cli.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  resolver: {
+    sourceExts: ['jsx', 'js']
+  }
+};

src/assets/License.md

@@ -0,0 +1,10 @@
+#### License
+
+Some images and icons in this directory were sourced from pixabay.com and freepik.com. Their licenses are linked below:
+
+- Pixabay: https://pixabay.com/service/license/
+- Freepik: https://www.freepik.com/standard-license
+
+The Medula One font was sourced from Google Fonts. Its license is linked below:
+
+- SIL Open Font License: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

src/assets/index.js

@@ -0,0 +1,6 @@
+/*
+ * Daily Tarot
+ * Authored by Benny Schmidt
+ */
+
+export * from './styles';

src/assets/styles/index.js

@@ -0,0 +1,159 @@
+/*
+ * Daily Tarot
+ * Authored by Benny Schmidt
+ */
+
+import { Dimensions } from 'react-native';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+import styled from 'styled-components';
+
+export const BackgroundImage = styled.Image`
+  width: 100%;
+  height: 100%;
+`;
+
+export const CardAnimation = styled.View`
+  position: absolute;
+  width: ${Dimensions.get('screen').width};
+  height: ${Dimensions.get('screen').height};
+  top: 20%;
+  left: ${Dimensions.get('screen').width * .075};
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1000;
+`;
+
+export const CardFace = styled.View`
+  border: 1px solid black;
+  border-radius: 10px;
+  width: ${Dimensions.get('screen').width * .85};
+  height: ${Dimensions.get('screen').width * .85 * 1.6};
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+`;
+
+export const CardImage = styled.Image`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+
+export const CardStackWrapper = styled.View`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Notification = styled.View`
+  position: absolute;
+  z-index: 1010;
+  width: ${Dimensions.get('screen').width * .9};
+  height: 60;
+  background-color: #111;
+  border-color: #d7bc85;
+  border-width: .5px;
+  border-style: solid;
+  border-radius: 1;
+  left: ${Dimensions.get('screen').width * .05};
+  top: 36;
+`;
+
+export const NotificationText = styled.Text`
+  position: absolute;
+  z-index: 1011;
+  color: white;
+  font-size: 22;
+  text-align: center;
+  text-shadow: 0 2px 0 black;
+  width: 100%;
+  height: 60;
+  left: 0;
+  top: 0;
+  line-height: 60;
+  padding-left: 10;
+  padding-right: 10;
+`;
+
+export const Overlay = styled.View`
+  position: absolute;
+  z-index: 2000;
+  background-color: #111;
+  border-color: #d7bc85;
+  border-width: .5px;
+  border-style: solid;
+  border-radius: 1;
+  width: ${Dimensions.get('screen').width * .85};
+  height: ${Dimensions.get('screen').width * .425 * 1.75};
+  top: ${Dimensions.get('screen').width * .85 / 2};
+  padding: 20px;
+  box-shadow: 0 0 50px rgba(0, 0, 0, 1);
+`;
+
+export const OverlayText = styled.Text`
+  width: 100%;
+  height: 100%;
+  font-size: 22;
+  color: white;
+  text-align: center;
+  line-height: ${Dimensions.get('screen').width * .425 * 1.75 - 60};
+`;
+
+export const Screen = styled.View`
+  flex: 1;
+  background-color: black;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: ${isIphoneX() ? '20%' : '10%'};
+`;
+
+export const Title = styled.Text`
+  text-align: center;
+  font-size: 30;
+  color: rgba(255, 255, 255, 0.25);
+  margin-top: 50;
+`;
+
+export const TouchableCard = styled.TouchableOpacity`
+  width: 100%;
+  height: 100%;
+`;
+
+export const TouchableClose = styled.TouchableOpacity`
+  position: absolute;
+  bottom: ${Dimensions.get('screen').width * .05};
+  width: ${Dimensions.get('screen').width * .85 * .9};
+  height: 40;
+  left: ${Dimensions.get('screen').width * .05};
+  margin: 0 auto;
+  background-color: white;
+`;
+
+export const TouchableCloseText = styled.Text`
+  color: black;
+  text-align: center;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 40;
+`;
+
+export const TouchableInfo = styled.TouchableOpacity`
+  position: absolute;
+  z-index: 1002;
+  width: 50;
+  height: 50;
+  bottom: 50;
+  border-color: #d7bc85;
+  border-width: .5px;
+  border-style: solid;
+  border-radius: 1;
+  transform: rotate(45deg);
+`;
+
+export const TouchableInfoText = styled.Text`
+  text-align: center;
+  transform: rotate(-45deg);
+  font-size: 24;
+  font-weight: 200;
+  color: #d7bc85;
+  line-height: 50;
+`;

src/consts.js

@@ -0,0 +1,35 @@
+/*
+ * Daily Tarot
+ * Authored by Benny Schmidt
+ */
+
+import { Dimensions } from 'react-native';
+
+export const screen = Dimensions.get(`screen`);
+
+export const screenHeight = screen.height;
+
+export const screenWidth = screen.width;
+
+export const cardStackStyle = {
+  position: `absolute`,
+  left: screenWidth * .075,
+  top: `25%`
+};
+
+export const font = {
+  src: require(`./assets/font/MedulaOne-Regular.ttf`),
+  style: {
+    fontFamily: `Medula One`
+  }
+};
+
+export const text = {
+  close: `Close`,
+  draw: `Draw`,
+  drawn: `You have drawn the`,
+  getMeaning: '?',
+  errorRetrieving: 'Error retrieving data.',
+  errorSaving: 'Error saving data.',
+  title: `Swipe to Draw`
+};