react-native-paper#Button JavaScript Examples

IdScreen = () => {
  const {client} = useIpfs();

  const id = async () => {
    try {
      console.log('Demo App .id start');
      console.log('Demo App .id', {result: inspect(await client.id())});
    } catch (error) {
      console.error('Demo App .id', {error});
    }
  };

  return (
    <View>
      <Button mode="contained" onPress={id}>
        Press me
      </Button>
    </View>
  );
}

export default function TermsModal(props) {
  const { visible, setVisible } = props;
  return (
    <Portal theme={theme}>
      <Modal
        visible={visible}
        theme={theme}
        contentContainerStyle={styles.modal}
        dismissable={false}
      >
        <ScrollView>
          <Headline theme={theme}>{I18n.t('termsModal.termsService')}</Headline>
          <Text>{I18n.t('termsModal.policy')}</Text>
          <Button mode="contained" theme={theme} color="#3E81FD" style={styles.button} onPress={() => setVisible(false)}>{I18n.t('termsModal.ok')}</Button>
        </ScrollView>
      </Modal>
    </Portal>
  );
}

AddScreen = () => {
  const {client} = useIpfs();

  return (
    <View>
      <Button mode="contained" onPress={addString(client)}>
        Add string
      </Button>
      <Button mode="contained" onPress={addUint8Array(client)}>
        Add Uint8Array
      </Button>
      <Button mode="contained" onPress={addUint8Arrays(client)}>
        Add Uint8Arrays
      </Button>
      <Button mode="contained" onPress={addNumbers(client)}>
        Add numbers
      </Button>
      <Button mode="contained" onPress={addBlob(client)}>
        Add blob
      </Button>
    </View>
  );
}

BottomSheet = ({isOpen, closeBottomSheet, options}) => {
  return (
    <Modal
      testID={'modal'}
      isVisible={isOpen}
      onSwipeComplete={closeBottomSheet}
      onBackButtonPress={closeBottomSheet}
      onBackdropPress={closeBottomSheet}
      swipeDirection={['down']}
      style={styles.view}>
      <View style={styles.content}>
        <Text style={styles.contentTitle}>What do you wanna do?</Text>
        {options.map((item) => {
          const {text, onPress} = item;
          return (
            <Button
              key={text}
              mode="text"
              labelStyle={styles.contentOptions}
              onPress={onPress}>
              {text}
            </Button>
          );
        })}
        <Button
          key="cancel"
          mode="text"
          color={DarkTheme.colors.error}
          labelStyle={styles.contentOptions}
          onPress={closeBottomSheet}>
          Cancel
        </Button>
      </View>
    </Modal>
  );
}

CatScreen = () => {
  const {client} = useIpfs();

  const cat = async () => {
    const CID = 'QmPZ9gcCEpqKTo6aq61g2nXGUhM4iCL3ewB6LDXZCtioEB';

    try {
      console.log('Demo App .cat start');

      const chunks = [];
      for await (const chunk of client.cat(CID)) {
        console.log('Demo App .cat', {chunk, type: typeof chunk});
        chunks.push(chunk);
      }
      const buffer = chunks.reduce((acc, chunk) => [...acc, ...chunk], []);
      const content = new TextDecoder().decode(new Uint8Array(buffer));

      console.log('Demo App .cat', {content});
    } catch (error) {
      console.error('Demo App .cat', {error});
    }
  };

  return (
    <View>
      <Button mode="contained" onPress={cat}>
        Press me
      </Button>
    </View>
  );
}

