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

Installation
Components and Utils

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 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 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: 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
     >
         <MaterialContainer
          // if you want to use this inside a root it is still a full width/height view with 16 dp padding
         >
         </MaterialContainer>
     </MaterialContainer>

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 Text Input

example

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

ignite-material-ui

Typescript material ui collection

Table of contents

Installation

Components and Utils

Material Colors

Usage :

Material Vertical Linear

Usage :

Props

Default Props

Material Toolbar

Props

Default Props

Material Container

Material Collapsible Toolbar Container

Usage :

Props :

Material Backdrop

Usage :

Props :

Material Text Input

Usage :

Material Progress

Props:

Material Buttons

Usage:

Props:

MaterialTextButton:

MaterialOutlinedButton:

MaterialContainedButton:

Material FAB

Usage :

Props:

MaterialFab:

MaterialExtendedFab:

Material Checkbox

Usage :

Props:

Material Switch

Usage

Props:

Material Radio Group

Usage

Props:

Versions

Current Tags

Version History

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads