Animation Theme

1.Introduction

Animation Theme is a bold and flexible React Native theme, best suited for developing high-quality apps with beautiful animations for both Android and iOS. The theme has several components that allow you custom, extend easily and performance optimized also.

2.Theme Features

  • Ready to Use Screens
    • Welcome
    • Sign In
    • Home
    • Menu

3.Technologies Used

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

  • React Navigation – Detail
    Start quickly with built-in navigators that deliver a seamless out-of-the box experience.
  • 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.
  • React Native Animatable – Detail
    Standard set of easy to use animations and declarative transitions for React Native.
  • React Native Interactable – Detail
    Experimental implementation of high performance interactable views in React Native.

4.Installation

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

4.2.How to install Animation 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: https://facebook.github.io/react-native/docs/getting-started.html

Step 1:  Installing

  • Unzip the downloaded code from Code Canyon or Gumroad.
  • 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 Animation Theme 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
    • 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/animationtheme/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. Let’s go through how to add and customise a screen or a component.

5.3.Add a new screen to Tab Navigator

  1. Create new screen by duplicating the BaseScreen.js inside screens folder
  2. Then rename the file and the class to “MyScreen” for example.
  3. Import the new file to TabIndex.js file then add the code to TabNavigator function to decide whether the app should render your screen.
  4. For more detail please take a look on React-Navigation official document for Tab Navigator

5.4.Add a new screen to Stack Navigator

  1. Create new screen by duplicating the BaseScreen.js inside screens folder
  2. Then rename the file and the class to “MyScreen” for example.
  3. Import the new file to the StackNavigator file then add the code to StackNavigator function to decide whether the app should render your screen.
  4. For more detail please take a look on React-Navigation official document for Stack Navigator

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

Leave A Comment?