render() {
    const {commenting, comment, post, isBottomSheetOpen} = this.state;

    return (
      <View style={styles.commentScreen}>
        {this.renderComments()}
        <View style={styles.addComment}>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder={post.comment ? 'Comment' : 'Start a discussion'}
            maxLength={300}
            value={comment}
            dense={true}
            onChangeText={(c) => this.setComment(c)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            style={styles.commentBtn}
            loading={commenting}
            icon="send"
            onPress={() => this.comment()}>
            Comment
          </Button>
        </View>
        <BottomSheet
          isOpen={isBottomSheetOpen}
          closeBottomSheet={() => this.setBottomSheet(false)}
          options={[
            {text: 'Remove Comment', onPress: this.handleCommentDelete},
          ]}
        />
      </View>
    );
  }

AccountSettings = ({
  accountSettingsView, setAccountSettingsView, surveyingOrganization,
  scrollViewScroll, setScrollViewScroll
}) => (
  <View style={styles.mainContainer}>
    {accountSettingsView === 'NamePhoneEmail' && (
    <NamePhoneEmail />
    )}
    {accountSettingsView === 'ChangePassword' && (
    <Password />
    )}
    {accountSettingsView === 'FindRecords' && (
    <FindRecords />
    )}
    {accountSettingsView === 'Language' && (
    <Language />
    )}
    {accountSettingsView === 'OfflineData' && (
    <OfflineData
      surveyingOrganization={surveyingOrganization}
      scrollViewScroll={scrollViewScroll}
      setScrollViewScroll={setScrollViewScroll}
    />
    )}
    <Button onPress={() => {
      setAccountSettingsView('');
    }}
    >
      Back
    </Button>

  </View>
)

function AppButton(props) {
  return (
    <Button
      labelStyle={[styles.label, { ...props.labelStyles }]}
      mode="contained"
      uppercase={false}
      onPress={() => props.onSubmit()}
      loading={props.isLoadingVisible}
      style={[styles.container, { ...props.style }]}>
      {props.title}
    </Button>
  );
}

LsScreen = () => {
  const {client} = useIpfs();

  const ls = async () => {
    const CID = 'QmfGBRT6BbWJd7yUc2uYdaUZJBbnEFvTqehPFoSMQ6wgdr';

    try {
      console.log('Demo App .ls start');
      for await (const file of client.ls(CID)) {
        console.log('Demo App .ls', {file: inspect(file)});
      }
    } catch (error) {
      console.error('Demo App .ls', {error});
    }
  };

  return (
    <View>
      <Button mode="contained" onPress={ls}>
        Press me
      </Button>
    </View>
  );
}

function OverviewItem({ i, total }) {
  var small = total > 25;
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  var nav = useNavigation();
  var { t } = useTranslation();
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={i.icon} style={{ padding: 2, alignItems: "center" }}>
          <Image style={{ height: small ? 24 : 32, width: small ? 24 : 32 }} source={getIcon(i[0])} />
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, ...font(), fontSize: 12 }}>{i[1].total}</Text>
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
    contentStyle={{ backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <View>
        <Image style={{ height: 48, width: 48 }} source={getIcon(i[0])} />
      </View>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{i[1].total}x {(getType(i[0]) || { name: i[0].slice(49, -4) }).name}</Text>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{t('activity:point', { count: i[1].points })}</Text>
      <Button
        mode="contained"
        style={{ backgroundColor: theme.navigation.bg }}
        onPress={() => { setOpen(false); nav.push('DBType', { munzee: i[0].slice(49, -4) }) }}>
        {t('db:type_info')}
      </Button>
    </View>
  </Menu>
}

render() {
    return (
      <View style={styles.oauthButtons}>
        <Button
          icon="facebook"
          mode="outlined"
          color="#0D47A1"
          style={styles.oauthButton}
          accessibilityLabel="Sign In With Facebook"
          onPress={this.onFacebookSignIn}
          loading={this.props.isSigning && this.props.type === 'facebook'}
          disabled={this.props.isSigning}
        >
          Facebook
        </Button>
        <Button
          icon="google"
          mode="outlined"
          color="#f44336"
          style={styles.oauthButton}
          accessibilityLabel="Sign In With Google"
          onPress={this.onGoogleSignIn}
          loading={this.props.isSigning && this.props.type === 'google'}
          disabled={this.props.isSigning}
        >
          Google
        </Button>
      </View>
    );
  }

DefaultButton = ({
  theme,
  label,
  size,
  mode,
  ...props
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  const contentStyle = (size === 'compact') ? styling.compactContent : styling.defaultContent
  const colorStyle = (mode === 'contained') ? { color: theme.colors.buttonText } : {}

  return (
    <View style={styling.root}>
      <Button {...props} contentStyle={contentStyle} uppercase={false} compact mode={mode} labelStyle={[styling.text, colorStyle]}>
        {label}
      </Button>
    </View>
  )
}

function OverviewItem({ i, total }) {
  var small = total > 25;
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  var nav = useNavigation();
  var { t } = useTranslation();
  return <Menu
    visible={open}
    onDismiss={() => setOpen(false)}
    anchor={
      <TouchableRipple onPress={() => setOpen(true)}>
        <View key={i.icon} style={{ padding: 2, alignItems: "center" }}>
          <Image style={{ height: small ? 24 : 32, width: small ? 24 : 32 }} source={getIcon(i[0])} />
          <Text allowFontScaling={false} style={{ color: theme.page_content.fg, ...font(), fontSize: 12 }}>{i[1].total}</Text>
          {hostIcon(i[0]) && <Image style={{ height: small ? 16 : 24, width: small ? 16 : 24, position: "absolute", right: small ? -3 : -5, bottom: small ? 18 : 15 }} source={hostIcon(i[0])} />}
        </View>
      </TouchableRipple>
    }
    style={{ marginTop: 61 }}
    contentStyle={{ backgroundColor: theme.page_content.bg, borderWidth: theme.page_content.border ? 1 : 0, borderColor: theme.page_content.border }}
  >
    <View style={{ paddingHorizontal: 4, alignItems: "center" }}>
      <View>
        <Image style={{ height: 48, width: 48 }} source={getIcon(i[0])} />
        {hostIcon(i[0]) && <Image style={{ height: 36, width: 36, position: "absolute", right: -7.5, bottom: -7.5 }} source={hostIcon(i[0])} />}
      </View>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{i[1].total}x {(getType(i[0]) || { name: i[0].slice(49, -4) }).name}</Text>
      <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16, ...font("bold") }}>{t('activity:point', { count: i[1].points })}</Text>
      <Button
        mode="contained"
        style={{ backgroundColor: theme.navigation.bg }}
        onPress={() => { setOpen(false); nav.push('DBType', { munzee: i[0].slice(49, -4) }) }}>
        {t('db:type_info')}
      </Button>
    </View>
  </Menu>
}

