react-native-typescript-material-ui-collection

Typescript material ui collection

Here you can see a Created by me and some hand picked collection of material components from various ui libraries. The goal is making ui development easy and seamless (Ui/ux itself with material design rules and Coding Experience) For now, components are in a limited number but i'm working on increasing their number to fulfill all ui/ux needed components

Table of contents

• Installation
• Components and Utils
  • Material Colors
  • Material Container
  • Material Collapsible Toolbar Container
  • Material Backdrop
  • Material Vertical Linear
  • Material Horizontal Linear
  • Material Card
  • Material Toolbar
  • Material Bottom Tabbar
  • Material Text Input
  • Material Progress
  • Material Buttons
  • Material FAB
  • Material Checkbox
  • Material Switch
  • Material Radio Group

Installation

The library is installed and linked by default inside my boilerplate ignite-boilerplate-andross-typescript

If you have an ignite project you can add it by this command :

ignite add material-ui

You can also install it standalone by below commands :

npm install react-native-material-textfield react-native-vector-icons react-native-typescript-material-ui-collection react-native-material-ripple --save
react-native link

Recommended react-native version is >0.56

But if you using older versions and not configured typescript on it use below link

https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native

Components and Utils

Material Colors

I just converted www.materialui.co/colors colors to an object for easier use of these colors

Usage :

    import {MaterialColors} from 'react-native-typescript-material-ui-collection';
     MaterialColors.colorName.CcolorTone
     eg:
     MaterialColors.deepPurple.C400 //returns: #7E57C2 as string

Material Container

This component is a full width/height view for container view you can use it for more ui/ux code readability

#### Usage :

    import {MaterialContainer} from 'react-native-typescript-material-ui-collection';
     <MaterialContainer
       isRoot // if you set this prop true , your component will have no padding and you can render a toolbar view at top of it the default padding is 16
       toolbar={() => <MaterialToolbar
                           leftIcon='menu'
                           iconsColor='white'
                           color='purple'
                           content={() => <MaterialToolbarContent color='white' haveTypeMode={true} text='title'/>}
                       />}> // this view will render at top of the view if you set isRoot true
         <MaterialContainer
          // for using inside a root have 16 dp padding inside
         >
         </MaterialContainer>
     </MaterialContainer>

Props

          isRoot: boolean // if you set this prop true , your component will have no padding and you can render a toolbar view at top of it the default padding is 16
          toolbar:React.ReactNode // this view will render at top of the view if you set isRoot true

Material Collapsible Toolbar Container

This is a pure js material collapsible toolbar container

Usage :

The exact code of above gif

import * as React from 'react'
import {Component} from 'react';
import {Image, Text, View} from 'react-native'
import {MaterialCollapsibleToolbarContainer} from 'react-native-typescript-material-ui-collection'
 
export default class LaunchScreen extends Component {
  componentWillMount() {
  }
 
  renderContent = () => (
    <View>
      {new Array(40).fill().map((_, i) => (
        <View 
          key={i}
          style={{
            backgroundColor: '#F5F5F5',
            padding: 10,
            borderBottomWidth: 1,
            borderBottomColor: '#E5E5E5'
          }}
        >
          <Text>{`Item ${i + 1}`}</Text>
        </View>
      ))}
    </View>
  );
 
  renderCollapsedToolbarContent = () => <Image
    source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
 
    style={{
      width: 50,
      height: 50,
      borderRadius: 25,
      overflow: 'hidden'
    }}/>;
 
  render() {
    return (
      <MaterialCollapsibleToolbarContainer
        renderContent={this.renderContent}
        imageSource='https://lorempixel.com/400/300/'
        collapsedNavBarBackgroundColor='#009688'
        translucentStatusBar
        showsVerticalScrollIndicator={false}
        textColor='white'
        renderCollapsedToolbarContent={this.renderCollapsedToolbarContent}
        leftButtonIcon='menu'
        onLeftIconPress={() => console.log('onlefticonpress')}
        title="Title"
        // toolBarHeight={300}
      />
    );
  }
}

Props :

  collapsedNavBarBackgroundColor?: string,
  imageSource?: string,
  onContentScroll?(): void,
  renderContent?(): React.ReactNode,
  renderCollapsedToolbarContent?():React.ReactNode, // this component will be rendered on the toolbar 
  toolBarHeight?: number,
  translucentStatusBar?: boolean,
  textColor?: string,
  leftButtonIcon?: string,
  onLeftIconPress?(): void,
  rightButtonIcon?: string,
  onRightIconPress?(): void

