react-native-paper#Portal JavaScript Examples

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>
  );
}

function Report({qr}) {
  var [reportMenu, setReportMenu] = React.useState(false);
  var [reportOption, setReportOption] = React.useState("invalid_secret_code");
  var [reportMessage, setReportMessage] = React.useState("");
  function report(data) {
    setRunReport({qr,data});
  }
  var [runReport, setRunReport] = React.useState(false);
  var { status: reportStatus } = useAPIRequest(runReport ? {
    endpoint: 'user/universal/report/v1',
    data: {
      report: JSON.stringify(runReport, null, 2)
    },
    cuppazee: true
  } : null, true)
  return <>
    <Button onPress={() => setReportMenu(true)} icon="alert">Report as broken</Button>
    <Portal>
        <Dialog visible={reportMenu} onDismiss={()=>setReportMenu(false)}>
          {runReport ? (reportStatus === "loading" ? <Dialog.Title>Reporting...</Dialog.Title> : <>
            <Dialog.Title>{!reportStatus ? "Munzee Reported" : "An error occurred"}</Dialog.Title>
            <Dialog.Actions>
              <Button onPress={()=>{setReportMenu(false);setRunReport(false)}}>Close</Button>
            </Dialog.Actions>
          </>) : <>
            <Dialog.Title>Report Munzee</Dialog.Title>
            <Dialog.Content>
              <RadioButton.Group onValueChange={value => setReportOption(value)} value={reportOption}>
                <RadioButton.Item label="Invalid Secret Code" value="invalid_secret_code" />
                <RadioButton.Item label="Unable to Scan" value="unable_to_scan" />
                <RadioButton.Item label="Other" value="other" />
                {reportOption === "other" && <TextInput label="Report Message" mode="outlined" value={reportMessage} onChangeText={(msg)=>setReportMessage(msg)} />}
              </RadioButton.Group>
              </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={()=>setReportMenu(false)}>Cancel</Button>
              <Button onPress={()=>report(reportOption==="other"?reportMessage:reportOption)}>Report</Button>
            </Dialog.Actions>
          </>}
        </Dialog>
    </Portal>
  </>
}

