Skip to content

Commit 2baee84

Browse files
enestatlienestatli
committed
feat: refactor toast container styles and add position and offset options
1 parent 48032c3 commit 2baee84

File tree

7 files changed

+76
-239
lines changed

7 files changed

+76
-239
lines changed

‎README.md

+19-226
Original file line numberDiff line numberDiff line change
@@ -30,255 +30,45 @@ npm install react-native-toastable
3030
```
3131

3232
## Usage
33-
Place `Toastable` component at the root of your app, and use `showToastable` function anywhere in your app to show.
33+
Place `Toastable` component at the root of your app, and import `showToastable` function anywhere in your app to show.
3434

3535
*All examples below assume that you have placed `Toastable` component at the root of your app and imported necessary components and functions.*
36-
### Basic Usage
3736

3837
```js
39-
import * as React from 'react';
38+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
39+
import Toastable from 'react-native-toastable';
4040

41-
import { Button, StyleSheet, View } from 'react-native';
42-
import Toastable, { showToastable } from 'react-native-toastable';
41+
export default function RootNavigation() {
42+
const { top } = useSafeAreaInsets();
4343

44-
export default function Example() {
4544
return (
46-
<View style={{flex:1}}>
47-
<Button
48-
title="Show Toastable"
49-
onPress={() =>
50-
showToastable({
51-
title: 'React Native Heroes',
52-
message: 'We are the heroes of React Native 🚀',
53-
status: 'info',
54-
})
55-
}
56-
/>
57-
<Toastable />
58-
</View>
59-
);
60-
}
61-
```
62-
63-
### Queueing
64-
65-
```js
66-
let number = 0
67-
68-
export default function Example() {
69-
return (
70-
<View style={{flex:1}}>
71-
<Button
72-
title="Show Toastable"
73-
onPress={() => {
74-
const status = ['success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 4)];
75-
number++;
76-
showToastable({
77-
message: 'Message ' + number,
78-
title: 'React Native Heroes ' + status,
79-
status,
80-
duration: 1500,
81-
});
82-
}}
83-
/>
84-
<Toastable />
85-
</View>
86-
);
87-
}
88-
```
89-
90-
### Custom Toastable - Local Component
91-
You can pass your own `renderContent` function to `showToastable` function.
92-
93-
```js
94-
export default function Example() {
95-
return (
96-
<View style={{flex:1}}>
97-
<Button
98-
title="Show Toastable"
99-
onPress={() =>
100-
showToastable({
101-
renderContent: ({ message, title, status = 'info' }) => (
102-
<View
103-
style={{
104-
flexDirection: 'row',
105-
backgroundColor: TOASTABLE_STATUS_MAP[status],
106-
paddingVertical: 12,
107-
paddingHorizontal: 16,
108-
borderRadius: 12,
109-
}}>
110-
<Icon size={20} name="cloud-upload" />
111-
<View style={{ marginLeft: 12, flex: 1 }}>
112-
<Text style={{ marginTop: 2 }}>
113-
{title}
114-
</Text>
115-
<Text
116-
numberOfLines={1}
117-
adjustsFontSizeToFit
118-
style={{ marginTop: 8 }}>
119-
{message}
120-
</Text>
121-
</View>
122-
<Icon size={20} name="x" />
123-
</View>
124-
),
125-
message: 'filetitle.pdf was uploaded successfully',
126-
title: 'Upload successful',
127-
status: 'success',
128-
})
129-
}
130-
/>
131-
</View>
132-
);
133-
}
134-
135-
```
136-
137-
### Custom Toastable - Global Component
138-
You can pass your own `renderContent` function to `Toastable` component.
139-
140-
```js
141-
export default function Example() {
142-
return (
143-
<View style={{flex:1}}>
144-
<Button
145-
title="Show Toastable"
146-
onPress={() =>
147-
showToastable({
148-
title: 'React Native Heroes',
149-
message: 'We are the heroes of React Native 🚀',
150-
status: 'success',
151-
})
152-
}
153-
/>
154-
<Toastable
155-
renderContent={(props) => {
156-
return (
157-
<View
158-
style={{
159-
flexDirection: 'row',
160-
justifyContent: 'space-between',
161-
alignItems: 'center',
162-
paddingVertical: 16,
163-
paddingHorizontal: 12,
164-
backgroundColor: TOASTABLE_STATUS_MAP[props.status ?? 'info'],
165-
borderRadius: 12,
166-
borderBottomLeftRadius: 0,
167-
borderBottomRightRadius: 0,
168-
}}>
169-
<View style={dw.rowHCenter}>
170-
<ClearText color="gray-100">{props.title}</ClearText>
171-
<ClearText
172-
color="gray-400"
173-
style={{ marginTop: 4 }}
174-
variant="small-none-regular">
175-
{props.message}
176-
</ClearText>
177-
</View>
178-
</View>
179-
);
180-
}}
181-
/>
182-
</View>
183-
);
184-
}
185-
186-
```
187-
### Custom Toastable - Custom Status Colors
188-
189-
```js
190-
export default function Example() {
191-
return (
192-
<View style={{flex:1}}>
193-
<Button
194-
title="Show Toastable"
195-
onPress={() => showToastable({ message: 'React Native Heroes is awesome! 🚀', status:'success' })}
196-
/>
45+
<View style={{ flex:1 }}>
46+
<NavigationContainer />
19747
<Toastable
19848
statusMap={{
199-
success: '#00BFA6',
200-
danger: '#FF5252',
201-
warning: '#FFD600',
202-
info: '#2962FF',
49+
success: 'red'
50+
danger: 'yellow'
51+
warning: 'green'
52+
info: 'blue'
20353
}}
54+
offset={top}
55+
position="top"
20456
/>
20557
</View>
20658
);
20759
}
20860

209-
```
210-
211-
## Advanced Usage
21261

213-
### Control toastable's content through `showToastable` function
214-
215-
```js
216-
export default function Example() {
62+
export default function HomeScreen() {
21763
return (
21864
<View style={{flex:1}}>
21965
<Button
22066
title="Show Toastable"
221-
onPress={() =>
222-
showToastable({
223-
message: 'React Native Heroes is awesome! 🚀',
224-
alwaysVisible: true,
225-
animationInTiming: 1000,
226-
animationOutTiming: 1000,
227-
backgroundColor: 'red',
228-
duration: 2000,
229-
contentStyle: {
230-
marginHorizontal: 20,
231-
},
232-
onPress: () => {
233-
console.log('onPress');
234-
},
235-
status: 'success',
236-
swipeDirection: 'left',
237-
messageColor: 'white',
238-
})
239-
}
240-
/>
241-
<Toastable />
242-
</View>
243-
);
244-
}
245-
246-
```
247-
248-
## Control its content through `Toastable` component
249-
250-
```js
251-
export default function Example() {
252-
return (
253-
<View style={{flex:1}}>
254-
<Button
255-
title="Show Toastable"
256-
onPress={() =>
257-
showToastable({ message: 'React Native Heroes is awesome! 🚀', status: 'success'})
258-
}
259-
/>
260-
<Toastable
261-
containerStyle={{ marginHorizontal: 20 }}
262-
alwaysVisible
263-
animationInTiming={2000}
264-
animationOutTiming={2000}
265-
duration={5000}
266-
onToastableHide={() => {
267-
console.log('onToastableHide');
268-
}}
269-
statusMap={{
270-
success: 'green',
271-
danger: 'red',
272-
info: 'blue',
273-
warning: 'yellow',
274-
}}
275-
renderContent={(props) => <ToastableBody {...props} />}
276-
swipeDirection={['left', 'right']}
67+
onPress={() => showToastable({ message: 'React Native Heroes is awesome! 🚀', status:'success' })}
27768
/>
27869
</View>
27970
);
28071
}
281-
28272
```
28373

28474

@@ -290,6 +80,8 @@ Inherit all other props from `ToastableBodyParams` interface. Except `background
29080
| statusMap | `StatusMap` | Status map, used to determine background color based on status | `success: '#00BFA6', danger: '#FF5252', warning: '#FFD600', info: '#2962FF'` |
29181
| onToastableHide | `Func` | Callback when toast is dismissed | `undefined` |
29282
| containerStyle | `ViewProps['style']` | Container style for toast container | `undefined` |
83+
position | `'top' \| 'bottom'\| 'center'` | Toast position. | `'top'` |
84+
offset | `number` | Toast offset. | `0` |
29385

29486
## ToastableBodyParams
29587

@@ -310,6 +102,8 @@ titleColor | `ColorValue` | Custom title color, if this is set. | `'#FFFFFF'` |
310102
| messageColor | `ColorValue` | Custom message color, if this is set. | `'#FFFFFF'` |
311103
titleStyle | `TextStyle` | Custom title style. | `undefined` |
312104
messageStyle | `TextStyle` | Custom message style. | `undefined` |
105+
position | `'top' \| 'bottom'\| 'center'` | Toast position. | `'top'` |
106+
offset | `number` | Toast offset. | `0` |
313107

314108
## Contributing
315109

@@ -321,7 +115,6 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
321115
- Support animationIn and animationOut props
322116
- Support stackable toasts
323117
- Support custom animations
324-
- Support snackbars
325118
- Add custom status support
326119

327120
## Inspiration

‎example/src/App.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default function App() {
3131
}
3232
/>
3333
<Toastable
34+
offset={100}
3435
containerStyle={{ marginHorizontal: 20 }}
3536
alwaysVisible
3637
animationInTiming={2000}

‎src/components/ToastableBody.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const ToastableBody = ({
5555
const styles = StyleSheet.create({
5656
content: {
5757
padding: 16,
58-
borderRadius: 12,
58+
borderRadius: 4,
5959
},
6060
title: {
6161
fontSize: 16,

0 commit comments

Comments
 (0)