Material Backdrop

I tried to create this component using material.io guidelines in this link

Usage :

  import * as React from 'react'
  import {Component} from 'react';
  import {connect} from 'react-redux'
  import {MaterialBackdrop} from "react-native-typescript-material-ui-collection";
  import {Image, Text, View} from "react-native";
  
  class ScreenName extends Component {
    constructor(props) {
      super(props);
      this.state = {isExpanded: false}
    }
  
    render() {
      return (
        <MaterialBackdrop
          revealComponent={()=>this.renderRevealComponent()}
          leftButtonIcon='menu'
          expandedTitle='Expanded'
          collapsedTitle='Collapsed'
          content={()=>this.renderContent('black')}
          textColor='white'
          subHeaderText='subheader'
          backdropBackgroundColor='purple'
          contentBackgroundColor='white'
          subheaderTextColor='#212121'
        />
      )
    }
    renderRevealComponent=()=><View>
        <Image
          style={{margin: 34, alignSelf: 'center', width: 84, height: 84, borderRadius: 42}}
          source={{uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwu7s_Ic3YioDVl9AmoJGsKbBuCKFVp2cD3KCPzdYlBLOcGmeV'}}
        />
      </View>
    renderContent=(color)=><View>
      {new Array(40).fill().map((_, i) => (
        <View
          key={i}
          style={{
            padding: 10,
            borderBottomWidth: 1,
            borderBottomColor: '#00000011'
          }}
        >
          <Text style={{color:color}}>{`Item ${i + 1}`}</Text>
        </View>
      ))}
    </View>
  
  }

Props :

  revealComponent?(): React.ReactNode,
  backdropBackgroundColor?: string,
  leftButtonIcon?: string, // an icon name from https://materialdesignicons.com (this component using react-native-vector icons inside)
  expandedTitle?: string,
  collapsedTitle?: string,
  content?(): React.ReactNode,
  textColor?: string,
  subHeaderText?: string,
  horizontalContent?: boolean,
  onSubheaderClick?(): void,
  onLeftButtonClick?(): void,
  onRightButtonClick?(): void,
  contentBackgroundColor?: string,
  subheaderTextColor?: string,
  onExpand?(): void,
  onCollapse?(): void,
  rightButtonIcon?: string // an icon name from https://materialdesignicons.com (this component using react-native-vector icons inside)
                            // if you give it an icon name icon will be rendered top right of backdrop and you can use it as you want

Material Vertical Linear

this component is a view with default column direction it can be used for better readability of jsx ui code

Usage :

   import {MaterialHorizontalLinear} from 'react-native-typescript-material-ui-collection';
    <MaterialHorizontalLinear>
    </MaterialHorizontalLinear>

### Material Horizontal Linear

this component is a view with default row direction it can be used for better readability of jsx ui code

#### Usage :

   import {MaterialVerticalLinear} from 'react-native-typescript-material-ui-collection';
    <MaterialVerticalLinear>
    </MaterialVerticalLinear>

### Material Card

A card component created using material.io guidelines , Also CardContent Component is inside this is actually a view with 16dp padding

#### Usage :

Above gif's code (just important things)

   //import
   import {MaterialCard, MaterialCardContent} from 'react-native-typescript-material-ui-collection';

   //with image header
   <MaterialCard style={{flex:1}}  header={()=><Image style={{height:150}} source={{uri:'https://lorempixel.com/200/300/fashion'}}/>}>
     <MaterialCardContent >
     <Text> material card</Text>
     <Text> material card</Text>
     </MaterialCardContent>
   </MaterialCard>

   //setting elevation
   <MaterialCard  style={{flex:1}} elevation={3}>
      <MaterialCardContent >
        <Text> material card</Text>
        <Text> Elevation 3</Text>
      </MaterialCardContent>
   </MaterialCard>

    //minimal usage
    <MaterialCardContent>
       <Text>this is a material card</Text>
       <Text>this is a material card</Text>
       <Text>this is a material card</Text>
    </MaterialCardContent>

     //with background image
     <MaterialCard  style={{flex:1,height:200}} backgroundImageSource={{uri:'https://lorempixel.com/300/200/sports'}}>
         <MaterialCardContent >
             <Text style={{textShadowColor:'black',textShadowRadius:2,color:'white'}}> material card</Text>
             <Text style={{textShadowColor:'black',textShadowRadius:2,color:'white'}}> Elevation 7</Text>
         </MaterialCardContent>
     </MaterialCard>

Props

  elevation?: number,
  margin?:number,
  header?(): React.ReactNode,
  style?:ViewStyle,
  backgroundImageSource?: ImageSourcePropType,
  backgroundColor?:string
 

Default Props

    elevation:2,
    margin:8,
    backgroundColor:'#eeeeee'

Material Toolbar

A toolbar designed based on material.io guidelines
And
MaterialToolbarContent you can use it for some content on your toolbar , you can also use your custom component

Can be used by Material Container

Usage

Import :

import {MaterialToolbar, MaterialToolbarContent} from 'react-native-typescript-material-ui-collection';

Use:

 <MaterialToolbar
    leftIcon='menu'
    content={()=><MaterialToolbarContent haveTypeMode={true} text='title'/>}
 />

<MaterialToolbar
  leftIcon='menu'
  iconsColor='white'
  color='purple'
  content={()=><MaterialToolbarContent color='white' haveTypeMode={true} text='title'/>}
/>

 // Minimal
<MaterialToolbar
   leftIcon='menu'
/>

<MaterialToolbar
  leftIcon='menu'
  content={()=><MaterialToolbarContent haveTypeMode={false} text='title'/>}
/>

Props

MaterialToolbarProps {
  color?: string,
  onLeftIconPress?():void,
  onRightIconPress?():void,
  content?():ReactNode
  iconsColor?:string,
  leftIcon?:string, // one of https://materialdesignicons.com/ icons
  rightIcon?:string // one of https://materialdesignicons.com/ icons
}
MaterialToolbarContentProps {
  color?: string,
  font?: string,
  text?: string,
  haveTypeMode?: boolean,
  typeModeIcon?:string, // one of https://materialdesignicons.com/ icons
  onChangeText?(text:string),
  onTypeModePress?(): void,
}

Default Props

//Material Toolbar Content
 
    color: '#212121',
    typeModeIcon:'magnify', 
    onTypeModePress: () => {
    },
    onChangeText:()=>{}
  
 
//Material Toolbar
 
    color: '#eeeeee',
    onLeftIconPress:()=>{},
    onRightIconPress:()=>{},
    iconsColor:'#212121'
  

Material Bottom Tabbar

A material tab bar designed and created based on material.io instructions, tested and developed on react-navigation version 3.0.0

Usage

import {createBottomTabNavigator,createAppContainer} from 'react-navigation';
import MaterialBottomTabbar from '../../Components/MaterialBottomTabbar';
// A bunch of other imports
 
const commonNavigationOptions = ({navigation}) => ({
  header: null,
  title: navigation.state.routeName,
});
 
const ChatsRouteOptions = {
  screen: Tab1,
  navigationOptions: commonNavigationOptions,
};
const SearchRouteOptions = {
  screen: Tab2,
  navigationOptions: commonNavigationOptions,
};
const ChannelsRouteOptions = {
  screen: Tab3,
  navigationOptions: commonNavigationOptions,
};
 const LocationRouteOptions = {
   screen: Tab4,
   navigationOptions: commonNavigationOptions,
 };
const SettingsRouteOptions = {
  screen: Tab5,
  navigationOptions: commonNavigationOptions,
};
// different routes for all, active and completed todos
export default (props) => React.createElement(
  createAppContainer(createBottomTabNavigator(
    {
      [I18n.t('Tab1')]: ChatsRouteOptions,
      [I18n.t('Tab2')]: ChannelsRouteOptions,
      [I18n.t('Tab3')]: LocationRouteOptions,
      [I18n.t('Tab4')]: SearchRouteOptions,
      [I18n.t('Tab5')]: SettingsRouteOptions
    },
    {
      tabBarComponent:MaterialBottomTabbar, // here you can set this component
      tabBarPosition: 'bottom',
      tabBarOptions:{ // here are main settings of this component
        animated:true, 
        isRtl:props.isRtl,
        fontSize:12,
        noLabel:false,
        iconName:(key)=>iconChooser(key),
        fontFamily: Fonts.type.base,
        defaultColor:props.colorScheme.fullToneText,
        selectedColor:primaryColor,
        style: {
          backgroundColor: props.colorScheme.tabBarBackground
        },
      },
      initialRouteName: I18n.t('chats')
    },
  ))
);
 
function iconChooser(key) {
  let iconName;
  switch (key) {
    case I18n.t('chats'):
      iconName = 'message-text'; // icon names from https://materialdesignicons.com/ website
      break;
    case I18n.t('search'):
      iconName = 'magnify';
      break;
    case I18n.t('channels'):
      iconName = 'bullhorn';
      break;
    case I18n.t('location'):
      iconName = 'map-marker';
      break;
    case  I18n.t('settings'):
      iconName = 'menu'
  }
  return iconName;
 
}
 

Material Text Input

this component is basically react-native-material-textfield i just added it's types to typescript and rtl support (for it's label)

Usage :

   import {MaterialTextInput} from 'react-native-typescript-material-ui-collection';
    <MaterialTextInput
    isRtl={true} //just added this prop you can see other props from above link
    />

Material Progress

I used react-native-indicators code to do this with a few changes and turning the used code to typescript I have also used this component for progress inside below button components

#### Usage:

this is exactly the code of above gif

import * as React from 'react'
import {Component} from 'react';
import { View} from 'react-native'
import styles from './Styles/LaunchScreenStyles'
import {MaterialProgress} from 'react-native-typescript-material-ui-collection';
 
export default class LaunchScreen extends Component {
 render() {
   return (
     <View style={styles.container}>
       <MaterialProgress
         color="purple"
       />
       <MaterialProgress
         color="purple"
         small
       />
     </View>
   )
 }
}
 

Props:

 color:string,//just the color
 small?:boolean// using this will render small progress i'ts good for using inside buttons or etc.

Material Buttons

I Made these three buttons exactly based on material.io design guidelines

Usage:

this is exactly the code of above gif

import * as React from 'react'
import {Component} from 'react';
import { View} from 'react-native'
import styles from './Styles/LaunchScreenStyles'
import {MaterialTextButton,
MaterialOutlinedButton,
MaterialContainedButton} from 'react-native-typescript-material-ui-collection';
 
export default class LaunchScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MaterialTextButton
          onPress={() => {
            console.log("pressed")
          }}
          text="Material Text Button"
          textColor="purple"
          margin={8}
        />
        <MaterialOutlinedButton
          onPress={() => {
            console.log("pressed")
          }}
          text="Material Outlined Button"
          textColor="purple"
          margin={8}
        />
        <MaterialContainedButton
          onPress={() => {
            console.log("pressed")
          }}
          color='purple'
          text="Material Contained Button"
          textColor="white"
          margin={8}
        />
        <MaterialTextButton
          onPress={() => {
            console.log("pressed")
          }}
          text="Material Text Button"
          textColor="purple"
          margin={8}
          iconName="check-circle"
        />
        <MaterialOutlinedButton
          onPress={() => {
            console.log("pressed")
          }}
          text="Material Outlined Button"
          textColor="purple"
          margin={8}
          iconName="check-circle"
        />
        <MaterialContainedButton
          onPress={() => {
            console.log("pressed")
          }}
          color='purple'
          text="Material Contained Button"
          textColor="white"
          margin={8}
          iconName="check-circle"
        />
      </View>
    )
  }
}
 

