react-native-typescript-material-ui-collection
v0.0.52
Published
handpicked react-native material design ui components
Downloads
46
Readme
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 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
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