Part 1 - Code Scaffold

sketchthat · Jan 7, 2019 · 3b07400 · 3b07400
commit 3b07400
Show file tree

Hide file tree

Showing 13 changed files with 5,016 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
+.DS_Store
diff --git a/.watchmanconfig b/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/App.js b/App.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet, Platform, StatusBar } from 'react-native';
+import { Container, Content, Root, View, Spinner } from 'native-base';
+import TitleBar from './global/TitleBar';
+import Coin from './charts/Coin';
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: true,
+    };
+  }
+
+  componentWillMount() {
+    Expo.Font.loadAsync({
+      'Roboto': require('native-base/Fonts/Roboto.ttf'),
+      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
+    })
+    .then(() => {
+      this.setState({
+        loading: false,
+      });
+    });
+  }
+
+  render() {
+    const { loading } = this.state;
+
+    if (loading) {
+      return (<Spinner />);
+    }
+
+    return (
+      <Root>
+        <View style={styles.container}>
+          <Container>
+            <TitleBar title="Crypto Tracker" />
+            <Content>
+              <Coin />
+            </Content>
+          </Container>
+        </View>
+      </Root>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...Platform.select({
+      android: {
+        marginTop: StatusBar.currentHeight,
+      },
+    }),
+  },
+});
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Build a React Native Crypto Currency Tracker
+
+![React Native Application](./assets_readme/final-screen.png "React Native Application")
+
+Tutorial can be found on [Medium](https://medium.com/@michael.kimpton/build-a-react-native-crypto-currency-tracker-part-1-3ca404accbbb).
+
+Check out the [releases](https://github.com/sketchthat/react-native-crypto-tracker/releases) for the tutorial stages.
diff --git a/app.json b/app.json
@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "react-native-crypto-tracker",
+    "slug": "react-native-crypto-tracker",
+    "privacy": "public",
+    "sdkVersion": "31.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "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
+    }
+  }
+}
diff --git a/assets/icon.png b/assets/icon.png
diff --git a/assets/splash.png b/assets/splash.png
diff --git a/assets_readme/final-screen.png b/assets_readme/final-screen.png
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};
diff --git a/charts/Coin.js b/charts/Coin.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { Card, CardItem, Left, Right, Body, Text, Thumbnail } from 'native-base';
+
+class Coin extends Component {
+  render() {
+    return (
+      <Card>
+        <CardItem>
+          <Left>
+            <Thumbnail source={{uri: 'https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/128/color/btc.png'}} />
+            <Body>
+              <Text>BTC/USDT</Text>
+              <Text note>30m</Text>
+            </Body>
+          </Left>
+        </CardItem>
+        <CardItem>
+          <Text>Chart...</Text>
+        </CardItem>
+        <CardItem footer>
+          <Left>
+            <Text>5%</Text>
+          </Left>
+          <Body />
+          <Right>
+            <Text>$3,500.00</Text>
+          </Right>
+        </CardItem>
+      </Card>
+    );
+  }
+}
+
+export default Coin;
diff --git a/global/TitleBar.js b/global/TitleBar.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Header, Left, Body, Right, Title } from 'native-base';
+
+const TitleBar = ({title}) => (
+  <Header>
+    <Body>
+      <Left />
+      <Title>{title}</Title>
+      <Right />
+    </Body>
+  </Header>
+);
+
+export default TitleBar;
+
+TitleBar.propTypes = {
+  title: PropTypes.string,
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^31.0.2",
+    "native-base": "^2.10.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  },
+  "private": true
+}