Props:

MaterialTextButton:

    text: string,
    icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside
    margin?:number,
    textColor?: string,
    textFont?: string,
    iconName?:string, // if you set the material icon name from https://materialdesignicons.com/ the icon will displayed
    onPress?():void,
    progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs

MaterialOutlinedButton:

  text: string,
  icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside
  margin?:number,
  textColor?: string,
  textFont?: string,
  onPress?():void,
  iconName?:string, // if you set the material icon name from https://materialdesignicons.com/ the icon will displayed
  progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs
 

MaterialContainedButton:

  text: string,
  icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside
  margin?:number,
  color?:string,
  textColor?: string,
  textFont?: string,
  onPress?():void,
  iconName?:string,// if you set the material icon name from https://materialdesignicons.com/ the icon will displayed
  progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs
 

Material FAB

I Made these two FABs exactly based on material.io design guidelines

Usage :

this is exactly the code of above gif

   import * as React from 'react'
   import {Component} from 'react';
   import { View} from 'react-native'
   import styles from './Styles/LaunchScreenStyles'
   import {MaterialFab, MaterialExtendedFab} from 'react-native-typescript-material-ui-collection';
   
   export default class LaunchScreen extends Component {
     render() {
       return (
         <View style={styles.container}>
           <MaterialFab 
           mini 
           onPress={()=>{console.log('onpress')}} 
           position="bottomLeft" 
           iconColor="white" 
           iconName='check-circle' color="purple"
           />
           <MaterialFab 
           onPress={()=>{console.log('onpress')}} 
           position="bottomRight" 
           iconColor="white" 
           iconName='check-circle' 
           color="purple"
           />
           <MaterialExtendedFab 
           onPress={()=>{console.log('onpress')}} 
           text="Extended" 
           position="bottom" 
           iconColor="white" 
           iconName='check-circle' 
           color="purple"
           />
         </View>
       )
     }
   }
 

Props:

MaterialFab:

      icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside
      color?:string,
      iconColor?: string, 
      onPress?():void,
      iconName:string,// if you set the material icon name from https://materialdesignicons.com/ the icon will displayed
      mini?:boolean,
      position:string,// one of {'bottomLeft','topRight','topLeft','bottomRight'}
      progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs
 

MaterialExtendedFab:

  icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside
  color?:string,
  iconColor?: string,
  onPress?():void,
  iconName:string,// if you set the material icon name from https://materialdesignicons.com/ the icon will displayed
  textFont?:string,
  text:string,
  position:string,// one of {'top','bottom'}
  progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs
 

Material Checkbox

I Made this checkbox component exactly based on material.io design guidelines

Usage :

this is exactly the code of above gif

import * as React from 'react'
import {Component} from 'react';
import {View} from 'react-native'
import styles from './Styles/LaunchScreenStyles'
import {MaterialCheckbox} from "react-native-typescript-material-ui-collection";
 
export default class LaunchScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MaterialCheckbox
          checkBoxColor="purple"
          text="Material Checkbox"
          onCheckedChange={(isChecked) => {
            console.log(isChecked)
          }}
        />
        <MaterialCheckbox
          rtl
          checkBoxColor="purple"
          text="Material Checkbox"
          onCheckedChange={(isChecked) => {
            console.log(isChecked)
          }}
        />
        <MaterialCheckbox
          checkBoxColor="purple"
          onCheckedChange={(isChecked) => {
            console.log(isChecked)
          }}
        />
        <MaterialCheckbox
          checkBoxColor="purple"
          text="Material Checkbox"
          onCheckedChange={(isChecked) => {
            console.log(isChecked)
          }}
          progress
        />
      </View>
    )
  }
}

