react-native-paper#Switch JavaScript Examples

Privacy = ({
  theme,
  navigation,
  user,
  togglePrivacyStatus,
  toggleFollowCountsHidden,
  toggleLikesDisabled,
  toggleCommentsDisabled,
  toggleVerificationHidden,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <RowsComponent items={[{
        label: t('Private Account'),
        caption: t('Approve followers'),
        onPress: togglePrivacyStatus,
        enabled: user.privacyStatus === 'PRIVATE',
      }, {
        label: t('Hide Total Followers'),
        caption: t('Followers can\'t view a list of your total followers'),
        onPress: toggleFollowCountsHidden,
        enabled: user.followCountsHidden,
      }, {
        label: t('Likes'),
        caption: t('Followers can like posts'),
        onPress: toggleLikesDisabled,
        enabled: !user.likesDisabled,
      }, {
        label: t('Comments'),
        caption: t('Followers can comment on posts'),
        onPress: toggleCommentsDisabled,
        enabled: !user.commentsDisabled,
      }, {
        label: t('Verification hidden'),
        caption: t('Verification label is hidden'),
        onPress: toggleVerificationHidden,
        enabled: !user.verificationHidden,
      }]}>
        {(privacy) => (
          <RowsItemComponent hasBorders>
            <UserRowComponent
              onPress={path(['onPress'])(privacy)}
              content={
                <View>
                  <Text style={styling.username}>{path(['label'])(privacy)}</Text>
                  <Caption>{path(['caption'])(privacy)}</Caption>
                </View>
              }
              action={
                <Switch
                  value={path(['enabled'])(privacy)}
                  onValueChange={privacy.onPress}
                />
              }
            />
          </RowsItemComponent>
        )}
      </RowsComponent>
    </View>
  )
}

