Pinterest UI Theme Docs


Pinterest is a bold and flexible React Native theme, best suited for developing high-quality Social App for both Android and iOS. The theme has several components that allow you custom, extend easily and performance optimized also.

2.Theme Features

  • Clean and Validated Code
    All the components use PropTypes for typechecking so a warning will be shown in the JavaScript console when you provide an invalid prop to a component.
  • Ready to Use Screens
    • Home
    • Modal More Actions
    • Pin Detail
    • Categories
    • Modal Search
    • Category Detail
    • Notifications
    • Inbox
    • Boards
    • Board Detail
    • Pins
    • Liked
    • Settings
  • All screenshots

3.Technologies Used

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

  • React Native Localization – Detail
    Support multiple languages

  • React Native Modal Wrapper – Detail
    Extends the react native Modal component, adding overlay clickable behavior and allowing swipe in and out in all directions

  • React Native Tab View – Detail
    A cross-platform Tab View component for React Native.
    This is a JavaScript-only implementation of swipeable tab views. It’s super customizable, allowing you to do things like coverflow.

  • React Native Tab Navigator – Detail
    A tab bar that switches between scenes, written in JS for cross-platform support. It works on iOS and Android.

  • React Native Vector Icon – Detail
    The icons library that is perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.


4.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.

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.


4.2.How to install Pinterest theme?

In order to setup for React Native (RN) template you should connect to the internet and install dependencies library. If you have not chanced to set it up with React Native, please take a look to the document here:

Step 1:  Installing

  • Unzip the downloaded code from Code Canyon.
  • Using the terminal, issue the following command.

npm install
This will install all the required modules for your app.

Step 2: Linking Libraries

Link your native dependencies:

$ react-native link

Done! All libraries with a native dependencies should be successfully linked to your iOS/Android project.

Step 3: Starting the server.

By using these command line:

npm start

  • To simulate for iOS
    • Method One:
      • Open the project in XCode from ios/[yourProject].xcodeproj
      • Hit button to simulate.
    • Method Two: 
      • In your terminal, type:
        react-native run-ios
  • To simulate for Android
    • Make sure you have an Android emulator installed and running.
    • In your terminal, type:
      react-native run-android


5.How to custom the theme

This part provides the steps and procedures to customise the theme

5.1.Rename App

Renaming any React Native app is strenous. But Pinterest theme 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
  • This process wipes out the launchscreen and app icon from your app. Hence you can restore them before moving ahead.iOS: Restore ios/Pinterest/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.

5.2.Theme structure

The above image shows folder structure of the theme. You’ll mostly work on components, screens folders and Languages, Route files. Let’s go through how to add and customise a screen or a component.

5.3.Add a new screen

  1. Create new screen by duplicating the BaseScreen.js inside screens folder
  2. Then rename the file and the class to “MyScreen” for example. Your MyScreen.js will look like the following image.

  3. Import the new file to Route.js file then add the code to _renderScene function to decide whether the app should render your screen.

  4. Active your new screen inside another screen “MyEbay.js” for example.

5.4.How to customize individual pages?

To customize individual pages, you need to go to the [your Project]/src/screens directory. This is where you will find the files for each page. For example, if you want to customize the home page, navigate to the screens folder and open the Home.js file.

Once opened, you’ll see that the page uses the <GridProductThumb> component to render each product category. So if you want to add a general styling for the <GridProductThumb> component, you have to update the appapp/components/product/GridProductThumb.js file.

5.5.How to Add Custom Styles to your Theme

Colors for the different components that make up each page can also be updated.

For example,  you can update the value in [your  Project]/src/styles/color.js

6.Packages Used

Suggest Edit