Props:

  text?: string,
  isChecked?: boolean,
  textFont?: string,
 
  onCheckedChange?(isChecked: boolean): void,
 
  checkBoxColor?: string,
  textColor?: string,
  rtl?: boolean,
  progress?: boolean
 

Material Switch

I Made this switch component exactly based on material.io design guidelines

Usage

this is exactly the code of above gif

import * as React from 'react'
import { View } from 'react-native'
import MaterialSwitch from "react-native-typescript-material-ui-collection";
 
// Styles
import styles from './Styles/LaunchScreenStyles'
 
interface LaunchScreenComponentProps {}
 
export default class LaunchScreen extends React.Component <LaunchScreenComponentProps> {
 
  render () {
    return (
      <View style={styles.mainContainer}>
        <MaterialSwitch color='purple'/>
        <MaterialSwitch text="Material switch" color='purple'/>
        <MaterialSwitch text="Material switch" color='purple'/>
        <MaterialSwitch text="Material switch" color='purple'/>
 
      </View>
    )
  }
}
 

Props:

  textFont?:string,
  textColor?:string,
  text?:string,
  color?:string
  onValueChanged?(value:boolean):void
 

Material Radio Group

I Made this radio group component exactly based on material.io design guidelines

Usage

this is exactly the code of above gif

import * as React from 'react'
import { View } from 'react-native'
import MaterialSwitch from "react-native-typescript-material-ui-collection";
 
// Styles
import styles from './Styles/LaunchScreenStyles'
 
interface LaunchScreenComponentProps {}
 
export default class LaunchScreen extends React.Component <LaunchScreenComponentProps> {
  render () {
    return (
      <View style={styles.mainContainer}>
        <MaterialRadioGroup data={[{text:'text1'},{text:'text2'},{text:'text3'},{text:'text4'}]} color='purple'/>
        <MaterialRadioGroup isRtl={true} data={[{text:'text1'},{text:'text2'},{text:'text3'},{text:'text4'}]} color='purple'/>
      </View>
    )
  }
}
 

Props:

  data: any, // just be sure you have text:string field in datarows
  color: string,
  textFont?: string,
  textColor?: string,
  isRtl?:boolean,
  onItemPress?(item, index): void