npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-typescript-material-ui-collection

v0.0.52

Published

handpicked react-native material design ui components

Downloads

46

Readme

js-standard-style

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

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

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

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