Ignite-material-ui NPM

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 Material Colors
Material Vertical Linear Material Horizontal Linear Material Card Material Toolbar Material Container Material Collapsible Toolbar Container Material Backdrop
Material Text Input
Material Progress Material Buttons Material FAB Material Checkbox
Material Switch * Material Radio Group

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

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

Usage :

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

Material Horizontal Linear

#### Default Props
```typescript jsx
    elevation:2,
    margin:8,
    backgroundColor:'#eeeeee'

Material Toolbar

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

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

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

export default class LaunchScreen extends Component { render() { return ( ) } }

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

Material Buttons

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

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

@infinitebrahmanuniverse/nolb-ig @everything-registry/sub-chunk-1896

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago