Skip to content

Use Cases for Toast Android #210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chirag-singhal wants to merge 1 commit into
base: mlh-fellowship-migrated-ui-changes
Choose a base branch
from
Open

Use Cases for Toast Android #210

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 138 additions & 101 deletions packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@

'use strict';

const RNTesterBlock = require('../../components/RNTesterBlock');
const RNTesterPage = require('../../components/RNTesterPage');
const React = require('react');

const {
Expand All @@ -21,116 +19,155 @@ const {
TouchableWithoutFeedback,
} = require('react-native');

type Props = $ReadOnly<{||}>;
class ToastExample extends React.Component<Props> {
render(): React.Node {
return (
<RNTesterPage title="ToastAndroid">
<RNTesterBlock title="Simple toast">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show(
'This is a toast with short duration',
ToastAndroid.SHORT,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Toast with long duration">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show(
'This is a toast with long duration',
ToastAndroid.LONG,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Toast with top gravity">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravity(
'This is a toast with top gravity',
ToastAndroid.SHORT,
ToastAndroid.TOP,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Toast with center gravity">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravity(
'This is a toast with center gravity',
ToastAndroid.SHORT,
ToastAndroid.CENTER,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Toast with bottom gravity">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravity(
'This is a toast with bottom gravity',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Toast with x offset">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravityAndOffset(
'This is a toast with x offset',
ToastAndroid.SHORT,
ToastAndroid.CENTER,
50,
0,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
<RNTesterBlock title="Toast with y offset">
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravityAndOffset(
'This is a toast with y offset',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
0,
50,
)
}>
<Text style={styles.text}>Click me.</Text>
</TouchableWithoutFeedback>
</RNTesterBlock>
</RNTesterPage>
);
}
}
const ToastWithShortDuration = () => {
return (
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.show('Copied to clipboard!', ToastAndroid.SHORT)
}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const ToastWithLongDuration = () => {
return (
<TouchableWithoutFeedback
onPress={() => ToastAndroid.show('Sending message..', ToastAndroid.LONG)}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const ToastWithTopGravity = () => {
return (
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravity(
'Download Started..',
ToastAndroid.SHORT,
ToastAndroid.TOP,
)
}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const ToastWithCenterGravity = () => {
return (
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravity(
'A problem has been occured while submitting your data.',
ToastAndroid.SHORT,
ToastAndroid.CENTER,
)
}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const ToastWithBottomGravity = () => {
return (
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravity(
'Please read the contents carefully.',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
)
}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const ToastWithXOffset = () => {
return (
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravityAndOffset(
'Alex sent you a friend request',
ToastAndroid.SHORT,
ToastAndroid.TOP,
250,
0,
)
}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const ToastWithYOffset = () => {
return (
<TouchableWithoutFeedback
onPress={() =>
ToastAndroid.showWithGravityAndOffset(
'There was a problem with your internet connection',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
0,
100,
)
}>
<Text style={styles.text}>Tap to view toast</Text>
</TouchableWithoutFeedback>
);
};

const styles = StyleSheet.create({
text: {
color: 'black',
},
}
});

exports.title = 'Toast Example';
exports.description =
'Example that demonstrates the use of an Android Toast to provide feedback.';
exports.examples = [
{
title: 'Basic toast',
render: function(): React.Element<typeof ToastExample> {
return <ToastExample />;
title: 'Toast with Short Duration',
render(): React.Node {
return <ToastWithShortDuration />;
},
},
{
title: 'Toast with Long Duration',
render(): React.Node {
return <ToastWithLongDuration />;
},
},
{
title: 'Toast with Top Gravity',
render(): React.Node {
return <ToastWithTopGravity />;
},
},
{
title: 'Toast with Center Gravity',
render(): React.Node {
return <ToastWithCenterGravity />;
},
},
{
title: 'Toast with Bottom Gravity',
render(): React.Node {
return <ToastWithBottomGravity />;
},
},
{
title: 'Toast with X Offset',
render(): React.Node {
return <ToastWithXOffset />;
},
},
{
title: 'Toast with Y Offset',
render(): React.Node {
return <ToastWithYOffset />;
},
},
];