feat(fonts): Remove custom fonts from generated app in favor of expli…

…cit instructions (#342 by @markrickert)

boilerplate/app/components/bullet-item/bullet-item.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { View, ViewStyle, ImageStyle, TextStyle } from "react-native"
 import {Text} from "../text/text"
 import {Icon} from "../icon/icon"
-import { spacing } from "../../theme"
+import { spacing, typography } from "../../theme"
 
 const BULLET_ITEM: ViewStyle = {
   flexDirection: "row",
@@ -21,7 +21,7 @@ const BULLET: ImageStyle = {
 }
 const BULLET_TEXT: TextStyle = {
   flex: 1,
-  fontFamily: "Montserrat-Regular",
+  fontFamily: typography.primary,
   color: "#BAB6C8",
   fontSize: 15,
   lineHeight: 22,

boilerplate/app/components/checkbox/checkbox.story.tsx

@@ -38,7 +38,7 @@ storiesOf("Checkbox", module)
           {({ on, toggle }) => (
             <View>
               <Checkbox
-                text="We’re an App Design & Development Team. Experts in mobile & web technologies. We create beautiful, functional mobile apps and websites. "
+                text="We’re an App Design & Development Team. Experts in mobile & web technologies. We create beautiful, functional mobile apps and websites."
                 value={on}
                 multiline
                 onToggle={toggle}

boilerplate/app/screens/welcome-screen/welcome-screen.tsx.ejs

@@ -3,7 +3,7 @@ import { View, Image, ViewStyle, TextStyle, ImageStyle, SafeAreaView } from "rea
 import { useNavigation } from "@react-navigation/native"
 import { observer } from "mobx-react-lite"
 import { Button, Header, Screen, Text, Wallpaper } from "../../components"
-import { color, spacing } from "../../theme"
+import { color, spacing, typography } from "../../theme"
 const bowserLogo = require("./bowser.png")
 
 const FULL: ViewStyle = { flex: 1 }
@@ -13,7 +13,7 @@ const CONTAINER: ViewStyle = {
 }
 const TEXT: TextStyle = {
   color: color.palette.white,
-  fontFamily: "Montserrat",
+  fontFamily: typography.primary,
 }
 const BOLD: TextStyle = { fontWeight: "bold" }
 const HEADER: TextStyle = {

boilerplate/app/theme/fonts/index.ts

@@ -1,8 +1,12 @@
 import * as Font from "expo-font"
 
 export const initFonts = async () => {
-  await Font.loadAsync({
-    Montserrat: require("./Montserrat-Regular.ttf"),
-    "Montserrat-Regular": require("./Montserrat-Regular.ttf"),
-  })
+  // Refer to ./assets/fonts/custom-fonts.md for instructions.
+  // ...
+  // Welcome back! Just uncomment this and replace/append with your font file names!
+  // ⬇
+  // await Font.loadAsync({
+  //   Montserrat: require("./Montserrat-Regular.ttf"),
+  //   "Montserrat-Regular": require("./Montserrat-Regular.ttf"),
+  // })
 }

boilerplate/app/theme/typography.ts

@@ -1,18 +1,31 @@
 import { Platform } from "react-native"
 
 /**
- * Just the font names.
+ * You can find a list of available fonts on both iOS and Android here:
+ * https://github.com/react-native-training/react-native-fonts
+ *
+ * If you're interested in adding a custom font to your project,
+ * check out the readme file in ./assets/fonts/ then come back here
+ * and enter your new font name. Remember the Android font name
+ * is probably different than iOS.
+ * More on that here:
+ * https://github.com/lendup/react-native-cross-platform-text
  *
  * The various styles of fonts are defined in the <Text /> component.
  */
 export const typography = {
   /**
    * The primary font.  Used in most places.
    */
-  primary: Platform.select({ ios: "Montserrat", android: "Montserrat" }),
+  primary: Platform.select({ ios: "Helvetica", android: "normal" }),
 
   /**
    * An alternate font used for perhaps titles and stuff.
    */
-  secondary: Platform.select({ ios: "Montserrat", android: "Montserrat" }),
+  secondary: Platform.select({ ios: "Arial", android: "sans-serif" }),
+
+   /**
+   * Lets get fancy with a monospace font!
+   */
+  code: Platform.select({ ios: "Courier", android: "monospace" }),
 }

boilerplate/assets/fonts/custom-fonts.md

@@ -0,0 +1,24 @@
+# Instructions for adding custom fonts to your ignite-boswer app:
+
+## For Expo Projects
+
+You're lucky. Most of the work is done for you. Just download the `TTF` or `OTF` files you want to use, place them in `./app/theme/fonts/` and load them in the `index.ts` file in that same directory.
+
+ignote-bowser integrated `expo-fonts` according to [this guide](https://docs.expo.io/versions/latest/sdk/font/).
+
+## For Non-Expo Projects
+
+1. Find a font in `TTF` or `OTF` format that you like and put it in `./assets/fonts/`. I picked [this one](https://fonts.google.com/specimen/Shadows+Into+Light).
+2. Now run `npx react-native link`. Even though we're past react native 0.60 we can still use this command to link the fonts. This is a one-way operation. You'll have to remove fonts yourself later if you want to remove them from your app.  This will add items to your xcode project and `Info.plist` file as well as putting some files in place for android to bundle (specifically, it will move the font files to `./android/app/src/main/assets/).
+3. Both iOS and Android changes must be committed to source control, but sometimes other common libraries like `react-native-vector-icons` may mess with this process and add some fonts you don't intend to ship. Make sure to review these changes carefully before pushing any changes to source control.
+4. The tricky part is next: knowing what font family to use. iOS uses the family name like `{fontFamily: 'ShadowsIntoLight'}` whereas on android, you must include all the different variations of the font you will use and reference them by their *filename*. So I downloaded `ShadowsIntoLight-Regular.ttf` that means android must use `{fontFamily: 'ShadowsIntoLight-Regular'}` (yes, it's case sensitive 🙄). [There are components to help you deal with this](https://github.com/lendup/react-native-cross-platform-text) or you can roll your own based on your needs and something like:
+
+```
+const CUSTOM_FONT_TEXT: TextStyle = {
+  fontFamily: Platform.select({
+    ios: "ShadowsIntoLight", // The font family name
+    android: "ShadowsIntoLight-Regular", // The file name
+  }),
+  // ... whatever else
+}
+```

boilerplate/react-native.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  assets: ["./app/theme/fonts/"],
+  assets: ["./assets/fonts/"],
 }