https://github.com/henrytao-me/react-native-mdcore

Material Design for both Android and iOS
https://github.com/henrytao-me/react-native-mdcore

android ios material material-design mdcore palette react react-native theme

Last synced: 2 months ago
JSON representation

Material Design for both Android and iOS

• Host: GitHub
• URL: https://github.com/henrytao-me/react-native-mdcore
• Owner: henrytao-me
• License: apache-2.0
• Created: 2017-03-26T02:13:28.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-12-09T01:03:35.000Z (about 7 years ago)
• Last Synced: 2024-04-13T20:10:18.849Z (10 months ago)
• Topics: android, ios, material, material-design, mdcore, palette, react, react-native, theme
• Language: JavaScript
• Size: 137 KB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-mdcore

Material Design for both Android and iOS. `ThemeProvider` has to be set at root of component tree. All children components can access theme properties via `context`. Features: 

- Provide [default theme properties](src/libs/theme/default.js) for all material components. 

- Easy to customize theme.

- Provide most of material components to build cross platform apps with consistent APIs.

## Installation

```node

npm install react-native-mdcore --save

```

## Sample app 

Checkout [https://github.com/henrytao-me/react-native-workshop](https://github.com/henrytao-me/react-native-workshop)

## Usages

### Setup ThemeProvider

Use default theme:

```js

import React from 'react'

import {

  PureComponent,

  ThemeProvider

} from 'react-native-mdcore'

export default class Main extends PureComponent {

  render() {

    return (

      

        

      

    )

  }

}

```

Use custom theme:

```js

import React from 'react'

import {

  PureComponent,

  Theme,

  ThemeProvider

} from 'react-native-mdcore'

cons CUSTOM_THEME = Theme.extend({

  palette: {

    primary: '#006f7b',

    primaryDark: '#005a64',

    primaryLight: '#7fb7bd',

  }

})

export default class Main extends PureComponent {

  render() {

    return (

      

        

      

    )

  }

}

```

Access theme:

```js

import React from 'react'

import {

  PropTypes,

  PureComponent, 

  Text,

  View

} from 'react-native-mdcore'

export default class HomeComponent extends PureComponent {

  static contextTypes = {

    theme: PropTypes.any

  }

  render() {

    const { theme } = this.context

    return (

      

        Home

      

    )

  }

}

```

### All-in-one place

All components are now in `react-native-mdcore` that makes it easiest to remember and use. 

```js

import React from 'react'

import {

  AppRegistry, AppState, Animated,

  Easing,

  FlatList,

  InteractionManager,

  ListView,

  PixelRatio,

  Platform,

  ScrollView, SectionList, StatusBar,

  TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback,

  View, VirtualizedList,

  WebView,

  BottomNavigation,

  BottomNavigationItem,

  Button,

  Card,

  Divider,

  Icon,

  Image,

  NativeModules,

  PropTypes,

  PureComponent,

  Ripple,

  StyleSheet,

  TabItem,

  Tabs,

  Text,

  ViewPager,

} from 'react-native-mdcore'

export default class CustomComponent extends PureComponent {

  render() {

    return null

  }

}

```

## License

    Copyright 2017 "Henry Tao "

    Licensed under the Apache License, Version 2.0 (the "License");

    you may not use this file except in compliance with the License.

    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software

    distributed under the License is distributed on an "AS IS" BASIS,

    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

    See the License for the specific language governing permissions and

    limitations under the License.