react-native-paper#Checkbox JavaScript Examples

function UserActivityFilterSection({ filter, onFilterChange, options, title }) {
  var theme = useSelector(i => i.themes[i.theme]);
  return <View>
    <View style={{ paddingTop: 4, paddingLeft: 8 }}>
      <Text allowFontScaling={false} style={{ flex: 1, ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{title}</Text>
    </View>
    {options.map(i => <View key={i.id} style={{ flexDirection: "row", paddingLeft: 8, alignItems: "center" }}>
      <Checkbox
        color={theme.page_content.fg}
        uncheckedColor={theme.page_content.fg}
        status={filter.has(i.id) ? 'checked' : 'unchecked'}
        onPress={() => {
          var x = new Set(filter);
          if (x.has(i.id)) {
            x.delete(i.id)
          } else {
            x.add(i.id)
          }
          onFilterChange?.(x);
        }}
      />
      <Text allowFontScaling={false} style={{ flex: 1, ...font(), fontSize: 16, color: theme.page_content.fg }}>{i.title}</Text>
    </View>)}
  </View>;
}

SelectList = () => {
  const [selected, setSelected] = useState([]);

  const onSelect = (value, isSelected) => {
    if (!isSelected) {
      const selectedIndex = selected.indexOf(value);
      const newSelectedItems = [...selected];
      newSelectedItems.splice(selectedIndex, 1);
      setSelected(newSelectedItems);
    } else {
      setSelected([...selected, value]);
    }

    // TODO: your logics

    console.log(
      "The value",
      value,
      "is " + (isSelected ? "selected" : "unselected"),
    );
  };

  const renderItem = ({ item }) => {
    return (
      <Checkbox.Item
        mode="ios"
        label={item.title}
        status={selected.includes(item.id) ? "checked" : "unchecked"}
        onPress={() => {
          onSelect(item.id, !selected.includes(item.id));
        }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <BigList data={data} renderItem={renderItem} rowHeight={50} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

SelectList = ({ data, value, onSelect }) => {
  const [selected, setSelected] = useState(value);
  const renderItem = ({ item }) => {
    return (
      <Checkbox.Item
        mode="ios"
        label={item.label}
        status={selected === item.value ? "checked" : "unchecked"}
        onPress={() => {
          setSelected(item.value);
          onSelect(item.value);
        }}
      />
    );
  };

  return <BigList data={data} renderItem={renderItem} rowHeight={50} />;
}

GdprCompliance = ({
  setConsent
}) => {
  const [visible, setVisible] = React.useState(false);
  const [checked, setChecked] = React.useState(false);
  const continueToForm = () => {
    if (checked) {
      setConsent(true);
    } else {
      alert(I18n.t('gdpr.mustConsent')); // eslint-disable-line
    }
  };
  return (
    <View>
      <Title style={{ marginLeft: 15 }}>{I18n.t('gdpr.consentForm')}</Title>
      <View style={styles.container}>
        <Text style={{ flex: 2, padding: 10 }}>
          {I18n.t('gdpr.policy')}
        </Text>
        <Button
          style={styles.policyButton}
          mode="outlined"
          onPress={() => setVisible(true)}
        >
          {I18n.t('gdpr.viewFullPolicy')}
        </Button>
      </View>
      <TermsModal
        visible={visible}
        setVisible={setVisible}
      />
      <View style={styles.checkboxContainer}>
        <View style={styles.checkbox}>
          <Checkbox
            disabled={false}
            // theme={theme}
            color={theme.colors.primary}
            status={checked ? 'checked' : 'unchecked'}
            onPress={() => {
              setChecked(!checked);
            }}
          />
        </View>
        <Text style={styles.checkboxText}>{I18n.t('gdpr.communityMemAgrees')}</Text>
      </View>

      <Button style={{ margin: 15 }} mode="contained" onPress={() => continueToForm()}>{I18n.t('gdpr.continueToForm')}</Button>
    </View>
  );
}

export default function UniversalCapScreen({ navigation, route }) {
  var moment = useMoment();
  var { t } = useTranslation();
  var [index, setIndex] = React.useState(0);
  var [x, setX] = React.useState(0);
  var [submit, setSubmit] = React.useState(false);
  var [code, setCode] = React.useState("");
  var [runSubmit, setRunSubmit] = React.useState(false);
  var [filter, setFilter] = React.useState({
    "0": false,
    "1": false
  });
  var theme = useSelector(i => i.themes[i.theme])
  var username = route.params.username;
  const user_id = useAPIRequest({
    endpoint: 'user',
    data: { username },
    function: i => i?.user_id
  })
  const { data: submitted, status: submittedStatus } = useAPIRequest(runSubmit ? {
    endpoint: 'user/universal/submit/v1',
    data: {
      code: runSubmit
    },
    cuppazee: true
  } : null, true)
  var { data, status } = useAPIRequest(user_id ? {
    endpoint: 'user/universal/v4',
    data: {
      username,
      filter: Object.entries(filter).filter(i=>i[1]).map(i=>i[0]).join(','),
      x
    },
    user: user_id,
    cuppazee: true
  } : null, true)
  var qr = data?.munzees[index];
  var { data: munzee } = useAPIRequest(qr?.munzee_id ? {
    endpoint: 'munzee',
    data: {
      munzee_id: qr.munzee_id
    }
  } : null, true)
  var watch = useWatch(qr?.munzee_id, user_id, data?.token);
  React.useEffect(() => {
    if (watch === qr?.munzee_id) setIndex(index + 1);
  }, [watch])
  React.useEffect(() => {
    setIndex(0)
  }, [data?.cacheID])
  if (status) {
    if (status === "loading") {
      return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
        <ActivityIndicator size="large" color={theme.page.fg} />
      </View>
    } else {
      return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
        <MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
        <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:' + status)}</Text>
      </View>
    }
  } else if (data === null) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
      <MaterialCommunityIcons name="alert" color={theme.page.fg} size={48} />
      <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), textAlign: "center", color: theme.page_content.fg }}>{t('error:missing_data.locked')}</Text>
    </View>
  }
  return (
    <View style={{ flex: 1, backgroundColor: theme.page.bg, alignItems: "center", justifyContent: "center", padding: 8 }}>
      <View style={{ flex: 1, padding: 8 }}>
        <Text style={{ color: theme.page.fg, textAlign: "center", fontSize: 16 }}><Text style={{ fontWeight: "bold" }}>{data.total - (data.capped + index)}</Text> remaining of <Text style={{ fontWeight: "bold" }}>{data.total}</Text></Text>
        {data?.types?.map(i=><View style={{flexDirection:"row", alignItems: "center", width: 200}}>
          <Text style={{ flex: 1, fontWeight: "bold", fontSize: 16 }}>{i.name}</Text>
          <Checkbox.Android status={filter[i.id] ? 'unchecked' : 'checked'} onPress={()=>{
            var update = {};
            update[i.id] = !filter[i.id];
            setFilter({...filter,...update})
            setX(x+1);
          }} />
        </View>)}
      </View>
      {(data?.munzees?.length > 0 && qr) ? <>
        <QRCode
          size={200}
          value={`https://www.munzee.com/m/${qr.munzee}/`}
          color={theme.page.fg}
          backgroundColor={theme.page.bg}
          logo={getIcon(qr.type.icon)}
          logoSize={80}
        />
        <Text style={{ color: theme.page.fg, fontSize: 16, fontWeight: "bold" }}>{munzee?.friendly_name??qr.munzee}</Text>
        <Text style={{ color: theme.page.fg, fontSize: 16 }}>by {munzee?.creator_username??'?'}</Text>
        <Text style={{ color: theme.page.fg, fontSize: 12 }}>Deployed {moment(munzee?.deployed_at).format('L LT')}</Text>
        <Button style={{ marginVertical: 4 }} mode="contained" onPress={() => setIndex(index + 1)} icon="chevron-right">Next</Button>
        <Report qr={qr} />
      </> : <>
          <MaterialCommunityIcons name="gauge-empty" color={theme.page.fg} size={48} />
          <Text style={{ color: theme.page.fg }}>You've run out of Munzees to capture.</Text>
        </>}
      <View style={{ flex: 1 }}></View>
      <Button onPress={() => { setRunSubmit(false); setSubmit(true) }} mode="contained" icon="upload">Submit your Munzee</Button>
      <Portal>
        <Dialog
          visible={submit}
          onDismiss={() => { setSubmit(false) }}
          style={{ maxWidth: "100%", width: 600, alignSelf: "center", borderRadius: 8, backgroundColor: theme.page_content.bg }}>

          {runSubmit ? (submittedStatus ? (submittedStatus === "loading" ? <>
            <Dialog.Title>Submitting...</Dialog.Title>
          </> : <>
              <Dialog.Title>An Error Occured</Dialog.Title>
              <Dialog.Content>
                <Text style={{ color: theme.page.fg, textAlign: "center", fontSize: 16 }}>Was that a valid Barcode Value?</Text>
              </Dialog.Content>
            </>) : <>
              <Dialog.Title>Submitted</Dialog.Title>
              <Dialog.Actions>
                <Button onPress={() => { setRunSubmit(false); setCode(""); setSubmit(false) }}>Close</Button>
                <Button onPress={() => { setRunSubmit(false); setCode(""); setSubmit(true) }}>Submit Another</Button>
              </Dialog.Actions>
            </>) : <>
              <Dialog.Title>Submit your Munzee</Dialog.Title>
              <Dialog.Content>
                <TextInput
                  mode="outlined"
                  label="Munzee Print Code"
                  value={code}
                  onChangeText={code => setCode(code)}
                />
                <Text style={{ color: theme.page_content.fg }}>This is the "Barcode Value" on the Munzee's Print Page.</Text>
                {(!code.match(/(?:https?:\/\/(?:www.)?)?(?:munzee.com)?\/?m\/([^/]{0,30})\/([0-9]+)\/([0-9a-zA-Z]{6})/) && code.match(/(?:https?:\/\/(?:www.)?)?(?:munzee.com)?\/?m\/([^/]{0,30})\/([0-9]+)/)) && <Text style={{ color: theme.page_content.fg }}>This URL is missing the Munzee's Secret Code</Text>}
              </Dialog.Content>
              <Dialog.Actions>
                <Button onPress={() => {setCode("");setSubmit(false)}}>Cancel</Button>
                <Button disabled={!code.match(/(?:https?:\/\/(?:www.)?)?(?:munzee.com)?\/?m\/([^/]{0,30})\/([0-9]+)\/([0-9a-zA-Z]{6})/)} onPress={() => setRunSubmit(code)}>Submit</Button>
              </Dialog.Actions>
            </>}
        </Dialog>
      </Portal>
    </View>
  );
}

SignIn = ({ navigation }) => {
  const [checked, setChecked] = useState(false);
  const [language, setLanguage] = useState('');
  const [visible, setVisible] = useState(false);
  const [forgotPassword, setForgotPassword] = useState(false);
  const {
    user, onlineLogin, offlineLogin, isLoading, error
  } = useContext(UserContext);

  useEffect(() => {
    if (user?.id && user.isOnline === true) {
      handleSignIn(user);
    }
  }, [user]);

  useEffect(() => {
    async function checkLanguage() {
      const currentLocale = await getData('locale');

      if (currentLocale !== 'en' && currentLocale !== null && currentLocale !== undefined) {
        handleLanguage(currentLocale);
      }
    }
    checkLanguage();
  }, []);

  const handleFailedAttempt = (err) => {
    const translatedError = I18n.t(error) || err || error || I18n.t('global.pleaseTryAgain');

    Alert.alert(
      I18n.t('signIn.unableLogin'),
      translatedError, [
        { text: 'OK' }
      ],
      { cancelable: true }
    );
  };

  const handleSignUp = () => {
    navigation.navigate('Sign Up');
  };

  const handleSignIn = async (values, callback) => {
    if (callback) callback();
    Keyboard.dismiss();
    navigation.navigate('Root', values);
  };

  const handleLanguage = (lang) => {
    setLanguage(lang);
    I18n.locale = lang;
  };

  const handleTermsModal = () => {
    setVisible(true);
  };

  const handleForgotPassword = () => {
    setForgotPassword(true);
  };

  const deleteCreds = () => {
    deleteData('currentUser');
  };

  const signin = async (enteredValues, actions) => {
    const connected = await checkOnlineStatus();

    if (connected === true) {
      return onlineLogin(enteredValues).then((status) => {
        if (status) {
          return handleSignIn(enteredValues, actions.resetForm)
            .catch((err) => handleFailedAttempt(err));
        }
        return handleFailedAttempt();
      });
    }
    const offlineStatus = offlineLogin(enteredValues);
    if (offlineStatus === false) return handleFailedAttempt('Unable to login offline, please check your credentials');
    return handleSignIn(enteredValues, actions.resetForm);
  };

  return (

    <KeyboardAvoidingView
      enabled
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ backgroundColor: theme.colors.accent, flex: 1 }}
    >
      {!forgotPassword && (
        <SafeAreaView style={{ flex: 9 }}>
          <ScrollView keyboardShouldPersistTaps="always">
            <LanguagePicker language={language} onChangeLanguage={handleLanguage} />
            <Formik
              initialValues={{ username: '', password: '' }}
              onSubmit={async (values, actions) => {
                await signin(values, actions);
                setTimeout(() => {
                }, 3000);
              }}
              validationSchema={validationSchema}
              validateOnBlur={false}
              validateOnChange={false}
            >
              {(formikProps) => (
                <View>
                  <View style={styles.logoContainer}>
                    <BlackLogo height={130} />
                  </View>
                  <FormInput
                    label={I18n.t('signIn.username')}
                    formikProps={formikProps}
                    formikKey="username"
                    placeholder="[email protected]"
                    value={formikProps.values.username}
                  />
                  <FormInput
                    label={I18n.t('signIn.password')}
                    formikProps={formikProps}
                    formikKey="password"
                    placeholder={I18n.t('signIn.password')}
                    secureTextEntry={!checked}
                    value={formikProps.values.password}
                  />

                  <View style={{ flexDirection: 'row' }}>
                    <View style={styles.container}>
                      <View style={styles.checkbox}>
                        <Checkbox
                          disabled={false}
                          color={theme.colors.primary}
                          status={checked ? 'checked' : 'unchecked'}
                          onPress={() => {
                            setChecked(!checked);
                          }}
                        />
                      </View>
                      <Text style={styles.passwordText}>{I18n.t('signIn.showPassword')}</Text>
                    </View>
                    <Button style={{ flex: 1 }} onPress={handleForgotPassword}>
                      {I18n.t('signIn.forgotPassword.label')}
                    </Button>
                  </View>
                  {isLoading ? (
                    <ActivityIndicator />
                  ) : (
                    <Button mode="contained" theme={theme} style={styles.submitButton} onPress={formikProps.handleSubmit}>{I18n.t('signIn.login')}</Button>
                  )}
                </View>
              )}
            </Formik>
            <Button onPress={deleteCreds}>{I18n.t('signIn.deleteCreds')}</Button>
          </ScrollView>

          <TermsModal visible={visible} setVisible={setVisible} />
        </SafeAreaView>
      )}
      {
        forgotPassword && (
          <ForgotPassword
            navigation={navigation}
            forgotPassword={forgotPassword}
            setForgotPassword={setForgotPassword}
          />
        )
      }

      {
        !forgotPassword && (
          <View style={styles.footer}>
            <View style={styles.termsContainer}>
              <Text style={styles.accountText}>{I18n.t('signIn.noAccount')}</Text>
              <Button mode="text" theme={theme} color="#3E81FD" onPress={handleSignUp} labelStyle={{ marginLeft: 5 }}>
                {I18n.t('signIn.signUpLink')}
              </Button>
            </View>
            <View style={styles.termsContainer}>
              <Text style={styles.puenteText}>{I18n.t('signIn.puente2020')}</Text>
              <Button mode="text" theme={theme} onPress={handleTermsModal} labelStyle={{ marginLeft: 5 }}>{I18n.t('signIn.termsConditions')}</Button>
            </View>
          </View>
        )
      }

    </KeyboardAvoidingView>

  );
}

// export default () => (
export default function SignUp({ navigation }) {
  const [checked, setChecked] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [scrollViewScroll, setScrollViewScroll] = React.useState();
  const { register } = useContext(UserContext);
  const handleLogIn = () => {
    navigation.navigate('Sign In');
  };

  return (
    <KeyboardAvoidingView
      enabled
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ backgroundColor: theme.colors.accent, flex: 1 }}
    >
      <View>
        <Button icon="arrow-left" width={100} style={{ paddingTop: 40 }} onPress={handleLogIn}>
          Back
        </Button>
        <ScrollView
          style={{ backgroundColor: theme.colors.accent }}
          keyboardShouldPersistTaps="never"
          scrollEnabled={scrollViewScroll}
        >
          <SafeAreaView style={{ marginTop: 10 }}>
            <Formik
              initialValues={{
                firstname: '', lastname: '', email: '', phonenumber: '', password: '', password2: '', organization: ''
              }}
              onSubmit={(values, actions) => {
                if (!checked) {
                  alert(I18n.t('signUp.errorTerms')); // eslint-disable-line
                } else if (values.password !== values.password2) {
                  alert(I18n.t('signUp.errorPassword')) // eslint-disable-line
                } else {
                  register(values)
                    .then(() => navigation.navigate('Root')).catch((error) => {
                      // sign up failed alert user
                      console.log(`Error: ${error.code} ${error.message}`); // eslint-disable-line
                      alert(I18n.t('signUp.usernameError')); // eslint-disable-line
                    });
                }
                setTimeout(() => {
                  actions.setSubmitting(false);
                }, 1000);
              }}
              validationSchema={validationSchema}
            >
              {(formikProps) => (
                <>
                  <FormInput
                    label={I18n.t('signUp.firstName')}
                    formikProps={formikProps}
                    formikKey="firstname"
                    placeholder="John"
                    autoFocus
                  />
                  <FormInput
                    label={I18n.t('signUp.lastName')}
                    formikProps={formikProps}
                    formikKey="lastname"
                    placeholder="Doe"
                  />
                  <FormInput
                    label={I18n.t('signUp.email')}
                    formikProps={formikProps}
                    formikKey="email"
                    placeholder="[email protected]"
                  />
                  <FormInput
                    label={I18n.t('signUp.phoneNumber')}
                    formikProps={formikProps}
                    formikKey="phonenumber"
                    placeholder="123-456-7890"
                    keyboardType="numeric"
                  />
                  <FormInput
                    label={I18n.t('signUp.password')}
                    formikProps={formikProps}
                    formikKey="password"
                    placeholder="Password Here"
                    secureTextEntry
                  />
                  <FormInput
                    label={I18n.t('signUp.password2')}
                    formikProps={formikProps}
                    formikKey="password2"
                    placeholder="Password Here"
                    secureTextEntry
                  />
                  <Autofill
                    parameter="organization"
                    formikProps={formikProps}
                    formikKey="organization"
                    label="signUp.organization"
                    translatedLabel={I18n.t('signUp.organization')}
                    scrollViewScroll={scrollViewScroll}
                    setScrollViewScroll={setScrollViewScroll}
                  />
                  <Button mode="text" theme={theme} color="#3E81FD" style={styles.serviceButton} onPress={() => setVisible(true)}>{I18n.t('signUp.termsOfService.view')}</Button>
                  <View style={styles.container}>
                    <Text style={styles.serviceText}>
                      {I18n.t('signUp.termsOfService.acknoledgement')}
                    </Text>
                    <View style={styles.checkbox}>
                      <Checkbox
                        disabled={false}
                        color={theme.colors.primary}
                        status={checked ? 'checked' : 'unchecked'}
                        onPress={() => {
                          setChecked(!checked);
                        }}
                      />
                    </View>
                  </View>
                  {formikProps.isSubmitting ? (
                    <ActivityIndicator />
                  ) : (
                    <Button mode="contained" theme={theme} style={styles.submitButton} onPress={formikProps.handleSubmit}>{I18n.t('signUp.submit')}</Button>
                  )}

                  <TermsModal visible={visible} setVisible={setVisible} />
                </>
              )}
            </Formik>
          </SafeAreaView>
        </ScrollView>
      </View>
    </KeyboardAvoidingView>
  );
}