render() {
    return (
      <>
        <AppbarHeader title={title} />
        <SafeAreaView style={styles.container}>
          <Spacer vertical={16}>
            <Button
              icon="logout"
              mode="contained"
              color={this.props.theme.colors.error}
              onPress={this.props.signOut}
            >
              Sign Out
            </Button>
          </Spacer>
        </SafeAreaView>
      </>
    );
  }

Footer = () => (
  <SafeAreaView>
    <Divider />
    <View style={styles.footer}>
      <View style={{ flex: 1 }}>
        <Button
          style={styles.btn}
          labelStyle={styles.cancel}
          mode="text"
          onPress={() => console.log('Pressed')}>
          Cancel
        </Button>
      </View>
      <View style={{ flex: 1 }}>
        <Button
          style={styles.btn}
          labelStyle={styles.ok}
          mode="text"
          onPress={() => console.log('Pressed')}>
          Reschedule
        </Button>
      </View>
    </View>
  </SafeAreaView>
)

function SyncButton ({group, game_id}) {
  const [pressed,setPressed] = React.useState(false);
  const theme = useSelector(i=>i.themes[i.theme]);
  const data = useAPIRequest(pressed?{
    cuppazee: true,
    endpoint: "clan/shadow/generate/v2",
    data: {
      game_id,
      group
    }
  }:null);
  if(pressed && !data) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64 }}>
      <ActivityIndicator size="large" color={theme.page_content.fg} />
    </View>
  }
  if(pressed) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64}}>
      <MaterialCommunityIcons name="check-bold" size={32} color={theme.page_content.fg} />
    </View>
  }
  return <View style={{padding: 4}}>
    <Button color={(theme.clan_header||theme.navigation).bg} mode="contained" onPress={()=>setPressed(true)}>
      Sync Shadow Players in {group}
    </Button>
  </View>
}

Bars = ({ name, icon, end }) => {
  const { colors } = useTheme();
  return (
    <>
      <View style={styles.mathProgressText}>
        <Button theme={{ colors: { primary: colors.text } }} icon={icon}>
          {i18n.t(name)}
        </Button>
        <Text>{end}%</Text>
      </View>
      <ProgressBar progress={end / 100} style={styles.matchProgressBar} />
    </>
  );
}

