Skip to content

Commit 60f0b5c

Browse files
xxsnakerxxxxsnakerxx
committed
refactor: simplify App component by removing alert buttons and integrating Basics container for improved structure
1 parent 289ca0d commit 60f0b5c

File tree

4 files changed

+162
-125
lines changed

4 files changed

+162
-125
lines changed

‎example/src/App.tsx‎

Lines changed: 4 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Text, View, StyleSheet, Pressable, ScrollView } from 'react-native';
1+
import { Text, View, StyleSheet, ScrollView } from 'react-native';
22

3-
import { alert, AlertContainer } from 'react-native-alert-queue';
3+
import { AlertContainer } from 'react-native-alert-queue';
44

55
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
6+
import { Basics } from './containers/Basics';
67

78
export default function App() {
89
return (
@@ -11,102 +12,7 @@ export default function App() {
1112
<SafeAreaView style={styles.wrapper}>
1213
<Text style={styles.title}>React Native Alert Queue</Text>
1314
<ScrollView style={styles.scrollView}>
14-
<View style={styles.section}>
15-
<Text style={styles.sectionTitle}>Basics</Text>
16-
<Button
17-
onPress={() =>
18-
alert.show({
19-
title: 'Hello',
20-
message: 'I am an alert',
21-
})
22-
}
23-
text="Show Alert"
24-
/>
25-
<Button
26-
onPress={() => {
27-
alert.show({
28-
title: 'Alert 1',
29-
message: 'I am an alert 1',
30-
});
31-
alert.show({
32-
title: 'Alert 2',
33-
message: 'I am an alert 2',
34-
buttons: [
35-
{
36-
text: 'OK',
37-
onPress: () => {
38-
alert.success({ message: 'You pressed OK button' });
39-
},
40-
},
41-
{
42-
text: 'Cancel',
43-
onPress: () => {
44-
alert.success({
45-
message: 'You pressed Cancel button',
46-
});
47-
},
48-
},
49-
],
50-
});
51-
}}
52-
text="Show 2 Alerts"
53-
/>
54-
<Button
55-
onPress={() => {
56-
alert.success({
57-
message: 'I am a success alert',
58-
});
59-
}}
60-
text="Show Success Alert"
61-
/>
62-
<Button
63-
onPress={() => {
64-
alert.error(new Error('I am an error alert'));
65-
}}
66-
text="Show Error Alert"
67-
/>
68-
<Button
69-
onPress={async () => {
70-
const result = await alert.confirm({
71-
message: 'I am a confirm dialog',
72-
});
73-
74-
if (result) {
75-
alert.success({
76-
message: 'You pressed yes',
77-
});
78-
} else {
79-
alert.error(new Error('You pressed no'));
80-
}
81-
}}
82-
text="Show Confirm"
83-
/>
84-
<Button
85-
onPress={async () => {
86-
await alert.show({
87-
title: 'Lorem ipsum dolor sit amet',
88-
message: 'I am a dismissible alert',
89-
isDismissible: true,
90-
onDismiss: () => {
91-
alert.success({
92-
message: 'You dismissed the alert',
93-
});
94-
},
95-
buttons: [
96-
{
97-
text: 'OK',
98-
onPress: () => {
99-
alert.success({
100-
message: 'You pressed OK button',
101-
});
102-
},
103-
},
104-
],
105-
});
106-
}}
107-
text="Show Dismissible Alert"
108-
/>
109-
</View>
15+
<Basics />
11016
</ScrollView>
11117
</SafeAreaView>
11218
<AlertContainer />
@@ -115,14 +21,6 @@ export default function App() {
11521
);
11622
}
11723

118-
const Button = ({ onPress, text }: { onPress: () => void; text: string }) => {
119-
return (
120-
<Pressable style={styles.button} onPress={onPress}>
121-
<Text style={styles.buttonText}>{text}</Text>
122-
</Pressable>
123-
);
124-
};
125-
12624
const styles = StyleSheet.create({
12725
container: {
12826
flex: 1,
@@ -139,23 +37,4 @@ const styles = StyleSheet.create({
13937
marginVertical: 20,
14038
textAlign: 'center',
14139
},
142-
sectionTitle: {
143-
fontSize: 20,
144-
fontWeight: 'bold',
145-
marginVertical: 20,
146-
},
147-
section: {
148-
gap: 10,
149-
},
150-
button: {
151-
backgroundColor: '#f0f0f0',
152-
borderRadius: 10,
153-
paddingVertical: 10,
154-
paddingHorizontal: 20,
155-
},
156-
buttonText: {
157-
color: 'black',
158-
fontSize: 16,
159-
textAlign: 'center',
160-
},
16140
});

‎example/src/components/Button/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Pressable, StyleSheet, Text } from 'react-native';
2+
3+
export const Button = ({
4+
onPress,
5+
text,
6+
}: {
7+
onPress: () => void;
8+
text: string;
9+
}) => {
10+
return (
11+
<Pressable style={styles.button} onPress={onPress}>
12+
<Text style={styles.text}>{text}</Text>
13+
</Pressable>
14+
);
15+
};
16+
17+
const styles = StyleSheet.create({
18+
button: {
19+
backgroundColor: '#f0f0f0',
20+
borderRadius: 10,
21+
paddingVertical: 10,
22+
paddingHorizontal: 20,
23+
},
24+
text: {
25+
color: 'black',
26+
fontSize: 16,
27+
textAlign: 'center',
28+
},
29+
});

‎example/src/components/Section/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { FC, PropsWithChildren } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
4+
type Props = PropsWithChildren<{
5+
title: string;
6+
}>;
7+
8+
export const Section: FC<Props> = ({ children, title }) => {
9+
return (
10+
<View style={styles.container}>
11+
<Text style={styles.title}>{title}</Text>
12+
{children}
13+
</View>
14+
);
15+
};
16+
17+
const styles = StyleSheet.create({
18+
title: {
19+
fontSize: 20,
20+
fontWeight: 'bold',
21+
marginVertical: 20,
22+
},
23+
container: {
24+
gap: 10,
25+
},
26+
});

‎example/src/containers/Basics.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { alert } from 'react-native-alert-queue';
2+
import { Button } from '../components/Button';
3+
import { Section } from '../components/Section';
4+
5+
export const Basics = () => {
6+
return (
7+
<Section title="Basics">
8+
<Button
9+
onPress={() =>
10+
alert.show({
11+
title: 'Hello',
12+
message: 'I am an alert',
13+
})
14+
}
15+
text="Show Alert"
16+
/>
17+
<Button
18+
onPress={() => {
19+
alert.show({
20+
title: 'Alert 1',
21+
message: 'I am an alert 1',
22+
});
23+
alert.show({
24+
title: 'Alert 2',
25+
message: 'I am an alert 2',
26+
buttons: [
27+
{
28+
text: 'OK',
29+
onPress: () => {
30+
alert.success({ message: 'You pressed OK button' });
31+
},
32+
},
33+
{
34+
text: 'Cancel',
35+
onPress: () => {
36+
alert.success({
37+
message: 'You pressed Cancel button',
38+
});
39+
},
40+
},
41+
],
42+
});
43+
}}
44+
text="Show 2 Alerts"
45+
/>
46+
<Button
47+
onPress={() => {
48+
alert.success({
49+
message: 'I am a success alert',
50+
});
51+
}}
52+
text="Show Success Alert"
53+
/>
54+
<Button
55+
onPress={() => {
56+
alert.error(new Error('I am an error alert'));
57+
}}
58+
text="Show Error Alert"
59+
/>
60+
<Button
61+
onPress={async () => {
62+
const result = await alert.confirm({
63+
message: 'I am a confirm dialog',
64+
});
65+
66+
if (result) {
67+
alert.success({
68+
message: 'You pressed yes',
69+
});
70+
} else {
71+
alert.error(new Error('You pressed no'));
72+
}
73+
}}
74+
text="Show Confirm"
75+
/>
76+
<Button
77+
onPress={async () => {
78+
await alert.show({
79+
title: 'Lorem ipsum dolor sit amet',
80+
message: 'I am a dismissible alert',
81+
isDismissible: true,
82+
onDismiss: () => {
83+
alert.success({
84+
message: 'You dismissed the alert',
85+
});
86+
},
87+
buttons: [
88+
{
89+
text: 'OK',
90+
onPress: () => {
91+
alert.success({
92+
message: 'You pressed OK button',
93+
});
94+
},
95+
},
96+
],
97+
});
98+
}}
99+
text="Show Dismissible Alert"
100+
/>
101+
</Section>
102+
);
103+
};

0 commit comments

Comments
 (0)