Medium UI Theme Docs

1.Introduction

All the features you’d want!

  • Home
  • Aticle List
  • Article Detail
  • Account
  • Notification
  • Search Page

Website & Video:

2.Technologies Used

The components of Medium are built using the core components of React Native and simplest needed libraries, such as:

  • React Native Navigation – Detail
    React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps.
  • React Native Vector IconDetail
    Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.

3.Installation

3.1.Installing and Setting up React Native Environment

1. Download and install Android Studio

Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps.

2. Install the AVD and HAXM

Choose Custom installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel HAXM)
  • Android Virtual Device

Then, click “Next” to install all of these components.

3. Install the Android 6.0 (Marshmallow) SDK

Android Studio installs the most recent Android SDK by default. React Native, however, requires the Android 6.0 (Marshmallow) SDK. To install it, launch the SDK Manager, click on “Configure” in the “Welcome to Android Studio” screen.

The SDK Manager can also be found within the Android Studio “Preferences” menu, under Appearance & Behavior → System Settings → Android SDK. Select “SDK Platforms” from within the SDK Manager, then check the box next to “Show Package Details”. Look for and expand the Android 6.0 (Marshmallow) entry, then make sure the
following items are all checked:

  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

Next, select “SDK Tools” and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build Tools” entry, then make sure that Android SDK Build-Tools 23.0.1 is selected.

Finally, click “Apply” to download and install the Android SDK and related build tools.

4. Set up the ANDROID_HOME environment variable

The React Native command line interface requires the ANDROID_HOME environment variable to be set up.

Go to Control Panel → System and Security → System → Change settings → Advanced System Settings → Environment variables → New, then enter the path to your Android SDK.
android_home

Restart the Command Prompt to apply the new environment variable.
Please make sure you export the correct path for ANDROID_HOME, if you did not install the Android SDK using Android Studio.

Source: https://www.eduonix.com/blog/web-programming-tutorials/installing-setting-react-native-environment/

3.2.How to install a new source

  • Unzip package.
  • Open terminal, cd to Mobile_source

cd Mobile_source

4.How to Build Your App

4.1.Rename App

Renaming any React Native app is strenous. But Medium App proves its flexibility for this approach. Follow below given steps to rename your app.

  • Rename the app name in following files.
    • package.json
    • index.ios.js
    • index.android.js
  • This process wipes out the launchscreen and app icon from your app. Hence you can restore them before moving ahead.iOS: Restore ios/Medium/Images.xcassets
    Android: Restore /android/app/src/main/res
  • Delete the iOS and android directories from your project.
  • Run following commands on your terminal:
    react-native upgrade
    react-native android
    react-native link
    
  • Overwrite all the files if it prompts.
  • Repeat CodePush deployment if you want to include it in your app.
  • Try simulating now.

4.2.Change App Icon in your App

Want to have your own icon for your app? This is very simple.
Follow below given steps to customize app-icon for your app.

  • Visit MakeAppIcon website
  • Enter the image of your choice to get logo of various dimensions
  • For iOS:
    • You should upload iOS icons to/ios/[yourProject]/Images.xcassets/AppIcon.appiconset/
  • For Android:
    • You should upload Android icons along with the folders named as:
      • mipmap-hdpi
      • mipmap-mdpi
      • mipmap-xhdpi
      • mipmap-xxhdpi
    • Upload these folders to /android/app/src/main/res/
  • Restart packager and rebuild your app.

4.3.Creating and Using a Custom Icon Font for Android

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
To customize the files being copied, add the following instead:

project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: “../../node_modules/react-native-vector-icons/fonts.gradle”

Option: Manually

Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).
Integrating library for getImageSource and ToolbarAndroid support

These steps are optional and only needed if you want to use the Icon.getImageSource function or using custom icons in the Icon.ToolbarAndroid component.

Edit android/settings.gradle to look like this (without the +):

rootProject.name = 'MyApp'
include ':app'
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Edit android/app/build.gradle (note: app folder) to look like this (without the +):

apply plugin: 'com.android.application'
android {
...
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-vector-icons')
}

Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit )(without the +):

package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}

Note: If you’re using React Native (Android) <= 0.17, follow this instructions

Option: With rnpm

$ react-native link

Note: Some users are having trouble using this method, try one of the others if you are too.

To config for IOS, see more: https://support.reactaz.com/knowledge-base/creating-and-using-a-custom-icon-font/

Source: https://github.com/oblador/react-native-vector-icons

4.4.Creating and Using a Custom Icon Font for IOS

Option: Manually

If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:

Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under “Add to targets” and that “Create groups” is checked if you add the whole folder.

Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won’t autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
XCode screenshot

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

If you want to use the TabBar/NavigatorIOS integration or use getImageSource, then you need to add RNVectorIcons.xcodeproj to Libraries and add libRNVectorIcons.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'RNVectorIcons', :path => 'node_modules/react-native-vector-icons'

Edit Info.plist as described above.

Option: With rnpm

$ react-native link

Note: Some users are having trouble using this method, try one of the others if you are too.

To configure for Android, see more: https://support.reactaz.com/knowledge-base/creating-and-using-a-custom-icon-font-for-android/

Suggest Edit