gem-hunter

Getting Started

NOTICE:

iOS

Manually

Option: Using CocoaPods

xcodeproj 'path/to/YourProject.xcodeproj/'

pod 'React', :subspecs => ['Core', 'RCTText', 'RCTWebSocket'], :path => 'node_modules/react-native'
pod 'react-native-material-kit', :path => 'node_modules/react-native-material-kit'

post_install do |installer|
  target = installer.pods_project.targets.select{|t| 'React' == t.name}.first
  phase = target.new_shell_script_build_phase('Run Script')
  phase.shell_script = "if nc -w 5 -z localhost 8081 ; then\n  if ! curl -s \"http://localhost:8081/status\" | grep -q \"packager-status:running\" ; then\n    echo \"Port 8081 already in use, packager is either not running or not running correctly\"\n    exit 2\n  fi\nelse\n  open $SRCROOT/../node_modules/react-native/packager/launchPackager.command || echo \"Can't start packager automatically\"\nfi"
end

Android

Manually

include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')

dependencies {
    ...
    compile project(':RNMaterialKit')
}

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactMaterialKitPackage()
    );
}

Manual Installation Issues

Resources

Components

Buttons

// colored button with default theme (configurable)
const ColoredRaisedButton = MKButton.coloredButton()
  .withText('BUTTON')
  .withOnPress(() => {
    console.log("Hi, it's a colored button!");
  })
  .build();

...
<ColoredRaisedButton />

const CustomButton = new MKButton.Builder()
  .withBackgroundColor(MKColor.Teal)
  .withShadowRadius(2)
  .withShadowOffset({width:0, height:2})
  .withShadowOpacity(.7)
  .withShadowColor('black')
  .withOnPress(() => {
    console.log('hi, raised button!');
  })
  .withTextStyle({
    color: 'white',
    fontWeight: 'bold',
  })
  .withText('RAISED BUTTON')
  .build();

...
<CustomButton />

<MKButton
  backgroundColor={MKColor.Teal}
  shadowRadius={2}
  shadowOffset={{width:0, height:2}}
  shadowOpacity={.7}
  shadowColor="black"
  onPress={() => {
    console.log('hi, raised button!');
  }}
  >
  <Text pointerEvents="none"
        style={{color: 'white', fontWeight: 'bold',}}>
    RAISED BUTTON
  </Text>
</MKButton>

Cards

import {
  getTheme,
  ...
} from 'react-native-material-kit';

const theme = getTheme();

<View style={theme.cardStyle}>
  <Image source={{uri : base64Icon}} style={theme.cardImageStyle} />
  <Text style={theme.cardTitleStyle}>Welcome</Text>
  <Text style={theme.cardContentStyle}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </Text>
  <View style={theme.cardMenuStyle}>{menu}</View>
  <Text style={theme.cardActionStyle}>My Action</Text>
</View>

Loading

Progress bar

<mdl.Progress
  style={styles.progress}
  progress={0.2}
/>

Spinner

<mdl.Spinner />

Sliders

<mdl.Slider style={styles.slider} />
…
const SliderWithValue = mdl.Slider.slider()
  .withStyle(styles.slider)
  .withMin(10)
  .withMax(100)
  .build();
…
<SliderWithValue
  ref="sliderWithValue"
  onChange={(curValue) => this.setState({curValue})}
/>

Range Slider

<mdl.RangeSlider style={styles.slider} />
…
const SliderWithRange = mdl.RangeSlider.slider()
  .withStyle(styles.slider)
  .withMin(10)
  .withMax(100)
  .withMinValue(30)
  .withMaxValue(50)
  .build();
…
<SliderWithRange
  ref="sliderWithRange"
  onChange={(curValue) => this.setState({
    min: curValue.min,
    max: curValue.max,
    })
  }
  onConfirm={(curValue) => {
    console.log("Slider drag ended");
    console.log(curValue);
  }}
/>

Text Fields

// textfield with default theme (configurable)
const Textfield = MKTextField.textfield()
  .withPlaceholder('Text...')
  .withStyle(styles.textfield)
  .build();

...
<Textfield />

const CustomTextfield = mdl.Textfield.textfield()
  .withPlaceholder("Text...")
  .withStyle(styles.textfield)
  .withTintColor(MKColor.Lime)
  .withTextInputStyle({color: MKColor.Orange})
  .build();
...
<CustomTextfield />

<Textfield
  tintColor={MKColor.Lime}
  textInputStyle={{color: MKColor.Orange}}
  placeholder=“Text…”
  style={styles.textfield}
/>

Toggles

Icon toggle

<MKIconToggle
  checked={true}
  onCheckedChange={this._onIconChecked}
  onPress={this._onIconClicked}
>
  <Text
    pointerEvents="none"
    style={styles.toggleTextOff}>Off</Text>
  <Text state_checked={true}
        pointerEvents="none"
        style={[styles.toggleText, styles.toggleTextOn]}>On</Text>
</MKIconToggle>

Switch

<mdl.Switch
  style={styles.appleSwitch}
  onColor="rgba(255,152,0,.3)"
  thumbOnColor={MKColor.Orange}
  rippleColor="rgba(255,152,0,.2)"
  onPress={() => console.log('orange switch pressed')}
  onCheckedChange={(e) => console.log('orange switch checked', e)}
/>

Checkbox

<MKCheckbox
  checked={true}
/>

setTheme({checkboxStyle: {
  fillColor: MKColor.Teal,
  borderOnColor: MKColor.Teal,
  borderOffColor: MKColor.Teal,
  rippleColor: `rgba(${MKColor.RGBTeal},.15)`,
}});

Radio button

constructor() {
  super();
  this.radioGroup = new MKRadioButton.Group();
}
...
<MKRadioButton
  checked={true}
  group={this.radioGroup}
/>

setTheme({radioStyle: {
  fillColor: `rgba(${MKColor.RGBTeal},.8)`,
  borderOnColor: `rgba(${MKColor.RGBTeal},.6)`,
  borderOffColor: `rgba(${MKColor.RGBTeal},.3)`,
  rippleColor: `rgba(${MKColor.RGBTeal},.15)`,
}});