react-native#Clipboard TypeScript Examples
The following examples show how to use
react-native#Clipboard.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Routes.tsx From vsinder with Apache License 2.0 | 7 votes |
|
function ErrorFallback({ resetErrorBoundary, error }: FallbackProps) {
return (
<ScreenWrapper>
<ScrollView>
<MyHeader>App Crashed:</MyHeader>
<MyText style={{ marginVertical: 40, fontSize: 16 }}>
{error?.message}
</MyText>
<MyButton
style={{ marginBottom: 20 }}
secondary
onPress={() => Clipboard.setString(error?.stack || "")}
>
copy stacktrace to clipboard
</MyButton>
<MyButton
style={{ marginBottom: 20 }}
secondary
onPress={() =>
Linking.openURL("https://github.com/benawad/vsinder/issues")
}
>
report a bug
</MyButton>
<MyButton onPress={resetErrorBoundary}>reload app</MyButton>
</ScrollView>
</ScreenWrapper>
);
}
Example #2
| Source File: verificationCode.tsx From companion-kit with MIT License | 6 votes |
|
onChangeVerificationCodeText = async (value, index) => {
if (!value || isNaN(value) || this.viewModel.isPasting) return;
if (!!this.viewModel.verificationCodeValue[index]) {
if (index < this.viewModel.verificationCodeValue.length - 1) {
this.viewModel.inputRefArray[index + 1].focus();
this.onChangeVerificationCodeText(value, index + 1);
}
return;
}
const pastedContent = await Clipboard.getString();
const isPasted = value.includes(pastedContent);
if (!!pastedContent && isPasted) {
this.handlePastedContent(pastedContent, index);
return;
}
let filteredValue = value;
if (value.length > 1) {
filteredValue = value.charAt(value.length - 1);
}
this.viewModel.verificationCodeValue[index] = filteredValue;
if (index !== (this.viewModel.inputRefArray.length - 1)) {
this.viewModel.inputRefArray[index + 1].focus();
return;
}
await this.submitVerificationCode();
}
Example #3
| Source File: Routes.tsx From vsinder-app with Apache License 2.0 | 6 votes |
|
function ErrorFallback({ resetErrorBoundary, error }: FallbackProps) {
return (
<ScreenWrapper>
<ScrollView>
<MyHeader>App Crashed:</MyHeader>
<MyText style={{ marginVertical: 40, fontSize: 16 }}>
{error?.message}
</MyText>
<MyButton
style={{ marginBottom: 20 }}
secondary
onPress={() => Clipboard.setString(error?.stack || "")}
>
copy stacktrace to clipboard
</MyButton>
<MyButton onPress={resetErrorBoundary}>reload app</MyButton>
</ScrollView>
</ScreenWrapper>
);
}
Example #4
| Source File: RootErrorBoundary.tsx From react-native-template with MIT License | 6 votes |
|
showError = () => {
Alert.alert(
this.state.error?.name || "Error",
this.state.error?.stack || RootErrorBoundary.NO_STACK,
[
{
text: "Cancel",
onPress: () => {
return
},
},
{
text: "Copy & Open Issue Form",
onPress: () => {
const stackTrace =
this.state.error?.stack || RootErrorBoundary.NO_STACK
Clipboard.setString(stackTrace)
Linking.openURL(RootErrorBoundary.ISSUE_REPORTING_URL)
},
},
],
{
cancelable: false,
}
)
}
Example #5
| Source File: CodeSnippeter.tsx From vsinder with Apache License 2.0 | 4 votes |
|
CodeSnippeter: React.FC<ProfileStackNav<"codeSnippeter">> = ({
navigation,
route: { params },
}) => {
const scrollView = useRef<ScrollView>(null);
return (
<ScreenWrapper>
<Formik
validateOnBlur={false}
validateOnChange={false}
initialValues={{
code: "",
language: "auto",
theme: "vscode",
fontFamily: "Fira Code",
}}
validate={(v) => (v.code ? {} : { code: "required" })}
onSubmit={async (values) => {
const tmpId = genId();
const { codeImgs, set } = useCodeImgs.getState();
set({ codeImgs: [...codeImgs, { tmpId, value: "" }] });
if (params?.replace) {
navigation.replace("manageCodePics");
} else {
navigation.navigate("manageCodePics");
}
try {
const r = await fetch(
"https://x9lecdo5aj.execute-api.us-east-1.amazonaws.com/code-to-img",
{
method: "POST",
body: JSON.stringify(values),
headers: {
"Content-Type": "application/json",
},
}
);
if (r.status !== 200) {
throw new Error(await r.text());
}
const { key } = await r.json();
if (!key) {
throw new Error("bad input");
}
const { codeImgs, set } = useCodeImgs.getState();
set({
codeImgs: codeImgs.map((x) =>
x.tmpId === tmpId ? { tmpId, value: key } : x
),
});
} catch (err) {
showMessage({
message: err.message,
duration: 10000,
type: "danger",
});
const { codeImgs, set } = useCodeImgs.getState();
set({
codeImgs: codeImgs.filter((x) => x.tmpId !== tmpId),
});
}
}}
>
{({ values, handleSubmit, setFieldValue }) => {
return (
<KeyboardAwareScrollView
ref={scrollView}
scrollToEndOnKeyboardOpen
automaticallyAdjustContentInsets={false}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
>
<FormSpacer>
<SelectField
label="Syntax Highlighting:"
name="language"
options={languageOptions}
/>
</FormSpacer>
<FormSpacer>
<SelectField
label="Theme:"
name="theme"
options={themeOptions}
/>
</FormSpacer>
<FormSpacer>
<SelectField
label="Font Family:"
name="fontFamily"
options={fontOptions}
/>
</FormSpacer>
<FormSpacer>
<TextField
autoCapitalize="none"
multiline
numberOfLines={4}
name="code"
label={`Code ${values.code.length}/600`}
/>
{Platform.OS === "android" ? (
<MyButton
style={{ marginTop: 8 }}
secondary
onPress={() => {
Alert.alert(
"Paste from clipboard confirm",
"This will paste the text on your clipboard and put it in the text area while respecting the original formatting (text currently in the text area will be cleared)",
[
{
text: "Cancel",
onPress: () => {},
style: "cancel",
},
{
text: "OK",
onPress: () =>
Clipboard.getString().then((s) => {
setFieldValue("code", s);
}),
},
],
{ cancelable: false }
);
}}
>
paste with formatting
</MyButton>
) : null}
</FormSpacer>
<MyButton onPress={() => handleSubmit()}>
Save code snippet
</MyButton>
<View style={{ height: 30 }} />
</KeyboardAwareScrollView>
);
}}
</Formik>
</ScreenWrapper>
);
}
Example #6
| Source File: referral-screen.tsx From beancount-mobile with MIT License | 4 votes |
|
ReferralScreen = connect(
(state: { base: { userId: string } }) => ({ userId: state.base.userId })
)(function ReferralScreen(props: Props): JSX.Element {
React.useEffect(() => {
async function init() {
await analytics.track("page_view_referral", {});
}
init();
}, []);
const { userId } = props;
const shareLink = `beancount.io/sign-up/?src=${Platform.OS}&by=${userId}`;
const theme = useTheme().colorTheme;
const styles = getStyles(theme);
return (
<View style={styles.container}>
<NavigationBar
title={i18n.t("referral")}
showBack
navigation={props.navigation}
/>
<View style={styles.body}>
<CommonMargin />
<CommonMargin />
<ReferralGiftIcon />
<CommonMargin />
<Text style={styles.title}>{i18n.t("rewardSummary")}</Text>
<CommonMargin />
<Text style={styles.summary}>{i18n.t("rewardDetail")}</Text>
<CommonMargin />
<CommonMargin />
<View style={styles.shareLinkContainer}>
<Text numberOfLines={1} style={styles.shareLink}>
{shareLink}
</Text>
<TouchableOpacity
style={styles.copyBtn}
onPress={async () => {
Clipboard.setString(shareLink);
Toast.show(i18n.t("copied"), 1);
await analytics.track("tap_share_link_copy", { shareLink });
}}
>
<Text style={styles.copy}>{i18n.t("copy")}</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}></View>
<Button
style={styles.inviteBtn}
onPress={async () => {
await analytics.track("tap_navigate_to_invite", { shareLink });
props.navigation.navigate("Invite", { shareLink });
}}
>
<Text style={styles.invite}>{i18n.t("inviteFromContacts")}</Text>
</Button>
<CommonMargin />
<Button
style={styles.shareBtn}
onPress={async () => {
await analytics.track("tap_share_link_share", { shareLink });
Share.share({
message: `${i18n.t("recommend")} ${shareLink}`,
})
.then((result) => {
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
})
.catch((_) => {
Toast.fail(i18n.t("shareError"));
});
}}
>
<Text style={styles.share}>{i18n.t("share")}</Text>
</Button>
<CommonMargin />
</View>
</View>
);
})
