React Native Component

AddAlarm.js

import React, { Component } from 'react'
import { View, Text, Switch, NativeModules, AsyncStorage } from 'react-native'
import { Slider, Button, FormLabel, FormInput } from 'react-native-elements'
import { medgrey, darkgrey, green, white } from '../utils'

// Java Bridge Component to Native AlarmManager API
const AlarmManager = NativeModules.AlarmManager

export default class AddAlarm extends Component {
  constructor(props) {
    super(props)

    this.state = {
      hour: 1,
      minutes: 0,
      isAM: true,
      controlsDisabled: false
    }
  }

  render() {
    const {
      mainWrapper,
      sliderWrapper,
      sliderLabel,
      timeDisplayText,
      timeDisplay,
      switchWrapper,
      switchText
    } = styles

    return (
      <View style={mainWrapper}>

        {/* Time Display */}
        <View style={timeDisplay}>
          <Text style={timeDisplayText}>
            {this.renderHourDisplay()}
            :
            {this.renderMinutesDisplay()}
            {' '}
            {this.renderAMorPM()}
          </Text>
        </View>

        {/* Slider Wrapper */}
        <View style={sliderWrapper}>

          {/* Hours */}
          <Text style={sliderLabel}>
            Hour
          </Text>
          <Slider
            disabled={this.state.controlsDisabled}
            minimumValue={1}
            maximumValue={12}
            minimumTrackTintColor={`${white}`}
            maximumTrackTintColor={`${medgrey}`}
            thumbTintColor={`${green}`}
            step={1}
            value={this.state.hour}
            onValueChange={value => this.setState({ hour: value })}
          />

          {/* Minutes */}
          <Text style={sliderLabel}>
            Minutes
          </Text>
          <Slider
            disabled={this.state.controlsDisabled}
            minimumValue={0}
            maximumValue={59}
            minimumTrackTintColor={`${white}`}
            maximumTrackTintColor={`${medgrey}`}
            thumbTintColor={`${green}`}
            step={1}
            value={this.state.minutes}
            onValueChange={value => this.setState({ minutes: value })}
          />
        </View>

        {/* Am/PM Switch */}
        <View style={switchWrapper}>
          <Text style={switchText}>
            AM/PM
          </Text>
          <Switch
            disabled={this.state.controlsDisabled}
            onValueChange={value => this.setState({ isAM: value })}
            value={this.state.isAM}
            thumbTintColor={`${green}`}
          />
        </View>

        <Button
          backgroundColor={`${green}`}
          onPress={this.setAlarm}
          fontSize={22}
          color={`${darkgrey}`}
          containerViewStyle={{ borderWidth: 2, borderColor: '#fff' }}
          textStyle={{ fontWeight: 'bold' }}
          raised
          title="Save"
        />
      </View>
    )
  }

  renderHourDisplay = () => {
    return `${this.state.hour}`
  }

  renderMinutesDisplay = () => {
    if (this.state.minutes < 10) return `0${this.state.minutes}`
    else return `${this.state.minutes}`
  }

  renderAMorPM = () => {
    if (!this.state.isAM) return 'PM'
    else return 'AM'
  }

  setAlarm = () => {
    this.setState({ controlsDisabled: true })
    let finalHour = this.state.hour
    const finalMinutes = this.state.minutes
    // Adjustments for PM times
    if (!this.state.isAM) finalHour += 12

    // Send the alarm to Java Module for syncing with AlarmManager
    AlarmManager.setAlarm(finalHour, finalMinutes)
    // Write to Device Native Storage
    this.persistAlarm(finalHour, finalMinutes)
  }

  // Just started working on this, work in progress
  persistAlarm = (hour, minutes) => {
    const alarms = {
      alarms: [
        {
          hour: hour,
          minutes: minutes
        }
      ]
    }
    AsyncStorage.setItem('alarms', JSON.stringify(alarms), err => {
      console.log(err)
    })
  }

  // end class
}

const styles = {
  mainWrapper: {
    flex: 1,
    backgroundColor: `${darkgrey}`
  },
  sliderWrapper: {
    paddingLeft: 20,
    paddingRight: 20,
    marginBottom: 20
  },
  sliderLabel: {
    fontSize: 18,
    color: `${white}`,
    marginTop: 15
  },
  timeDisplay: {
    alignItems: 'center',
    marginTop: 40
  },
  timeDisplayText: {
    fontSize: 65,
    color: `${white}`,
    marginBottom: 15
  },
  switchWrapper: {
    alignItems: 'center',
    marginBottom: 40
  },
  switchText: {
    fontSize: 18,
    paddingBottom: 5,
    color: `${white}`
  }
}