export default function SettingsScreen({ navigation }) {
  var {t} = useTranslation();
  var logins = useSelector(i=>i.logins);
  var themes = useSelector(i=>i.themes);
  var theme = useSelector(i=>i.themes[i.theme]);
  var dispatch = useDispatch();
  var {width,height} = useDimensions().window;

  var [push,setPush] = React.useState(null);
  var [data,setData] = React.useState(false);
  React.useEffect(()=>{
    registerForPushNotificationsAsync().then(token => setPush(token));
  }, [])
  async function getCurrentOptions() {
    var d = await fetch('https://server.cuppazee.app/notifications/get', {
      method: 'POST',
      body: JSON.stringify({
        token: push,
        from: FROM,
        access_token: Object.values(logins)[0].token.access_token
      })
    })
    var {data:da} = await d.json();
    setData(Object.assign({
      token: push,
      munzee_blog: false,
      ...(da||{})
    }));
  }
  async function saveCurrentOptions() {
    setData(false)
    var d = await fetch('https://server.cuppazee.app/notifications/signup', {
      method: 'POST',
      body: JSON.stringify({
        data: JSON.stringify(data),
        from: FROM,
        access_token: token
      })
    })
    var da = await d.json();
    console.log(da);
    setData(da.data);
  }
  React.useEffect(()=>{
    console.log(push)
    if(push) {
      getCurrentOptions();
    }
  },[push]);

  if(Platform.OS==="web") return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <Text>{t('notifications:unavailable_web')}</Text>
  </View>

  if(push===false||data===null) return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <Text>{t('notifications:unavailable_generic')}</Text>
  </View>

  if(push===null||data===false) return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <ActivityIndicator size="large" color={theme.page.fg} />
  </View>
  return (
    <View style={{ flex: 1, backgroundColor: theme.page.bg, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{flex: 1, width:width>800?"50%":"100%",padding:4}}>
        <Card noPad>
          <ScrollView contentContainerStyle={{padding:8}}>
            <Text allowFontScaling={false} style={{color:theme.page_content.fg,...font()}}>Push: {push||'Disabled'}</Text>
            <View style={{flexDirection:"row",alignItems:"center"}}>
              <Text allowFontScaling={false} style={{color:theme.page_content.fg,...font("bold")}}>{t('notifications:munzee_blog')}</Text>
              <Switch color={theme.page_content.fg} value={data.munzee_blog} onValueChange={(value)=>setData({
                ...data,
                munzee_blog: value
              })} />
            </View>
            <Button mode="contained" color="green" onPress={saveCurrentOptions}>{t('notifications:save')}</Button>
          </ScrollView>
        </Card>
      </View>
    </View>
  );
}

export default function SettingsScreen({ navigation }) {
  var {t} = useTranslation();
  var logins = useSelector(i=>i.logins);
  var themes = useSelector(i=>i.themes);
  var theme = useSelector(i=>i.themes[i.theme]);
  var dispatch = useDispatch();
  var {width,height} = useDimensions().window;

  var [push,setPush] = React.useState(null);
  var [data,setData] = React.useState(false);
  async function enableNotifications() {
    try {
      if (Constants.isDevice && Platform.OS !== "web") {
        const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
        let finalStatus = existingStatus;
        if (existingStatus !== 'granted') {
          const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
          finalStatus = status;
        }
        if (finalStatus !== 'granted') {
          alert('Failed to get push token for push notification!');
          return;
        }
        token = await Notifications.getExpoPushTokenAsync();
        setPush(token);
      } else {
        setPush(false);
      }

      if (Platform.OS === 'android') {
        Notifications.createChannelAndroidAsync('default', {
          name: 'default',
          sound: true,
          priority: 'max',
          vibrate: [0, 250, 250, 250],
        });
      }
    } catch(e) {
      setPush(false);
    }
  }
  async function getCurrentOptions() {
    var d = await fetch('https://server.cuppazee.app/notifications/get', {
      method: 'POST',
      body: JSON.stringify({
        token: push,
        from: FROM,
        access_token: token
      })
    })
    var {data:da} = await d.json();
    setData(Object.assign({
      token: push,
      munzee_blog: false,
      ...(da||{})
    }));
  }
  async function saveCurrentOptions() {
    setData(false)
    var d = await fetch('https://server.cuppazee.app/notifications/signup', {
      method: 'POST',
      body: JSON.stringify({
        data: JSON.stringify(data),
        from: FROM,
        access_token: token
      })
    })
    var da = await d.json();
    console.log(da);
    setData(da.data);
  }
  React.useEffect(()=>{
    enableNotifications()
  },[]);
  React.useEffect(()=>{
    if(push) {
      getCurrentOptions();
    }
  },[push]);

  if(Platform.OS==="web") return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <Text>{t('notifications:unavailable_web')}</Text>
  </View>

  if(push===false||data===null) return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <Text>{t('notifications:unavailable_generic')}</Text>
  </View>

  if(push===null||data===false) return <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:theme.page.bg}}>
    <ActivityIndicator size="large" color={theme.page.fg} />
  </View>
  return (
    <View style={{ flex: 1, backgroundColor: theme.page.bg, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{flex: 1, width:width>800?"50%":"100%",padding:4}}>
        <Card noPad>
          <ScrollView contentContainerStyle={{padding:8}}>
            {/* <Text allowFontScaling={false} style={{color:theme.page_content.fg,...font()}}>Push: {push||'Disabled'}</Text> */}
            <View style={{flexDirection:"row",alignItems:"center"}}>
              <Text allowFontScaling={false} style={{color:theme.page_content.fg,...font("bold")}}>{t('notifications:munzee_blog')}</Text>
              <Switch color={theme.page_content.fg} value={data.munzee_blog} onValueChange={(value)=>setData({
                ...data,
                munzee_blog: value
              })} />
            </View>
            <Button mode="contained" color="green" onPress={saveCurrentOptions}>{t('notifications:save')}</Button>
          </ScrollView>
        </Card>
      </View>
    </View>
  );
}

