react-native-simple-radio-button

• https://github.com/moschan/react-native-simple-radio-button ← 인기

• https://github.com/sramezani/radio-buttons-react-native ← 개인적으로는 이게 더 쓰기 좋음

패키지 설치

$ npm i react-native-simple-radio-button --save

또는

$ yarn add react-native-simple-radio-button

기본 사용 예시 (Basic)

<RadioForm
  radio_props={radio_props}
  initial={0}
  onPress={(value) => {this.setState({value:value})}}
/>

multi-dots 클릭 연동 예시

• https://stackoverflow.com/questions/56489018/react-native-calendar-apply-custom-multi-marking-with-popup
• https://snack.expo.io/@lekgwaraj/react-native-calendars-multi-dots-example

• https://stackoverflow.com/questions/47236983/how-to-pass-an-array-to-calendars-markeddates

import React from 'react';
import { StyleSheet, Text, View, Modal, Button } from 'react-native';
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
import moment from 'moment';

const vacation = { key: 'vacation', color: 'red', selectedDotColor: 'blue' };
const massage = { key: 'massage', color: 'blue', selectedDotColor: 'blue' };
const workout = { key: 'workout', color: 'green' };

const _format = 'YYYY-MM-DD';
const _today = moment(new Date().dateString).format(_format);

export default class App extends React.Component {
  initialState = {
    [_today]: { disabled: false },
  };

  state = {
    _markedDates: this.initialState,
    isOpen: false,
    isDisabledOne: false,
    isDisabledTwo: false,
    isDisabledThree: false,
    selectedDay: '',
  };

  onDaySelect = day => {
    const _selectedDay = moment(day.dateString).format(_format);

    this.setState({
      selectedDay: _selectedDay,
      isOpen: true,
    });
  };

  saveDay = () => {
    const dots = [];
    let selected = true;
    const {
      isDisabledOne,
      isDisabledTwo,
      isDisabledThree,
      _markedDates,
      selectedDay,
    } = this.state;

    if (isDisabledOne) {
      dots.push(vacation);
    }

    if (isDisabledTwo) {
      dots.push(massage);
    }

    if (isDisabledThree) {
      dots.push(workout);
    }

    if (_markedDates[selectedDay]) {
      selected = !_markedDates[selectedDay].selected;
    }

    const clone = { ..._markedDates };

    clone[selectedDay] = { dots, selected };

    this.setState({
      isOpen: false,
      _markedDates: clone,
      isDisabledOne: false,
      isDisabledTwo: false,
      isDisabledThree: false,
    });
  };

  render() {
    const BContent = () => (
      <Button
        title="X"
        onPress={this.saveDay}
        style={[styles.btn, styles.btnModal]}
      />
    );

    return (
      <View style={styles.container}>
        <Calendar
          markedDates={this.state._markedDates}
          markingType={'multi-dot'}
          onDayPress={this.onDaySelect}
        />

        <Modal
          style={[styles.modal, styles.modal3]}
          position={'center'}
          visible={this.state.isOpen}
          isDisabled={this.state.isDisabled}>
          <Text style={styles.text}>vacation</Text>
          <Button
            title={this.state.isDisabledOne ? 'YES' : 'NO'}
            onPress={() =>
              this.setState({ isDisabledOne: !this.state.isDisabledOne })
            }
            style={styles.btn}
          />
          <Text style={styles.text}>massage</Text>
          <Button
            onPress={() =>
              this.setState({ isDisabledTwo: !this.state.isDisabledTwo })
            }
            title={this.state.isDisabledTwo ? 'YES' : 'NO'}
            style={styles.btn}
          />
          <Text style={styles.text}>workout</Text>
          <Button
            title={this.state.isDisabledThree ? 'YES' : 'NO'}
            onPress={() =>
              this.setState({ isDisabledThree: !this.state.isDisabledThree })
            }
            style={styles.btn}
          />
          <BContent />
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});