UserTile = React.memo(function ({ i, index, week }) {
  var theme = useSelector(i => i.themes[i.theme]);
  var [open, setOpen] = React.useState(false);
  var dark = false;
  var route = useRoute();
  var level_colors = useLevelColours();
  if (theme.dark) {
    dark = true;
  }
  const types = week?.requirements ?? []
  var user = useAPIRequest(open ? {
    endpoint: `weekly/player/v1`,
    data: {
      user_id: i.i,
      week_id: route.params.week
    },
    cuppazee: true
  } : null)
  return <View style={{ padding: 4 }}>
    <Card noPad>
      <TouchableRipple onPress={() => {
        setOpen(!open)
      }}>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <View style={{ paddingHorizontal: 8, paddingVertical: 4 }}>
            <Image source={getIcon(`https://munzee.global.ssl.fastly.net/images/avatars/ua${i?.i?.toString?.(36)}.png`)} style={{ width: 36, height: 36, borderRadius: 18 }} />
          </View>
          <View style={{ paddingHorizontal: 8, paddingLeft: 0, flex: 1, flexDirection: "row", alignItems: "center" }}>
            <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>#{index + 1} - {i.n}</Text>
          </View>
          <View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: open ? 0 : 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg : undefined, backgroundColor: dark ? undefined : level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg, width: 60, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
            <Text allowFontScaling={false} style={{ color: level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].fg, fontSize: 16, ...font("bold") }}>{i.p?.toLocaleString?.() || "0"}</Text>
            {week && !!i.f && status(week) === "resultssoon" && <MaterialCommunityIcons name="check-bold" color={theme.page_content.fg} style={{ marginLeft: 4 }} size={16} />}
          </View>
        </View>
      </TouchableRipple>
      <Portal>
        <Dialog
          visible={open}
          onDismiss={() => { setOpen(false) }}
          style={{ maxWidth: 390, alignSelf: "center", borderRadius: 8, backgroundColor: theme.page_content.bg }}>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            <View style={{ paddingHorizontal: 8, paddingVertical: 4 }}>
              <Image source={getIcon(`https://munzee.global.ssl.fastly.net/images/avatars/ua${i?.i?.toString?.(36)}.png`)} style={{ width: 36, height: 36, borderRadius: 18 }} />
            </View>
            <View style={{ paddingHorizontal: 8, paddingLeft: 0, flex: 1, justifyContent: "center" }}>
              <Text allowFontScaling={false} style={{ fontSize: 16, ...font("bold"), color: theme.page_content.fg }} numberOfLines={1} ellipsizeMode={"tail"}>#{index + 1} - {i.n}</Text>
            </View>
            <View style={{ alignSelf: "stretch", borderTopRightRadius: 8, borderBottomRightRadius: open ? 0 : 8, borderLeftWidth: dark ? 2 : 0, borderLeftColor: dark ? level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg : undefined, backgroundColor: dark ? undefined : level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].bg, width: 60, alignItems: "center", justifyContent: "center" }}>
              <Text allowFontScaling={false} style={{ color: level_colors[Math.max(0, Math.min(Math.ceil(i.p / 50), 5))].fg, fontSize: 16, ...font("bold") }}>{i.p?.toLocaleString?.() || "0"}</Text>
            </View>
          </View>
          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap" }}>
            {types.map((x, xi) => <View key={x.id} style={{ padding: 4, width: 80, flexGrow: 1, alignItems: "center", opacity: ((user?.d || [])[xi] ?? 0) > 0 ? 1 : 0.4 }}>
              <Image style={{ height: 32, width: 32, marginHorizontal: 8 }} source={getIcon(x.type)} />
              <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 16, color: theme.page_content.fg }}>{(user?.d || [])[xi] ?? '?'}</Text>
            </View>)}
          </View>
        </Dialog>
      </Portal>
    </Card>
  </View>
})

function MainStackNavigation() {
  const [{ showLoader }] = useGlobals();
  const { colors } = useTheme();
  return (
    <>
      <Sta.Navigator screenOptions={{ headerShown: false }} mode="modal">
        <Sta.Screen name="Home" component={BottomBarNavigation} />
        <Sta.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            cardStyle: {
              backgroundColor: 'transparent',
              marginTop: 50,
              borderTopLeftRadius: 30,
              borderTopRightRadius: 30,
            },
          }}
        />
        <Sta.Screen
          name="Signs"
          component={ZodiacScreen}
          options={{
            cardStyle: {
              backgroundColor: 'transparent',
              marginTop: 50,
              borderTopLeftRadius: 30,
              borderTopRightRadius: 30,
            },
          }}
        />
        <Sta.Screen
          name="Question"
          component={AstrologerQuestionScreen}
          options={{
            cardStyle: {
              backgroundColor: 'transparent',
              marginTop: 100,
              borderTopLeftRadius: 30,
              borderTopRightRadius: 30,
            },
          }}
        />
      </Sta.Navigator>
      {showLoader && (
        <Portal>
          <BlurView
            intensity={70}
            style={[
              StyleSheet.absoluteFill,
              {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                zIndex: 50,
              },
            ]}
          >
            <View
              style={{
                backgroundColor: colors.background,
                padding: 20,
                borderRadius: 15,
              }}
            >
              <ActivityIndicator size={50} />
            </View>
          </BlurView>
        </Portal>
      )}
    </>
  );
}

