Skip to content

Commit 48a08f6

Browse files
senivseniv
committed
chore: new components demo screen in example app
1 parent 65f8428 commit 48a08f6

6 files changed

Lines changed: 379 additions & 148 deletions

File tree

‎example/src/App.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import { useAppStore } from './store';
1414
import { SafeAreaProvider } from 'react-native-safe-area-context';
1515
import { PositionsTabScreen } from './screens/PositionsTabScreen';
1616
import { ComponentsTabScreen } from './screens/ComponentsTabScreen';
17+
import { ToastComponentScreen } from './screens/componentScreens/ToastComponentScreen';
18+
import { NotificationComponentScreen } from './screens/componentScreens/NotificationComponentScreen';
19+
import { AlertComponentScreen } from './screens/componentScreens/AlertComponentScreen';
20+
import { SimpleToastComponentScreen } from './screens/componentScreens/SimpleToastComponentScreen';
1721

1822
const Stack = createNativeStackNavigator();
1923
const BottomTab = createBottomTabNavigator();
@@ -63,6 +67,26 @@ const StackNavigator = () => {
6367
options={{ presentation: 'modal' }}
6468
component={ModalScreen}
6569
/>
70+
<Stack.Screen
71+
name="ToastComponent"
72+
component={ToastComponentScreen}
73+
options={{ title: 'Toast', headerBackTitle: 'Components' }}
74+
/>
75+
<Stack.Screen
76+
name="NotificationComponent"
77+
component={NotificationComponentScreen}
78+
options={{ title: 'Notification', headerBackTitle: 'Components' }}
79+
/>
80+
<Stack.Screen
81+
name="AlertComponent"
82+
component={AlertComponentScreen}
83+
options={{ title: 'Alert', headerBackTitle: 'Components' }}
84+
/>
85+
<Stack.Screen
86+
name="SimpleToastComponent"
87+
component={SimpleToastComponentScreen}
88+
options={{ title: 'SimpleToast', headerBackTitle: 'Components' }}
89+
/>
6690
</Stack.Navigator>
6791
);
6892
};

‎example/src/screens/ComponentsTabScreen.tsx‎

Lines changed: 55 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,62 @@
1-
import { ScrollView } from 'react-native';
2-
import { Notifier, NotifierComponents } from 'react-native-notifier';
3-
import Button from '../components/Button';
1+
import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
2+
import {
3+
NotifierComponents,
4+
type ViewWithOffsetsComponent,
5+
} from 'react-native-notifier';
6+
import { useNavigation } from '@react-navigation/native';
7+
8+
const style = StyleSheet.create({
9+
gap: {
10+
gap: 16,
11+
},
12+
});
13+
14+
const DummyViewWithOffsets: ViewWithOffsetsComponent = (props) => (
15+
<View {...props} />
16+
);
417

