March 2017 – Page 2

Android Working with Property Animation

March 21, 2017

/res/animator/fade_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially" >
    <objectAnimator
        android:duration="1000"
        android:propertyName="alpha"
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"/>
</set>

/res/animator/fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:duration="1000"
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"/>
</set>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Button buttonFadeIn,buttonFadeOut,buttonBlink,buttonZoomIn,buttonZoomOut,buttonRotate,buttonMove,buttonSlideUp,
    buttonSlideDown,buttonBounce;
    TextView textViewFadeIn,textViewFadeOut,textViewBlink,textViewZoomIn,textViewZoomOut,textViewRotate,textViewMove,textViewSlideUp,
    textViewSlideDown,textViewBounce;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        buttonFadeIn= (Button) findViewById(R.id.buttonFadeIn);
        buttonFadeOut= (Button) findViewById(R.id.buttonFadeOut);
        buttonBlink= (Button) findViewById(R.id.buttonBlink);
        buttonZoomIn= (Button) findViewById(R.id.buttonZoomIn);
        buttonZoomOut= (Button) findViewById(R.id.buttonZoomOut);
        buttonRotate= (Button) findViewById(R.id.buttonRotate);
        buttonMove= (Button) findViewById(R.id.buttonMove);
        buttonSlideUp= (Button) findViewById(R.id.buttonSlideUp);
        buttonSlideDown= (Button) findViewById(R.id.buttonSlideDown);
        buttonBounce= (Button) findViewById(R.id.buttonBounce);

        textViewFadeIn= (TextView) findViewById(R.id.textViewFadeIn);
        textViewFadeOut= (TextView) findViewById(R.id.textViewFadeOut);
        textViewBlink= (TextView) findViewById(R.id.textViewBlink);
        textViewZoomIn= (TextView) findViewById(R.id.textViewZoomIn);
        textViewZoomOut= (TextView) findViewById(R.id.textViewZoomOut);
        textViewRotate= (TextView) findViewById(R.id.textViewRotate);
        textViewMove= (TextView) findViewById(R.id.textViewMove);
        textViewSlideUp= (TextView) findViewById(R.id.textViewSlideUp);
        textViewSlideDown= (TextView) findViewById(R.id.textViewSlideDown);
        textViewBounce= (TextView) findViewById(R.id.textViewBounce);


        buttonFadeIn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this,
                        R.animator.fade_in);
                set.setTarget(textViewFadeIn);
                set.start();
            }
        });

        buttonFadeOut.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this,
                        R.animator.fade_out);
                set.setTarget(textViewFadeOut);
                set.start();
            }
        });

        buttonBlink.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(textViewBlink,View.ALPHA,0f,1f);
                objectAnimator.setDuration(600);
                objectAnimator.setRepeatMode(ValueAnimator.REVERSE);
                objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
                objectAnimator.setInterpolator(new AccelerateInterpolator());
                objectAnimator.start();
            }
        });

        buttonZoomIn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                PropertyValuesHolder propertyValuesHolder1=PropertyValuesHolder.ofFloat(View.SCALE_X,1f,2f);
                PropertyValuesHolder propertyValuesHolder2=PropertyValuesHolder.ofFloat(View.SCALE_Y,1f,2f);

                ObjectAnimator objectAnimator=ObjectAnimator.ofPropertyValuesHolder(textViewZoomIn,
                        propertyValuesHolder1,propertyValuesHolder2);

                objectAnimator.setDuration(1000);
                objectAnimator.start();
            }
        });


        buttonZoomOut.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                ValueAnimator valueAnimator1=ValueAnimator.ofFloat(1f,0.5f);
                valueAnimator1.setDuration(1000);
                valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewZoomOut.setScaleX((Float) animation.getAnimatedValue());
                    }
                });


                ValueAnimator valueAnimator2=ValueAnimator.ofFloat(1f,0.5f);
                valueAnimator2.setDuration(1000);
                valueAnimator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewZoomOut.setScaleY((Float) animation.getAnimatedValue());
                    }
                });


                AnimatorSet animatorSet=new AnimatorSet();
                animatorSet.playTogether(valueAnimator1,valueAnimator2);
                animatorSet.start();
            }
        });

        buttonRotate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // to perform rotate on center of the element
                // by default : pivotX=50 and pivotY=50
                textViewRotate.setPivotX(50);
                textViewRotate.setPivotY(50);

                ValueAnimator valueAnimator1=ValueAnimator.ofFloat(0,360);
                valueAnimator1.setDuration(600);
                valueAnimator1.setInterpolator(new CycleInterpolator(0.25f));
                valueAnimator1.setRepeatMode(ValueAnimator.RESTART);
                valueAnimator1.setRepeatCount(ValueAnimator.INFINITE);
                valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewRotate.setRotation((Float) animation.getAnimatedValue());
                    }
                });

                valueAnimator1.start();
            }
        });

        buttonMove.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ValueAnimator valueAnimator1=ValueAnimator.ofFloat(0f,150f);
                valueAnimator1.setDuration(1000);
                valueAnimator1.setRepeatMode(ValueAnimator.REVERSE);
                valueAnimator1.setRepeatCount(ValueAnimator.INFINITE);
                valueAnimator1.setInterpolator(new AccelerateInterpolator());

                valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewMove.setTranslationX((Float) animation.getAnimatedValue());
                    }
                });

                valueAnimator1.start();
            }
        });

        buttonSlideUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                textViewSlideUp.setPivotY(0);

                ValueAnimator valueAnimator1=ValueAnimator.ofFloat(1f,0f);
                valueAnimator1.setDuration(1000);
                valueAnimator1.setInterpolator(new AccelerateInterpolator());

                valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewSlideUp.setScaleY((Float) animation.getAnimatedValue());
                    }
                });

                valueAnimator1.start();
            }
        });

        buttonSlideDown.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textViewSlideDown.setPivotY(0);

                ValueAnimator valueAnimator1=ValueAnimator.ofFloat(0f,1f);
                valueAnimator1.setDuration(1000);
                valueAnimator1.setInterpolator(new AccelerateInterpolator());

                valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewSlideDown.setScaleY((Float) animation.getAnimatedValue());
                    }
                });

                valueAnimator1.start();
            }
        });

        buttonBounce.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                ValueAnimator valueAnimator1=ValueAnimator.ofFloat(0f,1f);
                valueAnimator1.setDuration(1000);
                valueAnimator1.setInterpolator(new BounceInterpolator());

                valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        textViewBounce.setScaleY((Float) animation.getAnimatedValue());
                    }
                });

                valueAnimator1.start();
            }
        });
    }
}

