JavaScript react-native-material-kit setTheme Examples

Example #1

File: index.android.js Project: PatrickEriksen/rnmk-demo

  View,
  Text,
  ScrollView,
  Navigator,
  TouchableOpacity,
  ToolbarAndroid,
  Navigator,
  BackAndroid,
} = React;

import { setTheme, MKColor } from 'react-native-material-kit';

// customize the material design theme
setTheme({
  primaryColor: MKColor.Purple,
  primaryColorRGB: MKColor.RGBPurple,
  accentColor: MKColor.Amber,
});

var Buttons = require('./app/buttons');
var TextFields = require('./app/textfields');
var Toggles = require('./app/toggles');
var Progress = require('./app/progress');
var Sliders = require('./app/sliders');
var Cards = require('./app/cards');

function renderScreen(route, navigator) {
  return (
    <View style={styles.container}>
      <route.component
        {...route.passProps}

Example #2

File: MainScreen.js Project: zhukov-maxim/blood-pressure-journal

'use strict';

import React, {
  Component,
  Image,
  ListView,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View
} from 'react-native';

import { setTheme, MKButton, MKColor } from 'react-native-material-kit';

setTheme({
  primaryColor: '#f44336',
  accentColor: '#03a9f4',
});

var accentColoredFabProps = {
  ...MKButton.accentColoredFab().toProps(),
  style: {
    position: 'absolute',
    right: 16,
    bottom: 16,
    width: 56,
    height: 56,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cornerRadius: 28,

Example #3

File: theme.js Project: htcAP/se_client

setTheme({
  cardStyle: {
    borderRadius: 2,
    elevation: 2,
    flex: 0,
  },

  page: {
    backgroundColor: '#eee',
  },

  container: {
    flex: 1,
  },

  conferDetailItermContainer: {
    backgroundColor: '#fff',
    paddingTop: 8,
    paddingBottom: 8,
    paddingRight: 16,
    borderBottomWidth: 1,
    borderColor: 'rgba(0,0,0,.12)',
  },

  conferDenseDetailItermContainer: {
    paddingTop: 4,
    paddingBottom: 4,
    paddingRight: 16,
  },

  conferDetailIterm: {
    height: 48,
    alignItems: 'center',
    flexDirection: 'row',
  },

  conferDenseDetailIterm: {
    height: 36,
    alignItems: 'center',
    flexDirection: 'row',
  },

  conferDetailIcon: {
    width: 72 - 16 - 16,
    marginLeft: 16,
  },

  conferDetailContent: {
    flex: 1,
    flexDirection: 'row',
  },

  conferDetailContentText: {
    fontSize: 16,
  },

  conferDetailContentTextContainer: {
    height: 48,
    justifyContent: 'center',
  },

  headerPadding: {
    paddingTop: 8,
    backgroundColor: '#fff',
  },

  white: '#FFF',
  primaryColor: '#00BCD4',
  primaryTextColor: '#FFF',
  lightPrimaryTextColor: 'rgba(255,255,255,.67)',
  secondaryColor: '#FFC107',
  secondaryTextColor: '#000',
  statusBarColor: 'rgba(0,0,0,0.48)',

  lightSecondaryTextColor: 'rgba(0,0,0,0.34)',
  dividerColor: 'rgba(0,0,0,.12)',

  alertColor: '#f44336',
  pageBackgroundColor: '#eee',
});

Example #4

File: App.js Project: tirli/cosmetics

import React, { Component } from 'react';
import { Navigator, BackAndroid } from 'react-native';
import { CosmeticsList, ProductForm } from '../../containers';
import { setTheme, MKColor } from 'react-native-material-kit';

setTheme({
  primaryColor: MKColor.Cyan,
  accentColor: MKColor.LightGreen,
});

let nav;
BackAndroid.addEventListener('hardwareBackPress', () => {
  if (nav.getCurrentRoutes().length === 1) {
    return false;
  }
  nav.pop();
  return true;
});

class App extends Component {
  navigatorRenderScene(route, navigator) {
    nav = navigator;
    switch (route.id) {
      case 'addProduct':
        return (<ProductForm navigator={navigator} title="Add new product" />);
      case 'cosmeticsList':
      default:
        return (<CosmeticsList navigator={navigator} title="List" />);
    }
  }

Example #5

File: moduleDetail.js Project: baotang/gene-task-runner

  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';
import Util from './utils';
import {
  MKColor,
  MKRadioButton,
  setTheme,
} from 'react-native-material-kit';

setTheme({radioStyle: {
  fillColor: 'rgba(139,195,74,.8)',
  borderOnColor: 'rgba(139,195,74,.6)',
  borderOffColor: 'rgba(139,195,74,.3)',
  rippleColor: 'rgba(139,195,74,.15)',
}});

export class HISAT extends Component{
  static defaultProps = {
    title:'',
  };

  constructor(props) {
    super(props);
    this.state = {
      title:'',
      thread: '',
      entry: '',
      feature: '',