function Tabs() {
  const isFocused = useIsFocused();
  const safeArea = useSafeArea();
  let tabBarProps = {};

  if (isTablet) {
    tabBarProps = {
      tabBar: props => <TabBar {...props} />,
    };
  }

  return (
    <React.Fragment>
      <Tab.Navigator
        initialRouteName="Feed"
        shifting={true}
        labeled={false}
        sceneAnimationEnabled={false}
        activeColor="#00aea2"
        inactiveColor="#95a5a6"
        barStyle={{ backgroundColor: '#ffff' }}
        {...tabBarProps}>
        <Tab.Screen
          name="Appointments"
          component={MyAppointments}
          options={{
            tabBarIcon: 'calendar-clock',
          }}
        />

        <Tab.Screen
          name="Patients"
          component={Patients}
          options={{
            tabBarIcon: 'account-multiple',
          }}
        />
        <Tab.Screen
          name="Departments"
          component={Departments}
          options={{
            tabBarIcon: 'layers',
          }}
        />
        <Tab.Screen
          name="Reports"
          component={Reports}
          options={{
            tabBarIcon: 'book-open',
          }}
        />
      </Tab.Navigator>
      <Portal>
        <FAB
          visible={isFocused} // show FAB only when this screen is focused
          icon="plus-box"
          label={isTablet ? 'Create new' : null}
          style={[
            styles.fab,
            {
              bottom: safeArea.bottom + 65,
            },
          ]}
        />
      </Portal>
    </React.Fragment>
  );
}

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>
  );
}

export default function UseCamera(
  {
    cameraVisible, setCameraVisible, formikProps, formikKey, setImage
  }
) {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [cameraImage, setCameraImage] = useState(null);
  const [zoom, setZoom] = useState(0);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePicture = async () => {
    if (camera) {
      const photo = await camera.takePictureAsync({
        base64: true,
        aspect: [4, 3],
        quality: 1
      });

      setCameraImage(photo.uri);
      setImage(photo.uri);
      formikProps.setFieldValue(formikKey, `data:image/jpg;base64,${photo.base64}`);
    }
  };

  const resetPicture = () => {
    setCameraImage(null);
    formikProps.setFieldValue(formikKey, null);
  };

  let camera = useRef(null);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>{I18n.t('camera.noAccess')}</Text>;
  }
  return (
    <Portal theme={theme}>
      <Modal
        visible={cameraVisible}
        theme={theme}
        contentContainerStyle={styles.modal}
        dismissable={false}
      >
        <View style={{ width: 'auto', height: 500, padding: 10 }}>
          {cameraImage ? (
            <>
              <Image source={{ uri: cameraImage }} style={{ width: 'auto', height: 400 }} />
              <Button onPress={resetPicture}>{I18n.t('camera.retake')}</Button>
            </>
          ) : (
            <>
              <Camera
                style={{ flex: 5 }}
                type={type}
                ref={(ref) => {
                  camera = ref;
                }}
                autofocus
                zoom={zoom}
                base64
              >
                <View
                  style={styles.cameraButtonContainer}
                >
                  <TouchableOpacity
                    style={styles.flipContainer}
                    onPress={() => {
                      setType(
                        type === Camera.Constants.Type.back
                          ? Camera.Constants.Type.front
                          : Camera.Constants.Type.back
                      );
                    }}
                  >
                    <Text style={styles.cameraButtonText}>{I18n.t('camera.flip')}</Text>
                  </TouchableOpacity>
                  <View style={styles.cameraButtonContainer}>
                    <View style={styles.zoomContainer}>
                      <TouchableOpacity
                        onPress={() => {
                          setZoom(
                            zoom === 0.4
                              ? zoom
                              : zoom + 0.1
                          );
                        }}
                      >
                        <Text style={styles.cameraButtonText}> + </Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        onPress={() => {
                          setZoom(
                            zoom === 0
                              ? zoom
                              : zoom - 0.1
                          );
                        }}
                      >
                        <Text style={styles.cameraButtonText}> - </Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>
              </Camera>
              <Button onPress={takePicture}>{I18n.t('camera.takePicture')}</Button>
            </>
          )}
        </View>
        <Button mode="contained" style={styles.button} onPress={() => setCameraVisible(false)}>{I18n.t('camera.done')}</Button>
      </Modal>
    </Portal>
  );
}