export default function SettingsScreen({ navigation }) {
  var { t, i18n } = useTranslation();
  var logins = useSelector(i => i.logins);
  var themes = useSelector(i => i.themes);
  var theme = useSelector(i => i.themes[i.theme]);
  var dispatch = useDispatch();
  var { width } = useDimensions().window;

  function setLang(lang) {
    i18n.changeLanguage(lang);
    AsyncStorage.setItem('LANG', lang);
  }

  function logout(user_id) {
    dispatch(removeLogin(user_id))
  }

  var languages = [
    { value: 'cs', label: 'Čeština', flag: "CZ" },
    { value: 'da', label: 'Dansk' },
    { value: 'de', label: 'Deutsch' },
    { value: 'en-GB', label: 'English' },
    { value: 'en', label: 'English (US)' },
    { value: 'fi', label: 'Suomi' },
    { value: 'fr', label: 'Français' },
    { value: 'hu', label: 'Magyar' },
    // {value:'lt',label:'Lietuvių Kalba'},
    { value: 'nl', label: 'Nederlands' },
    { value: 'pt', label: 'Português' },
    // {value:'sv',label:'Svenska'}
  ]

  var themeslist = Object.entries(themes).filter(i => !i[0].startsWith('_')).reverse().map(i=>({
    value: i[1].id,
    label: t(`themes:${i[1].id}`)
  }))

  var baseSettings = useSelector(i => i.settings)
  var [settings, setSettings] = React.useState({});
  function setSetting(option, value) {
    var x = {}
    x[option] = value;
    setSettings({ ...settings, ...x });
  }
  function saveSettings() {
    dispatch(settingsDispatch(settings));
  }
  React.useEffect(() => {
    setSettings(baseSettings);
  }, [baseSettings])



  return (
    <View style={{ flex: 1, backgroundColor: theme.page.bg, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ flex: 1, width: width > 800 ? "50%" : "100%", padding: 4 }}>
        <Card noPad>
          <ScrollView contentContainerStyle={{ padding: 8 }}>
            {Object.entries(logins).map(user => <View key={user[0]} style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
              <Image source={{ uri: `https://munzee.global.ssl.fastly.net/images/avatars/ua${Number(user[0]).toString(36)}.png` }} style={{ borderRadius: 16, width: 32, height: 32 }} />
              <View style={{ paddingLeft: 8, flex: 1, alignSelf: "center" }}>
                <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{user[1].username}</Text>
              </View>
              <Button compact={true} mode="contained" color="red" onPress={() => logout(user[0])}>{t('settings:logout')}</Button>
            </View>)}
            <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
              <Button
                mode="contained"
                icon="account-plus"
                backgroundColor={theme.navigation.fg}
                style={theme.page_content.border ? { margin: 4, flex: 1, borderColor: "white", borderWidth: 1 } : { margin: 4, flex: 1 }}
                color={theme.navigation.bg}
                onPress={() => navigation.navigate('Auth')}>
                {t('settings:add_user')}
              </Button>
              {Platform.OS === "web" && <Button
                mode="contained"
                icon="reload"
                backgroundColor={theme.navigation.fg}
                style={theme.page_content.border ? { margin: 4, flex: 1, borderColor: "white", borderWidth: 1 } : { margin: 4, flex: 1 }}
                color={theme.navigation.bg}
                onPress={() => forceReload()}>
                {t('settings:update')}
              </Button>}
            </View>

            <View style={{ padding: 4 }}>
              <Text allowFontScaling={false} style={{ fontSize: 14, lineHeight: 14, marginBottom: -4, ...font(), color: theme.page_content.fg }}>Theme</Text>
              <Dropdown dense={true} mode="outlined" selectedValue={theme.id} onValueChange={i=>dispatch(setTheme(i))}>
                {themeslist.map(i=><DropdownItem label={i.label} value={i.value} />)}
              </Dropdown>
            </View>

            <View style={{ padding: 4 }}>
              <Text allowFontScaling={false} style={{ fontSize: 14, lineHeight: 14, marginBottom: -4, ...font(), color: theme.page_content.fg }}>Language</Text>
              <Dropdown dense={true} mode="outlined" selectedValue={i18n.language} onValueChange={setLang}>
                {languages.map(i=><DropdownItem label={i.label} value={i.value} />)}
              </Dropdown>
            </View>
            {/* <View style={{flexDirection:"row",alignItems:"center",padding:4}}>
              <Switch style={{marginRight: 8}} color={theme.page_content.fg} value={settings.activityV2Beta} onValueChange={(value)=>setSetting("activityV2Beta",!settings.activityV2Beta)} />
              <Text allowFontScaling={false} style={{color:theme.page_content.fg, flex: 1,...font("bold")}}>User Activity Beta</Text>
            </View> */}
            {Platform.OS === "ios" && <View style={{ flexDirection: "row", alignItems: "center", padding: 4 }}>
              <Switch style={{ marginRight: 8 }} color={theme.page_content.fg} value={settings.appleMaps} onValueChange={(value) => setSetting("appleMaps", !settings.appleMaps)} />
              <Text allowFontScaling={false} style={{ color: theme.page_content.fg, flex: 1, ...font("bold") }}>Apple Maps</Text>
            </View>}
            <View>
              {[
                ["clan_level_ind", "Individual"],
                ["clan_level_bot", "Both"],
                ["clan_level_gro", "Group"],
                ["clan_level_0", "No Level"],
                ["clan_level_1", "Level 1"],
                ["clan_level_2", "Level 2"],
                ["clan_level_3", "Level 3"],
                ["clan_level_4", "Level 4"],
                ["clan_level_5", "Level 5"],
                ["clan_level_null", "Empty"]
              ].map(i => <View style={{ padding: 4 }}>
                <Text allowFontScaling={false} style={{ fontSize: 14, lineHeight: 14, marginBottom: -4, ...font(), color: theme.page_content.fg }}>{i[1]}</Text>
                <TextInput
                  dense={true}
                  mode="outlined"
                  theme={{
                    dark: theme.dark,
                    colors: {
                      primary: (settings[i[0]]?.length == 7 && settings[i[0]]?.startsWith('#')) ? whiteOrBlack(settings[i[0]] || "") : theme.page_content.fg,
                      background: (settings[i[0]]?.length == 7 && settings[i[0]]?.startsWith('#')) ? settings[i[0]] : theme.page_content.bg,
                      placeholder: (settings[i[0]]?.length == 7 && settings[i[0]]?.startsWith('#')) ? whiteOrBlack(settings[i[0]] || "") : theme.page_content.fg,
                      text: (settings[i[0]]?.length == 7 && settings[i[0]]?.startsWith('#')) ? whiteOrBlack(settings[i[0]] || "") : theme.page_content.fg
                    }
                  }}
                  placeholder={i[1]}
                  value={settings[i[0]]}
                  onChangeText={text => setSetting(i[0], text)}
                />
              </View>)}
            </View>
            <Button
              mode="contained"
              icon="content-save"
              backgroundColor={theme.navigation.fg}
              style={theme.page_content.border ? { margin: 4, borderColor: "white", borderWidth: 1 } : { margin: 4 }}
              color={theme.navigation.bg}
              onPress={saveSettings}>
              {t('settings:save')}
            </Button>
          </ScrollView>
        </Card>
      </View>
    </View>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function ProfileScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const { name, sign, birthDate, number, relationship, sex } = session;
  const { colors } = useTheme();
  const { setRate } = useRate();
  const { setStartShare } = useShare(
    i18n.t(
      'Try Astrale, the most precise horoscopes app in this existential plain'
    ),
    'https://play.google.com/store/apps/details?id=josep.astrale'
  );
  const isDark = useIsDark();
  const isAndroid = PlatformUtils.isAndroid;
  const _handleDarkThemeChange = () => {
    dispatch({
      type: 'switchTheme',
      theme: isDark ? 'light' : 'dark',
    });
  };
  const _handleLogOut = async () => {
    await Storer.delete(SESSION_KEY);
    dispatch({ type: 'setLogOut' });
  };
  const _handleRatePress = async () => setRate(true);
  const _handleSharePress = async () => setStartShare(true);

  return (
    <BlurView
      style={[StyleSheet.absoluteFill]}
      tint={isDark ? 'dark' : 'light'}
      intensity={isAndroid ? 150 : 100}
    >
      <Backgrounds.Telescope color={colors.text} style={styles.telescope} />
      <Close position="right" />
      <View style={styles.headerContainer}>
        <Avatar.Text label={name.substring(0, 1)} />
        <View style={{ marginLeft: 25 }}>
          <Title>{i18n.t(sign)}</Title>
          <Title>{DateUtils.toEuropean(new Date(birthDate))}</Title>
        </View>
      </View>
      <Divider style={{ marginTop: 25 }} />
      <View style={styles.detailsContainer}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="gender-transgender"
            color={colors.text}
            size={18}
          />
          <Text style={{ marginLeft: 10 }}>{i18n.t(sex)} </Text>
        </View>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="heart-circle"
            color={colors.text}
            size={18}
          />
          <Text style={{ marginLeft: 10 }}>{i18n.t(relationship)} </Text>
        </View>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <MaterialCommunityIcons name="dice-6" color={colors.text} size={18} />
          <Text style={{ marginLeft: 10 }}>{number} </Text>
        </View>
      </View>
      <Divider style={{ marginTop: 15 }} />
      <View style={styles.buttonsContainer}>
        <Button
          onPress={_handleSharePress}
          icon="account-multiple"
          style={{ marginTop: 10 }}
          labelStyle={styles.buttonsLabel}
          uppercase={false}
          contentStyle={{ justifyContent: 'flex-start' }}
        >
          {i18n.t('Share with your friends')}
        </Button>
        <Button
          onPress={_handleRatePress}
          icon="message-draw"
          style={{ marginTop: 10 }}
          labelStyle={styles.buttonsLabel}
          uppercase={false}
          contentStyle={{ justifyContent: 'flex-start' }}
        >
          {i18n.t('Rate the app')}
        </Button>
        {__DEV__ && (
          <Button
            onPress={_handleLogOut}
            icon="restart"
            style={{ marginTop: 10 }}
            labelStyle={styles.buttonsLabel}
            uppercase={false}
            contentStyle={{ justifyContent: 'flex-start' }}
          >
            {i18n.t('Restart')}
          </Button>
        )}
      </View>
      <Divider style={{ marginTop: 10 }} />
      <View style={styles.optionsContainer}>
        <View style={styles.optionsOption}>
          <Button
            icon="brightness-6"
            style={styles.optionsButton}
            labelStyle={styles.optionsLabel}
            uppercase={false}
            theme={{ colors: { primary: colors.text } }}
          >
            {i18n.t('Dark theme')}
          </Button>
          <Switch onChange={_handleDarkThemeChange} value={isDark} />
        </View>
      </View>
      <Divider style={{ marginTop: 10 }} />
      <View
        style={[
          {
            position: 'absolute',
            bottom: 20,
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
          },
        ]}
      >
        <Text>v{Constants.manifest.version}</Text>
      </View>
    </BlurView>
  );
}

PostCreateForm = ({
  theme,
  navigation,
  handleSubmit,
  values,
  loading,
  handlePostPress,
  setFieldValue,
  cameraCapture,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()
  const uri = path(['data', 'uri'])(cameraCapture) || navigation.getParam('base64')

  return (
    <View style={styling.root}>
      <View style={styling.header}>
        <TouchableOpacity onPress={() => handlePostPress({ mediaObjects: [{ 'url4k': uri }] })}>
          <Avatar
            size="bigger"
            thumbnailSource={{ uri }}
            imageSource={{ uri }}
          />
        </TouchableOpacity>

        <View style={styling.text}>
          <Field name="text" component={TextDemo} placeholder={t('Write a caption')} multiline={true} />
        </View>
      </View>

      <View style={styling.sliderWrapper}>
        <Slider
          style={styling.slider}
          minimumValue={1}
          step={1}
          maximumValue={5}
          minimumTrackTintColor={theme.colors.primary}
          maximumTrackTintColor={theme.colors.disabled}
          value={getIndexByValue(values.lifetime)}
          onValueChange={(value) => setFieldValue('lifetime', getValueByIndex(value))}
        />
        
        <View style={styling.sliderIndicator}>
          <LifetimeIndicator />
        </View>
        
        <Text>{t('Post will be available {{lifetime}}', { lifetime: getTextByValue(t)(values.lifetime) })}</Text>
        <Caption>{t('All posts become stories when they are 24 hours from expiring')}</Caption>
      </View>

      <View style={styling.input}>
        <RowsComponent items={[{
          label: t('Comments'),
          caption: t('Followers can comment on posts'),
          onPress: () => setFieldValue('commentsDisabled', !values.commentsDisabled),
          type: 'action',
          enabled: !values.commentsDisabled,
        }, {
          label: t('Likes'),
          caption: t('Followers can like posts'),
          onPress: () => setFieldValue('likesDisabled', !values.likesDisabled),
          type: 'action',
          enabled: !values.likesDisabled,
        }, {
          label: t('Verification hidden'),
          caption: t('Verification label is hidden'),
          onPress: () => setFieldValue('verificationHidden', !values.verificationHidden),
          type: 'action',
          enabled: !values.verificationHidden,
        }]}>
          {(settings) => (
            <RowsItemComponent hasBorders>
              <UserRowComponent
                onPress={path(['onPress'])(settings)}
                content={
                  <View style={styling.user}>
                    <Text style={styling.username}>{path(['label'])(settings)}</Text>
                    <Caption>{path(['caption'])(settings)}</Caption>
                  </View>
                }
                action={
                  path(['type'])(settings) === 'navigation' ? (
                    <NextIcon fill={theme.colors.text} />
                  ) : (
                    <Switch
                      value={path(['enabled'])(settings)}
                      onValueChange={settings.onPress}
                    />
                  )
                }
              />
            </RowsItemComponent>
          )}
        </RowsComponent>
      </View>

      <View style={styling.input}>
        <DefaultButton label={t('Create Post')} onPress={handleSubmit} loading={loading} disabled={!uri} />
      </View>
    </View>
  )
}