References
https://github.com/mhdr/AndroidSamples/tree/master/054

Android Working with BottomNavigationView

March 20, 2017

/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="iterator.ir.a053.MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/holo_green_light"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/black"
        app:menu="@menu/navigation_menu">

    </android.support.design.widget.BottomNavigationView>

</RelativeLayout>

/res/menu/navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/itemAdd"
        android:checkable="false"
        android:enabled="true"
        android:icon="@drawable/ic_add"
        android:title="Add"
        android:visible="true"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/itemEdit"
        android:checkable="false"
        android:enabled="true"
        android:icon="@drawable/ic_edit"
        android:title="Edit"
        android:visible="true"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/itemDelete"
        android:checkable="false"
        android:enabled="true"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        android:visible="true"
        app:showAsAction="ifRoom" />
</menu>

/res/drawable/nav_item_color_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" android:state_enabled="true" />
    <item android:drawable="@color/gray" android:state_enabled="false" />
</selector>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationView= (BottomNavigationView) findViewById(R.id.bottomNavigationView);

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                item.setChecked(true);

                switch (item.getItemId())
                {
                    case R.id.itemAdd:
                        Toast.makeText(MainActivity.this,"Add",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.itemEdit:
                        Toast.makeText(MainActivity.this,"Edit",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.itemDelete:
                        Toast.makeText(MainActivity.this,"Delete",Toast.LENGTH_SHORT).show();
                        break;
                }

                return true;
            }
        });
    }
}