function RtdUriShortcutWriter(props, ref) {
  const scheme = props.scheme;
  const [value, setValue] = React.useState(props.value?.value || '');
  const inputRef = React.useRef();

  if (ref) {
    ref.current = {
      getValue: () => ({value, scheme}),
    };
  }

  const writeNdef = async () => {
    inputRef.current && inputRef.current.blur();

    if (!value) {
      return;
    }

    const url = scheme + value;
    await NfcProxy.writeNdef({type: 'URI', value: url});
  };

  return (
    <View>
      <View style={{flexDirection: 'row', marginBottom: 10}}>
        <Button mode="outlined" disabled>
          {scheme}
        </Button>

        <View style={{flex: 1}} />
      </View>

      <TextInput
        ref={inputRef}
        mode="outlined"
        label={InputLabel[scheme]}
        multiline={true}
        value={value}
        autoCapitalize={false}
        onChangeText={setValue}
        style={{marginBottom: 20}}
      />

      <Button mode="contained" labelStyle={{fontSize: 20}} onPress={writeNdef}>
        WRITE
      </Button>
    </View>
  );
}

Language = () => {
  useEffect(() => {
    async function setUserInformation() {
      const currentLocale = await getData('locale');
      setLanguage(currentLocale);
    }
    setUserInformation();
  }, [updated]);

  const [language, setLanguage] = useState('');
  const [updated, setUpdated] = useState(false);

  const handleLanguage = async (lang) => {
    setLanguage(lang);
    await storeData(lang, 'locale');
    setUpdated(true);
    I18n.locale = lang;
  };

  return (
    <View>
      <Headline>{I18n.t('languageSettings.chooseLanguage')}</Headline>
      <View style={styles.languageContainer}>
        {language === 'en' && (
          <Button mode="contained">{I18n.t('languagePicker.english')}</Button>
        )}
        {language !== 'en' && (
          <Button mode="outlined" onPress={() => { handleLanguage('en'); }}>{I18n.t('languagePicker.english')}</Button>
        )}
      </View>
      <View style={styles.languageContainer}>
        {language === 'es' && (
          <Button mode="contained">{I18n.t('languagePicker.spanish')}</Button>
        )}
        {language !== 'es' && (
          <Button mode="outlined" onPress={() => { handleLanguage('es'); }}>{I18n.t('languagePicker.spanish')}</Button>
        )}
      </View>
      <View style={styles.languageContainer}>
        {language === 'hk' && (
          <Button mode="contained">{I18n.t('languagePicker.creole')}</Button>
        )}
        {language !== 'hk' && (
          <Button mode="outlined" onPress={() => { handleLanguage('hk'); }}>{I18n.t('languagePicker.creole')}</Button>
        )}
      </View>
    </View>
  );
}