518
export const ComponentsTabScreen = () => {
19+
const navigation = useNavigation<any>();
20+
621
return (
722
<ScrollView>
8-
<Button
9-
title="Toast: Successful"
10-
onPress={() =>
11-
Notifier.showNotification({
12-
title: 'Operation Successful!',
13-
description: 'Everything went smoothly.',
14-
Component: NotifierComponents.Toast,
15-
componentProps: {
16-
type: 'success',
17-
},
18-
})
19-
}
20-
/>
21-
<Button
22-
title="Toast: Warning"
23-
onPress={() =>
24-
Notifier.showNotification({
25-
title: 'Something is missing...',
26-
description: 'Please fill out all required fields.',
27-
Component: NotifierComponents.Toast,
28-
componentProps: {
29-
type: 'warn',
30-
},
31-
})
32-
}
33-
/>
34-
<Button
35-
title="Toast: Info"
36-
onPress={() =>
37-
Notifier.showNotification({
38-
title: 'Please check your inbox.',
39-
description: 'Your new credentials are active.',
40-
Component: NotifierComponents.Toast,
41-
componentProps: {
42-
type: 'info',
43-
},
44-
})
45-
}
46-
/>
47-
<Button
48-
title="Toast: Error"
49-
onPress={() =>
50-
Notifier.showNotification({
51-
title: 'Oops!',
52-
description: 'Something went wrong.',
53-
Component: NotifierComponents.Toast,
54-
componentProps: {
55-
type: 'error',
56-
},
57-
})
58-
}
59-
/>
60-
<Button
61-
title="Toast: No Internet"
62-
onPress={() =>
63-
Notifier.showNotification({
64-
title: "You're offline now",
65-
description: 'Opps! Internet is disconnected',
66-
Component: NotifierComponents.Toast,
67-
duration: 0,
68-
componentProps: {
69-
type: 'disconnected',
70-
},
71-
})
72-
}
73-
/>
74-
<Button
75-
title="Toast: Internet Connected"
76-
onPress={() =>
77-
Notifier.showNotification({
78-
title: "You're online now",
79-
description: 'Hurray! Internet is connected',
80-
Component: NotifierComponents.Toast,
81-
componentProps: {
82-
type: 'connected',
83-
},
84-
})
85-
}
86-
/>
87-
<Button
88-
title="SimpleToast"
89-
onPress={() =>
90-
Notifier.showNotification({
91-
title: 'Copied to clipboard!',
92-
Component: NotifierComponents.SimpleToast,
93-
})
94-
}
95-
/>
96-
<Button
97-
title="Notification: message"
98-
onPress={() =>
99-
Notifier.showNotification({
100-
title: 'John Doe',
101-
description: 'Hello! Can you help me with notifications?',
102-
})
103-
}
104-
/>
105-
<Button
106-
title="Notification: long message"
107-
onPress={() =>
108-
Notifier.showNotification({
109-
title: 'Lorem?',
110-
duration: 6000,
111-
description:
112-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
113-
})
114-
}
115-
/>
116-
<Button
117-
title="Notification: With Image"
118-
onPress={() =>
119-
Notifier.showNotification({
120-
title: 'Check this image!',
121-
description: 'Cool, right?',
122-
componentProps: {
123-
imageSource: require('../react.jpg'),
124-
},
125-
})
126-
}
127-
/>
128-
<Button
129-
title="Alert: Success"
130-
onPress={() =>
131-
Notifier.showNotification({
132-
title: 'Your profile was successfully saved!',
133-
Component: NotifierComponents.Alert,
134-
componentProps: {
135-
type: 'success',
136-
},
137-
})
138-
}
139-
/>
140-
<Button
141-
title="Alert: Error"
142-
onPress={() =>
143-
Notifier.showNotification({
144-
title: 'The request has failed',
145-
description: 'Please, check your internet connection',
146-
Component: NotifierComponents.Alert,
147-
componentProps: {
148-
type: 'error',
149-
},
150-
})
151-
}
152-
/>
23+
<View style={style.gap}>
24+
<TouchableOpacity onPress={() => navigation.push('AlertComponent')}>
25+
<NotifierComponents.Alert
26+
ViewWithOffsets={DummyViewWithOffsets}
27+
type="success"
28+
title="Alert"
29+
description="Component"
30+
/>
31+
</TouchableOpacity>
32+
<TouchableOpacity
33+
onPress={() => navigation.push('NotificationComponent')}
34+
>
35+
<NotifierComponents.Notification
36+
ViewWithOffsets={DummyViewWithOffsets}
37+
type="success"
38+
title="Notification"
39+
description="Component"
40+
/>
41+
</TouchableOpacity>
42+
<TouchableOpacity onPress={() => navigation.push('ToastComponent')}>
43+
<NotifierComponents.Toast
44+
ViewWithOffsets={DummyViewWithOffsets}
45+
type="success"
46+
title="Toast"
47+
description="Component"
48+
/>
49+
</TouchableOpacity>
50+
51+
<TouchableOpacity
52+
onPress={() => navigation.push('SimpleToastComponent')}
53+
>
54+
<NotifierComponents.SimpleToast
55+
ViewWithOffsets={DummyViewWithOffsets}
56+
title="SimpleToast"
57+
/>
58+
</TouchableOpacity>
59+
</View>
15360
</ScrollView>
15461
);
15562
};

‎example/src/screens/componentScreens/AlertComponentScreen.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Notifier, NotifierComponents } from 'react-native-notifier';
2+
import Button from '../../components/Button';
3+
import { ScrollView } from 'react-native';
4+
5+
export const AlertComponentScreen = () => {
6+
return (
7+
<ScrollView>
8+
<Button
9+
title="Success"
10+
onPress={() =>
11+
Notifier.showNotification({
12+
title: 'Your profile was successfully saved!',
13+
Component: NotifierComponents.Alert,
14+
componentProps: {
15+
type: 'success',
16+
},
17+
})
18+
}
19+
/>
20+
<Button
21+
title="Error"
22+
onPress={() =>
23+
Notifier.showNotification({
24+
title: 'The request has failed',
25+
description: 'Please, check your internet connection',
26+
Component: NotifierComponents.Alert,
27+
componentProps: {
28+
type: 'error',
29+
},
30+
})
31+
}
32+
/>
33+
<Button
34+
title="Info"
35+
onPress={() =>
36+
Notifier.showNotification({
37+
title: 'Please check your inbox.',
38+
description: 'Your new credentials are active.',
39+
Component: NotifierComponents.Alert,
40+
componentProps: {
41+
type: 'info',
42+
},
43+
})
44+
}
45+
/>
46+
<Button
47+
title="Warning"
48+
onPress={() =>
49+
Notifier.showNotification({
50+
title: 'Something is missing...',
51+
description: 'Please fill out all required fields.',
52+
Component: NotifierComponents.Alert,
53+
componentProps: {
54+
type: 'warn',
55+
},
56+
})
57+
}
58+
/>
59+
</ScrollView>
60+
);
61+
};

0 commit comments

Comments
 (0)