References
https://github.com/mhdr/AndroidSamples/tree/master/053
https://www.youtube.com/watch?v=wcE7IIHKfRg
https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html
https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.8sgxtnkhb

React State of Components

March 19, 2017

/components/Home.tsx

import * as React from 'react'
export interface HomeProps {
    number?: number
}

export interface HomeState {
    number: number
}

export class Home extends React.Component<HomeProps,HomeState> {

    constructor(props: HomeProps) {
        super();
        this.state = {
            number: props.number
        };
    }

    public static defaultProps: Partial<HomeProps> = {
        number: 0
    };

    increaseNumber() {
        let newNumber: number;
        newNumber = this.state.number + 1;

        this.setState({
            number: newNumber
        });
    }

    render(): JSX.Element {
        return (
            <div>
                <p>Count : {this.state.number}</p>
                <button className="btn btn-primary" onClick={()=>{this.increaseNumber()}}>Increase Number</button>
            </div>
        );
    }
}

App.tsx

import * as React from 'react'
import {Home} from "./components/Home"

export interface AppProps { }


class App extends React.Component<AppProps,undefined> {
    render() {
        return (
            <div>
                <Home />
            </div>
        );
    }
}

export default App;

References
https://github.com/mhdr/ReactJSSamples/tree/master/007

Android Working with Thread

March 19, 2017

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Button buttonProgress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonProgress= (Button) findViewById(R.id.buttonProgress);

        buttonProgress.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                progressDialog.setTitle("Progress ...");
                progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                progressDialog.setMax(100);
                progressDialog.setProgress(0);
                progressDialog.show();

                final Thread thread=new Thread(new Runnable() {
                    @Override
                    public void run() {

                        synchronized (this)
                        {
                            int i = 0;

                            while (i < 101) {

                                progressDialog.setProgress(i);

                                try {
                                    wait(100);
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }

                                i++;
                            }

                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    progressDialog.hide();
                                }
                            });
                        }
                    }
                });

                thread.start();
            }
        });
    }
}

References
https://github.com/mhdr/AndroidSamples/tree/master/052

Android Progress Bar using ProgressDialog

March 19, 2017

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Button buttonProgress1;
    Button buttonProgress2;
    Button buttonProgress3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonProgress1 = (Button) findViewById(R.id.buttonProgress1);
        buttonProgress2 = (Button) findViewById(R.id.buttonProgress2);
        buttonProgress3 = (Button) findViewById(R.id.buttonProgress3);

        buttonProgress1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                progressDialog.setTitle("Progress 1 ...");
                progressDialog.setMax(100);
                progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                progressDialog.setProgress(0);
                progressDialog.show();

                final Thread thread = new Thread(new Runnable() {
                    @Override
                    public void run() {

                        synchronized (this) {
                            int i = 0;

                            while (i < 101) {

                                progressDialog.setProgress(i);

                                try {
                                    wait(100);
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }

                                i++;
                            }

                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    progressDialog.hide();
                                }
                            });
                        }
                    }
                });

                thread.start();
            }
        });


        buttonProgress2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                progressDialog.setTitle("Progress 2 ...");
                progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                progressDialog.setIndeterminate(true);
                progressDialog.setMax(100);
                progressDialog.setProgress(0);
                progressDialog.show();

                final Thread thread = new Thread(new Runnable() {
                    @Override
                    public void run() {

                        synchronized (this) {
                            int i = 0;

                            while (i < 101) {

                                progressDialog.setProgress(i);

                                try {
                                    wait(100);
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }

                                i++;
                            }

                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    progressDialog.hide();
                                }
                            });
                        }
                    }
                });

                thread.start();
            }
        });


        buttonProgress3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                progressDialog.setTitle("Progress 3 ...");
                //progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
                progressDialog.setMax(100);
                progressDialog.setProgress(0);
                progressDialog.show();

                final Thread thread = new Thread(new Runnable() {
                    @Override
                    public void run() {

                        synchronized (this) {
                            int i = 0;

                            while (i < 101) {

                                progressDialog.setProgress(i);

                                try {
                                    wait(100);
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }

                                i++;
                            }

                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    progressDialog.hide();
                                }
                            });
                        }
                    }
                });

                thread.start();
            }
        });
    }
}