function NfcPromptAndroid(props) {
  const [visible, setVisible] = React.useState(false);
  const animValue = React.useRef(new Animated.Value(0)).current;
  const [_data, _setData] = useOutlet('androidPrompt');
  const {visible: _visible, message = ''} = _data || {};

  React.useEffect(() => {
    if (_visible) {
      setVisible(true);
      Animated.timing(animValue, {
        duration: 300,
        toValue: 1,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(animValue, {
        duration: 200,
        toValue: 0,
        useNativeDriver: true,
      }).start(() => {
        setVisible(false);
      });
    }
  }, [_visible, animValue]);

  function cancelNfcScan() {
    setTimeout(() => {
      NfcManager.cancelTechnologyRequest().catch(() => 0);
    }, 200);
    _setData({visible: false, message});
  }

  const bgAnimStyle = {
    backgroundColor: 'rgba(0,0,0,0.3)',
    opacity: animValue,
  };

  const promptAnimStyle = {
    transform: [
      {
        translateY: animValue.interpolate({
          inputRange: [0, 1],
          outputRange: [300, 0],
        }),
      },
    ],
  };

  return (
    <Modal transparent={true} visible={visible}>
      <View style={[styles.wrapper]}>
        <View style={{flex: 1}} />

        <Animated.View style={[styles.prompt, promptAnimStyle]}>
          <View
            style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Image
              source={require('../../images/nfc-512.png')}
              style={{width: 120, height: 120, padding: 20}}
              resizeMode="contain"
            />

            <Text>{message}</Text>
          </View>

          <Button mode="contained" onPress={cancelNfcScan}>
            CANCEL
          </Button>
        </Animated.View>

        <Animated.View style={[styles.promptBg, bgAnimStyle]} />
      </View>
    </Modal>
  );
}

HomeScreen = () => {
  const [tasks, setTasks] = useState(null);
  // const { navigation } = props;

  const showTasks = async () => {
    await getTasksAsync().then((result) => {
      setTasks(result);
    });
  };

  return (
    <View style={layout.screenContainer}>
      <Header />
      <ScrollView>
        <View style={layout.screenRow}>
          <Title>{I18n.t('home.myTasks')}</Title>
          <Card>
            <Card.Content>
              <ComingSoonSVG width={200} height={200} />
              <Paragraph>{I18n.t('home.comingSoon')}</Paragraph>
              <Button onPress={showTasks} mode="contained">
                <Text>{I18n.t('home.tasks')}</Text>
              </Button>
              {tasks != null
                && tasks.map((task) => (
                  <View key={task.task_id}>
                    <Text>{task.name}</Text>
                  </View>
                ))}
            </Card.Content>
          </Card>
        </View>
        {/* <View style={layout.screenRow}>
          <Text>My Pinned Forms</Text>
        </View> */}
        {/* <View style={layout.screenRow}>
          <Title>My Community Board</Title>
          <Card>
            <Card.Content>
              <ComingSoonSVG width={200} height={200} />

              <Paragraph>Coming Soon</Paragraph>
            </Card.Content>
          </Card>
        </View> */}
      </ScrollView>
    </View>
  );
}

Item = ({ item }) => {
  const { id, name, startTime, endTime, tags, avatar } = item;
  const navigation = useNavigation();
  const isTablet = DeviceInfo.isTablet();

  const dispatch = useDispatch();
  const onSelected = () => {
    dispatch(appointmentActions.appointmentSelected(id));
    if (!isTablet) {
      navigation.navigate('AppointmentDetail');
    }
  };

  return (
    <Card style={styles.card}>
      <ProfileCard name={name} avatar={avatar} onSelected={onSelected} />
      <Card.Content>
        <Divider />
        <Text style={styles.duration}>
          {startTime} - {endTime}
        </Text>
        <View style={styles.tags}>
          {tags.map((itx, i) => {
            const { labelColor, buttonColor } = random_rgba();
            return (
              <Button
                key={i}
                mode="contained"
                disabled
                compact
                uppercase={false}
                style={[styles.tag, { backgroundColor: buttonColor }]}
                labelStyle={[styles.tagLabel, { color: labelColor }]}>
                {itx}
              </Button>
            );
          })}
        </View>
      </Card.Content>
    </Card>
  );
}

function HexPads(props) {
  const {addByteToCmd} = props;
  const [value, setValue] = React.useState('');
  const values = Array.from({length: 16});
  const rows = values.reduce((acc, _, idx) => {
    if (idx % 4 === 0) {
      acc.push([]);
    }

    acc[acc.length - 1].push(idx);
    return acc;
  }, []);

  function addHexChar(c) {
    if (value.length === 1) {
      addByteToCmd(parseInt(value + c, 16));
      setValue('');
    } else {
      setValue(c);
    }
  }

  return (
    <View>
      {rows.map((row, idx) => (
        <View key={idx} style={{flexDirection: 'row', padding: 10}}>
          {row.map((hex) => {
            const c = hex.toString(16).toUpperCase();
            return (
              <Button
                key={c}
                mode={value === c ? 'contained' : 'text'}
                // issue #24: force the elevation to 0 to workaround
                style={{elevation: 0}}
                onPress={() => addHexChar(c)}>
                {c}
              </Button>
            );
          })}
        </View>
      ))}
    </View>
  );
}

export default function Create() {
    const [title, setTitle] = useState("")
    const [body, setbody] = useState("")

    const createTwoButtonAlert = () =>
        Alert.alert(
            "Alert",
            "Add Blog through our website",
            [
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                { text: "OK", onPress: () => Linking.openURL('http://getplaced.pythonanywhere.com/Add_Blog_Post/') }
            ]
        );

    return (
        <View>
            <TextInput style={styles.inputStyle}
                label="Title"
                value={title}
                mode="outlined"
                onChangeText={text => setTitle(text)}
                outlineColor="#002223"
            />
            <TextInput style={{ marginTop: 10, padding: 8, }}
                label="Body"
                value={body}
                mode="outlined"
                onChangeText={text => setbody(text)}
            />
            <Button style={{ marginTop: 30, width: 180, marginLeft: 100, }}
                icon="pencil"
                mode="contained"
                color="#002223"
                onPress={createTwoButtonAlert}
            >Post Blog</Button>
        </View>
    )
}

GetScreen = () => {
  const {client} = useIpfs();

  const get = async () => {
    const CID = 'QmfGBRT6BbWJd7yUc2uYdaUZJBbnEFvTqehPFoSMQ6wgdr';
    try {
      console.log('Demo App .get start');

      for await (const file of client.get(CID)) {
        if (!file.content) {
          continue;
        }

        const content = [];

        for await (const chunk of file.content) {
          content.push(chunk);
        }

        console.log(
          'Demo App .get',
          inspect({
            file,
            content,
          }),
        );
      }
    } catch (error) {
      console.error('Demo App .get', {error});
    }
  };

  return (
    <View>
      <Button mode="contained" onPress={get}>
        Press me
      </Button>
    </View>
  );
}

Modal = ({
  theme,
  navigation,
  ...props
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()
  
  const cancelAction = props.cancelAction || navigation.getParam('cancelAction')
  const cancelLabel = props.cancelLabel || navigation.getParam('cancelLabel')
  const confirmLabel = props.confirmLabel || navigation.getParam('confirmLabel')
  const confirmAction = props.confirmAction || navigation.getParam('confirmAction')
  const title = props.title || navigation.getParam('title')
  const text = props.text || navigation.getParam('text')

  return (
    <View style={styling.root}>
      <View style={styling.modal}>
        <View style={styling.text}>
          <Title>{title}</Title>
        </View>

        <View style={styling.text}>
          <Text>{text}</Text>
        </View>

        <View style={styling.action}>
          <Button mode="contained" onPress={confirmAction}>
            {confirmLabel}
          </Button>
        </View>

        <View style={styling.action}>
          <Button mode="text" onPress={cancelAction}>
            {cancelLabel}
          </Button>
        </View>
      </View>
    </View>
  )
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function NameScreen({ navigation }) {
  const dispatch = useGlobals()[1];
  const [name, setName] = React.useState();
  const { colors } = useTheme();
  const buttonDisabled = !name || name.length < 2;
  const _handleContinue = () => {
    dispatch({
      type: 'setSession',
      fields: { name },
    });
    navigation.push('BirthDate');
  };

  return (
    <DefaultView>
      <SpaceSky />
      <Aquarius width={60} height={60} style={styles.aquarius} />
      <Backgrounds.Constellation
        color={colors.text}
        dotColor={colors.primary}
        height={180}
        width={180}
        style={styles.constellation}
      />
      <View style={{ flex: 0.5 }} />
      <View style={styles.textContainer}>
        <Headline style={styles.textHeadline}>
          {i18n.t("What's your name?")}
        </Headline>
        <Text style={styles.textText}>
          {i18n.t(
            'In order to give you accurate and personal information we need to know some info'
          )}
        </Text>
      </View>
      <View style={styles.inputContainer}>
        <CustomInput
          value={name}
          placeholder={i18n.t('Write here')}
          onChangeText={(text) => setName(text)}
          style={{ fontSize: 12 }}
          maxLength={20}
        />
      </View>
      <View style={styles.buttonContainer}>
        <Button
          mode="contained"
          disabled={buttonDisabled}
          onPress={_handleContinue}
        >
          {i18n.t('Continue')}
        </Button>
      </View>
    </DefaultView>
  );
}

function RtdUriWriter(props, ref) {
  const [value, setValue] = React.useState(props.value?.value || '');
  const [prefix, setPrefix] = React.useState(props.value?.prefix || 'https://');
  const [showMenu, setShowMenu] = React.useState(false);
  const inputRef = React.useRef();

  if (ref) {
    ref.current = {
      getValue: () => ({value, prefix}),
    };
  }

  const writeNdef = async () => {
    inputRef.current && inputRef.current.blur();

    if (!value) {
      return;
    }

    let url = value;
    if (prefix !== '---') {
      url = prefix + value;
    }

    await NfcProxy.writeNdef({type: 'URI', value: url});
  };

  return (
    <View>
      <View style={{flexDirection: 'row', marginBottom: 10}}>
        <Menu
          visible={showMenu}
          onDismiss={() => setShowMenu(false)}
          anchor={
            <Button mode="outlined" onPress={() => setShowMenu(true)}>
              {prefix}
            </Button>
          }>
          {['https://', 'http://', '---'].map((type) => (
            <Menu.Item
              key={type}
              onPress={() => {
                setPrefix(type);
                setShowMenu(false);
              }}
              title={type}
            />
          ))}
        </Menu>
        <View style={{flex: 1}} />
      </View>

      <TextInput
        ref={inputRef}
        mode="outlined"
        label="URI"
        multiline={true}
        value={value}
        autoCapitalize={false}
        onChangeText={setValue}
        style={{marginBottom: 20}}
      />

      <Button mode="contained" labelStyle={{fontSize: 20}} onPress={writeNdef}>
        WRITE
      </Button>
    </View>
  );
}

export default function AuthScreen({route}) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [status, setStatus] = React.useState(0);
  const navigation = useNavigation();
  const discovery = {
    authorizationEndpoint: 'https://api.munzee.com/oauth',
    tokenEndpoint: 'https://api.munzee.com/oauth/login',
  };
  const data = useAPIRequest({
    endpoint: 'competition/join/v1',
    cuppazee: true,
    data: {
      username: route.params.username
    }
  })
  const config = data?.team === "pear" ? config_pear : config_pine;

  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: config.client_id,
      scopes: ['read'],
      redirectUri: config.redirect_uri,
      state: JSON.stringify({
        redirect: Oconfig.redirect_uri,
        platform: Platform.OS
      })
    },
    discovery
  );

  React.useEffect(() => {
    if (response) {
      (async function () {
        if (!response.params || !response.params.teaken) return setStatus("invalid_response");
        if(response.params.status) {
          setStatus(`success_${response.params.status}`);
        } else {
          setStatus("success");
        }
      })()
    }
  }, [response]);
  if (status === "loading") {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
      <ActivityIndicator size="large" color={theme.page_content.fg} />
    </View>
  }
  if (status === "success" || status === "success_reopt" || status === "success_already") {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
      {status !== "success_already" && <>
        <Image source={data?.team === "pine" ? require('assets/pine.png') : require('assets/pear.png')} style={{ height: 128, width: 128, borderRadius: 8, marginBottom: 16 }} />
        <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{response.params.username} {status === "success" ? "has joined" : "is in"} Team {data?.team.toUpperCase() || '???¿??'}</Text>
      </>}
      <Button mode="contained" onPress={()=>navigation.replace('CompetitionHome')}>Return to Competition Dashboard</Button>
    </View>
  }
  return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
    {!!status && <>
      {statusIcons[status]==="loading"?<ActivityIndicator size="large" color={theme.page_content.fg} />:<MaterialCommunityIcons name={statusIcons[status]} color={theme.page.fg} size={48} />}
      <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{statusMessages[status]}</Text>
    </>}
    <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24 }}>Opt-in to Competition</Text>
    <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16 }}>{t('auth:tap')}</Text>
    <IconButton
      disabled={!data || (status && status !== "invalid_response")}
      size={32}
      onPress={() => {
        setStatus("waiting_for_login");
        promptAsync({
          useProxy: Oconfig.useProxy,
          redirectUri: config.redirect_uri
        });
      }}
      color={theme.page_content.fg}
      icon="login-variant"
    />
  </View>
}