Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zetavg/react-native-android-design-support

[WARNING: NOT MAINTAINED] React Native wrapper for Android Design Support Library, providing Material Design to modern and also older Android devices.
https://github.com/zetavg/react-native-android-design-support

Last synced: about 2 months ago
JSON representation

[WARNING: NOT MAINTAINED] React Native wrapper for Android Design Support Library, providing Material Design to modern and also older Android devices.

Awesome Lists containing this project

README 

        
# react-native-android-design-support [![npm version](https://img.shields.io/npm/v/react-native-android-design-support.svg?style=flat-square)](https://www.npmjs.com/package/react-native-android-design-support)



React Native wrapper for [Android Design Support Library](http://android-developers.blogspot.tw/2015/05/android-design-support-library.html), providing native Material Design to modern and also older Android devices.



- [x] Snackbar

- [ ] Navigation View

- [ ] Floating Action Button

- [x] TextInputLayout

- [x] TabLayout

- [x] CoordinatorLayout

- [x] AppBarLayout

- [ ] CollapsingToolbarLayout



## Installation



- Run `npm install react-native-android-design-support --save` to install using npm.



- Add the following two lines to `android/settings.gradle`:



```gradle

include ':react-native-android-design-support'

project(':react-native-android-design-support').projectDir = new File(settingsDir, '../node_modules/react-native-android-design-support/android')

```



- Edit `android/app/build.gradle` and add the annoated lines as below:



```gradle

...



dependencies {

    compile fileTree(dir: "libs", include: ["*.jar"])

    compile "com.android.support:appcompat-v7:23.0.1"

    compile "com.facebook.react:react-native:0.15.+"

    compile project(':react-native-android-design-support')  // <- Add this line

}

```



- Edit `MainActivity.java` (usually at `android/app/src/main/java/com//MainActivity.java`) and add the annoated lines as below:



```java

import com.facebook.react.LifecycleState;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactRootView;

import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;



import com.reactnativeandroiddesignsupport.DesignSupportPackage;        // <- Add this line



public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {



...



        mReactRootView = new ReactRootView(this);



        mReactInstanceManager = ReactInstanceManager.builder()

                .setApplication(getApplication())

                .setBundleAssetName("index.android.bundle")

                .setJSMainModuleName("index.android")

                .addPackage(new MainReactPackage())

                .addPackage(new DesignSupportPackage(this))             // <- Add this line

                .setUseDeveloperSupport(BuildConfig.DEBUG)

                .setInitialLifecycleState(LifecycleState.RESUMED)

                .build();



...

```



> Make sure to update the Android Support Repository to the latest in the Android SDK Manager.

> If it is not updated, the following error might occur while compiling the Android apk:

>

> ```

> A problem occurred configuring project ':react-native-android-design-support'.

> Could not resolve all dependencies for configuration ':react-native-android-design-support'.

> ```



## Usage



### Snackbar



```js

var SnackbarAndroid = require('react-native-android-design-support').SnackbarAndroid;



// Show an simple Snackbar with text:

SnackbarAndroid.show('Hello World!');



// Set the Snackbar duration:

SnackbarAndroid.show('Hello World!', SnackbarAndroid.LONG);



// Set an action and callback on the Snackbar:

SnackbarAndroid.show('Hi!', SnackbarAndroid.LONG, 'Show another "Hi!"', { yo: 'ya' }, (p) => { SnackbarAndroid.show(`Hi, ${JSON.stringify(p)}`) });

```



### TextInputLayout



```js



  



```



#### Props of `TextInputLayoutAndroid`



- `hint`

- `hintAnimationEnabled`

- `errorEnabled`

- `error`

- `counterEnabled`

- `counterMaxLength`



### TabLayout



The most common usage of `TabLayoutAndroid` is with `ViewPagerAndroid`:



```js

var ViewPagerWithTabExample = React.createClass({



  componentDidMount: function() {

    this.refs.tab.setViewPager(this.refs.viewPager);

  },



  render: function() {

    return (

      

        

        

          

            This is the first page.

          

          

            This is the second page.

          

          

            This is the third page.

          

        

      

    );

  }

});

```



> Note that the `tabs` attribute must be provided, so that the `TabLayout` can know whether the tab titles or icons to be displayed.



Also, you can use it directly by just specifying the `tabs`, or giving childrens as it tabs:



```js

var TabLayoutAndroid = require('react-native-android-design-support').TabLayoutAndroid;



...



render: function() {

  return (

    

      

        First Tab

      

      

        Second Tab

      

    

  );

}



...

```



> TODO: Handle custom events while using it independently.



#### Props of `TabLayoutAndroid`



- `style`

- `tabs`: `Array: { text: String }`: The data of the tabs, required if no chirdren is provided.

- `tabMode`: `String`: The tab mode, `fixed` or `scrollable`.

- `normalColor`: The text color for normal tab.

- `selectedColor`: The text color for selected tab.

- `selectedTabIndicatorColor`: The color for selected tab indicator.



### CoordinatorLayout



The following is an example of using `` with `` and ``, which shall be the most common usage.



```js

...



var {

  CoordinatorLayoutAndroid,

  AppBarLayoutAndroid,

  NestedScrollViewAndroid

} = require('react-native-android-design-support');



var CoordinatorLayoutBasicExample = React.createClass({



  componentDidMount: function() {

    // Set view behavior for the main content container. This will make

    // this.refs.contentContainer move with the 

    // in this.refs.coordinatorLayout.

    this.refs.coordinatorLayout.setAppBarScrollingViewBehavior(this.refs.contentContainer);

  },



  render: function() {

    return (

      

        

          {/* Any elements that are directily in  */}

          {/* will not use React Native's flexbox position. We need to      */}

          {/* specify `layoutWidthAndroid` and `layoutHeightAndroid`        */}

          {/* (= "matchParent" or "wrapContent") instead.                   */}

          

            {/* Elements directily in  can have an     */}

            {/* additional scrollFlagsAndroid prop. This must be an array   */}

            {/* of strings, specifying the scroll flags of this element.    */}

            {/* see https://goo.gl/RiAyDX for reference.                    */}

            

              Hi, I will be collapsed when scrolling down, and show again when scrolled to top.

            

            

              Hi, I will be collapsed when scrolling down, and show again when scrolling up.

            

            

              Hi, I will not be collapsed.

            

          

          

            {/* We'll need to use  because the      */}

            {/* default  dosen't support CoordinatorLayout.      */}

            's

              // heignt by ourself. Normally this will be

              // React.Dimensions.get('window').height - .

              height={React.Dimensions.get('window').height - (18)}

            >

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

              Quisque ac pretium nisi. Phasellus non diam vitae velit dictum ultricies. Praesent vel quam enim. Curabitur id turpis nec ante consequat dignissim. Pellentesque ac augue felis. Curabitur pulvinar viverra iaculis. Mauris vitae consequat mi. Fusce feugiat ac risus ac fringilla. Praesent sed diam nec sem porta scelerisque. Maecenas euismod sed tellus sodales iaculis. Vivamus sit amet felis vitae enim auctor sodales. Duis eleifend nec orci id laoreet. Nulla ullamcorper et est non aliquet. Etiam posuere urna eget ipsum malesuada dapibus. Aliquam ligula velit, venenatis id magna ac, luctus dignissim sem.

              Suspendisse a nulla imperdiet, blandit nunc nec, consequat massa. Proin fermentum sem sapien, sed fringilla tellus dapibus ut. Aliquam iaculis eu lorem non feugiat. Nulla dignissim erat et mi imperdiet, cursus ultrices velit eleifend. Vestibulum ac aliquam diam, et molestie felis. Vivamus facilisis ex et interdum suscipit. Phasellus dapibus rhoncus placerat. Nunc blandit leo eu volutpat pellentesque. Phasellus semper metus ut risus aliquam, vestibulum vestibulum lectus lacinia.

              Phasellus nec sapien sed ipsum consequat faucibus. Cras mollis leo elit, id pellentesque orci condimentum ut. Proin orci massa, feugiat id auctor quis, euismod sit amet purus. Sed et justo porta, volutpat massa vitae, auctor metus. Etiam tincidunt lacinia lectus sit amet iaculis. Proin tempor lectus at libero vestibulum, vitae auctor metus porttitor. Nunc egestas posuere elementum. Donec nec consequat velit. Quisque quis massa libero. Curabitur a sem a nisl sagittis dapibus consectetur eget nulla. Vivamus at ultricies elit, quis gravida ex.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

              Quisque ac pretium nisi. Phasellus non diam vitae velit dictum ultricies. Praesent vel quam enim. Curabitur id turpis nec ante consequat dignissim. Pellentesque ac augue felis. Curabitur pulvinar viverra iaculis. Mauris vitae consequat mi. Fusce feugiat ac risus ac fringilla. Praesent sed diam nec sem porta scelerisque. Maecenas euismod sed tellus sodales iaculis. Vivamus sit amet felis vitae enim auctor sodales. Duis eleifend nec orci id laoreet. Nulla ullamcorper et est non aliquet. Etiam posuere urna eget ipsum malesuada dapibus. Aliquam ligula velit, venenatis id magna ac, luctus dignissim sem.

              Suspendisse a nulla imperdiet, blandit nunc nec, consequat massa. Proin fermentum sem sapien, sed fringilla tellus dapibus ut. Aliquam iaculis eu lorem non feugiat. Nulla dignissim erat et mi imperdiet, cursus ultrices velit eleifend. Vestibulum ac aliquam diam, et molestie felis. Vivamus facilisis ex et interdum suscipit. Phasellus dapibus rhoncus placerat. Nunc blandit leo eu volutpat pellentesque. Phasellus semper metus ut risus aliquam, vestibulum vestibulum lectus lacinia.

              Phasellus nec sapien sed ipsum consequat faucibus. Cras mollis leo elit, id pellentesque orci condimentum ut. Proin orci massa, feugiat id auctor quis, euismod sit amet purus. Sed et justo porta, volutpat massa vitae, auctor metus. Etiam tincidunt lacinia lectus sit amet iaculis. Proin tempor lectus at libero vestibulum, vitae auctor metus porttitor. Nunc egestas posuere elementum. Donec nec consequat velit. Quisque quis massa libero. Curabitur a sem a nisl sagittis dapibus consectetur eget nulla. Vivamus at ultricies elit, quis gravida ex.

            

          

        

      

    );

  },

});



...

```



And this example includes the usage of `` and ``:



```js

...



var {

  CoordinatorLayoutAndroid,

  AppBarLayoutAndroid,

  TabLayoutAndroid,

  NestedScrollViewAndroid

} = require('react-native-android-design-support');



var { ViewPagerAndroid, ToolbarAndroid } = require('react-native');



var CoordinatorLayoutWithTabExample = React.createClass({



  componentDidMount: function() {

    this.refs.tab.setViewPager(this.refs.viewPager);

    this.refs.coordinatorLayout.setAppBarScrollingViewBehavior(this.refs.viewPager);

  },



  render: function() {

    return (

      

        

          

            

            

          



          

            

              

                This is the first tab.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

                Quisque ac pretium nisi. Phasellus non diam vitae velit dictum ultricies. Praesent vel quam enim. Curabitur id turpis nec ante consequat dignissim. Pellentesque ac augue felis. Curabitur pulvinar viverra iaculis. Mauris vitae consequat mi. Fusce feugiat ac risus ac fringilla. Praesent sed diam nec sem porta scelerisque. Maecenas euismod sed tellus sodales iaculis. Vivamus sit amet felis vitae enim auctor sodales. Duis eleifend nec orci id laoreet. Nulla ullamcorper et est non aliquet. Etiam posuere urna eget ipsum malesuada dapibus. Aliquam ligula velit, venenatis id magna ac, luctus dignissim sem.

                Suspendisse a nulla imperdiet, blandit nunc nec, consequat massa. Proin fermentum sem sapien, sed fringilla tellus dapibus ut. Aliquam iaculis eu lorem non feugiat. Nulla dignissim erat et mi imperdiet, cursus ultrices velit eleifend. Vestibulum ac aliquam diam, et molestie felis. Vivamus facilisis ex et interdum suscipit. Phasellus dapibus rhoncus placerat. Nunc blandit leo eu volutpat pellentesque. Phasellus semper metus ut risus aliquam, vestibulum vestibulum lectus lacinia.

                Phasellus nec sapien sed ipsum consequat faucibus. Cras mollis leo elit, id pellentesque orci condimentum ut. Proin orci massa, feugiat id auctor quis, euismod sit amet purus. Sed et justo porta, volutpat massa vitae, auctor metus. Etiam tincidunt lacinia lectus sit amet iaculis. Proin tempor lectus at libero vestibulum, vitae auctor metus porttitor. Nunc egestas posuere elementum. Donec nec consequat velit. Quisque quis massa libero. Curabitur a sem a nisl sagittis dapibus consectetur eget nulla. Vivamus at ultricies elit, quis gravida ex.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

                Quisque ac pretium nisi. Phasellus non diam vitae velit dictum ultricies. Praesent vel quam enim. Curabitur id turpis nec ante consequat dignissim. Pellentesque ac augue felis. Curabitur pulvinar viverra iaculis. Mauris vitae consequat mi. Fusce feugiat ac risus ac fringilla. Praesent sed diam nec sem porta scelerisque. Maecenas euismod sed tellus sodales iaculis. Vivamus sit amet felis vitae enim auctor sodales. Duis eleifend nec orci id laoreet. Nulla ullamcorper et est non aliquet. Etiam posuere urna eget ipsum malesuada dapibus. Aliquam ligula velit, venenatis id magna ac, luctus dignissim sem.

                Suspendisse a nulla imperdiet, blandit nunc nec, consequat massa. Proin fermentum sem sapien, sed fringilla tellus dapibus ut. Aliquam iaculis eu lorem non feugiat. Nulla dignissim erat et mi imperdiet, cursus ultrices velit eleifend. Vestibulum ac aliquam diam, et molestie felis. Vivamus facilisis ex et interdum suscipit. Phasellus dapibus rhoncus placerat. Nunc blandit leo eu volutpat pellentesque. Phasellus semper metus ut risus aliquam, vestibulum vestibulum lectus lacinia.

                Phasellus nec sapien sed ipsum consequat faucibus. Cras mollis leo elit, id pellentesque orci condimentum ut. Proin orci massa, feugiat id auctor quis, euismod sit amet purus. Sed et justo porta, volutpat massa vitae, auctor metus. Etiam tincidunt lacinia lectus sit amet iaculis. Proin tempor lectus at libero vestibulum, vitae auctor metus porttitor. Nunc egestas posuere elementum. Donec nec consequat velit. Quisque quis massa libero. Curabitur a sem a nisl sagittis dapibus consectetur eget nulla. Vivamus at ultricies elit, quis gravida ex.

              

            

            

              

                This is the second tab.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

                Quisque ac pretium nisi. Phasellus non diam vitae velit dictum ultricies. Praesent vel quam enim. Curabitur id turpis nec ante consequat dignissim. Pellentesque ac augue felis. Curabitur pulvinar viverra iaculis. Mauris vitae consequat mi. Fusce feugiat ac risus ac fringilla. Praesent sed diam nec sem porta scelerisque. Maecenas euismod sed tellus sodales iaculis. Vivamus sit amet felis vitae enim auctor sodales. Duis eleifend nec orci id laoreet. Nulla ullamcorper et est non aliquet. Etiam posuere urna eget ipsum malesuada dapibus. Aliquam ligula velit, venenatis id magna ac, luctus dignissim sem.

                Suspendisse a nulla imperdiet, blandit nunc nec, consequat massa. Proin fermentum sem sapien, sed fringilla tellus dapibus ut. Aliquam iaculis eu lorem non feugiat. Nulla dignissim erat et mi imperdiet, cursus ultrices velit eleifend. Vestibulum ac aliquam diam, et molestie felis. Vivamus facilisis ex et interdum suscipit. Phasellus dapibus rhoncus placerat. Nunc blandit leo eu volutpat pellentesque. Phasellus semper metus ut risus aliquam, vestibulum vestibulum lectus lacinia.

                Phasellus nec sapien sed ipsum consequat faucibus. Cras mollis leo elit, id pellentesque orci condimentum ut. Proin orci massa, feugiat id auctor quis, euismod sit amet purus. Sed et justo porta, volutpat massa vitae, auctor metus. Etiam tincidunt lacinia lectus sit amet iaculis. Proin tempor lectus at libero vestibulum, vitae auctor metus porttitor. Nunc egestas posuere elementum. Donec nec consequat velit. Quisque quis massa libero. Curabitur a sem a nisl sagittis dapibus consectetur eget nulla. Vivamus at ultricies elit, quis gravida ex.

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

                Quisque ac pretium nisi. Phasellus non diam vitae velit dictum ultricies. Praesent vel quam enim. Curabitur id turpis nec ante consequat dignissim. Pellentesque ac augue felis. Curabitur pulvinar viverra iaculis. Mauris vitae consequat mi. Fusce feugiat ac risus ac fringilla. Praesent sed diam nec sem porta scelerisque. Maecenas euismod sed tellus sodales iaculis. Vivamus sit amet felis vitae enim auctor sodales. Duis eleifend nec orci id laoreet. Nulla ullamcorper et est non aliquet. Etiam posuere urna eget ipsum malesuada dapibus. Aliquam ligula velit, venenatis id magna ac, luctus dignissim sem.

                Suspendisse a nulla imperdiet, blandit nunc nec, consequat massa. Proin fermentum sem sapien, sed fringilla tellus dapibus ut. Aliquam iaculis eu lorem non feugiat. Nulla dignissim erat et mi imperdiet, cursus ultrices velit eleifend. Vestibulum ac aliquam diam, et molestie felis. Vivamus facilisis ex et interdum suscipit. Phasellus dapibus rhoncus placerat. Nunc blandit leo eu volutpat pellentesque. Phasellus semper metus ut risus aliquam, vestibulum vestibulum lectus lacinia.

                Phasellus nec sapien sed ipsum consequat faucibus. Cras mollis leo elit, id pellentesque orci condimentum ut. Proin orci massa, feugiat id auctor quis, euismod sit amet purus. Sed et justo porta, volutpat massa vitae, auctor metus. Etiam tincidunt lacinia lectus sit amet iaculis. Proin tempor lectus at libero vestibulum, vitae auctor metus porttitor. Nunc egestas posuere elementum. Donec nec consequat velit. Quisque quis massa libero. Curabitur a sem a nisl sagittis dapibus consectetur eget nulla. Vivamus at ultricies elit, quis gravida ex.

              

            

            

              This is the third tab.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat tortor eget ligula luctus, eget porttitor purus imperdiet. Proin accumsan erat non accumsan convallis. Donec a cursus libero. Proin varius metus vitae nisl ornare tempor. Donec leo libero, scelerisque non lorem nec, dapibus pharetra elit. Maecenas ultrices dui nec euismod convallis. Quisque facilisis elementum luctus. Aenean tempus dui sed elit ultrices egestas. Phasellus consectetur ac ipsum nec eleifend. Donec et leo neque. In auctor, est eu placerat efficitur, tortor mauris congue urna, a rutrum dui ex id purus. Curabitur eget ultrices purus. Curabitur vulputate justo lacus, vitae varius nulla ullamcorper et. Donec consectetur molestie mollis.

            

          

        

      

    );

  },

});



...

```