References
https://github.com/mhdr/AndroidSamples/tree/master/051
https://developer.android.com/reference/android/widget/ProgressBar.html

Android AsyncTask

March 19, 2017

MyTask.java

public class MyTask extends AsyncTask<Void,Integer,String> {

    private Context context;
    private Button buttonDownload;
    private TextView textViewDownload;

    ProgressDialog progressDialog;

    public void setButtonDownload(Button button)
    {
        this.buttonDownload=button;
    }

    public void setTextViewDownload(TextView textView)
    {
        this.textViewDownload=textView;
    }

    public MyTask(Context context)
    {
        this.context=context;
    }

    @Override
    protected String doInBackground(Void... params) {

        int i=0;

        synchronized (this)
        {
            while (i<101)
            {
                try {
                    wait(100);
                    i++;
                    this.publishProgress(i);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }


        return "Download Completed.";
    }

    @Override
    protected void onPreExecute() {
        super.onPreExecute();

        buttonDownload.setEnabled(false);
        textViewDownload.setText("Downloading...");

        progressDialog=new ProgressDialog(context);
        progressDialog.setTitle("Downloading ....");
        progressDialog.setMax(100);
        progressDialog.setProgress(0);
        progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
        progressDialog.show();
    }

    @Override
    protected void onPostExecute(String s) {
        super.onPostExecute(s);

        textViewDownload.setText(s);
        buttonDownload.setEnabled(true);
        progressDialog.hide();
    }

    @Override
    protected void onProgressUpdate(Integer... values) {
        super.onProgressUpdate(values);

        Integer progress=values[0];
        progressDialog.setProgress(progress);
    }

    @Override
    protected void onCancelled(String s) {
        super.onCancelled(s);

        if (s.isEmpty())
        {
            textViewDownload.setText("Download Canceled.");
        }
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    TextView textViewDownload;
    Button buttonDownload;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textViewDownload= (TextView) findViewById(R.id.textViewDownload);
        buttonDownload= (Button) findViewById(R.id.buttonDownload);

        buttonDownload.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MyTask myTask=new MyTask(MainActivity.this);
                myTask.setButtonDownload(buttonDownload);
                myTask.setTextViewDownload(textViewDownload);
                myTask.execute();
            }
        });
    }
}

References
https://github.com/mhdr/AndroidSamples/tree/master/050

Android Working with ScrollView

March 19, 2017

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="iterator.ir.a049.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Text 1"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"/>


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Text 2"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"/>


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Text 3"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"/>

    </LinearLayout>

</ScrollView>

References
https://github.com/mhdr/AndroidSamples/tree/master/049

React Events

March 18, 2017

/components/CustomButton.tsx

import * as React from 'react'
import "./CustomButton.css"

 
export interface CustomButtonProps { number: number
}

export class CustomButton extends React.Component<CustomButtonProps,undefined> {

    private number: number;

    constructor(props:CustomButtonProps) {
        super();
        this.number = props.number;
    }

    public increaseNumber()
    {
        this.number +=1;
        console.log(this.number);
    }

    render() {
        return (
            <div>
                <button className="btn btn-primary bold" onClick={this.increaseNumber.bind(this)}>Increase Number</button>
            </div>
        );
    }
}

App.tsx

import * as React from 'react'
export interface AppProps { }
import {CustomButton} from "./components/CustomButton"

export default class App extends React.Component<AppProps,undefined> {
    render() {
        return (
            <div>
                <CustomButton number={10} />
            </div>
        );
    }
}

References
https://github.com/mhdr/ReactJSSamples/tree/master/006

npm usefull global packages

March 18, 2017

https://www.npmjs.com/package/node-sass
https://www.npmjs.com/package/csso
https://www.npmjs.com/package/uglify-js
https://www.npmjs.com/package/typescript

Install React Bootstrap

March 18, 2017

npm install --save react react-dom @types/react @types/react-dom

npm install --save react-bootstrap @types/react-bootstrap

References
https://react-bootstrap.github.io/getting-started.html