Skip to content

Commit

Permalink
feat: refactor toast container styles and add position and offset opt…
Browse files Browse the repository at this point in the history 
…ions
  • Loading branch information
@enestatli
enestatli committed Dec 19, 2023
1 parent 48032c3 commit 2baee84
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 239 deletions.
245 changes: 19 additions & 226 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,255 +30,45 @@ npm install react-native-toastable
```

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

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

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

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

export default function Example() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() =>
showToastable({
title: 'React Native Heroes',
message: 'We are the heroes of React Native 🚀',
status: 'info',
})
}
/>
<Toastable />
</View>
);
}
```

### Queueing

```js
let number = 0

export default function Example() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() => {
const status = ['success', 'info', 'warning', 'danger'][Math.floor(Math.random() * 4)];
number++;
showToastable({
message: 'Message ' + number,
title: 'React Native Heroes ' + status,
status,
duration: 1500,
});
}}
/>
<Toastable />
</View>
);
}
```

### Custom Toastable - Local Component
You can pass your own `renderContent` function to `showToastable` function.

```js
export default function Example() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() =>
showToastable({
renderContent: ({ message, title, status = 'info' }) => (
<View
style={{
flexDirection: 'row',
backgroundColor: TOASTABLE_STATUS_MAP[status],
paddingVertical: 12,
paddingHorizontal: 16,
borderRadius: 12,
}}>
<Icon size={20} name="cloud-upload" />
<View style={{ marginLeft: 12, flex: 1 }}>
<Text style={{ marginTop: 2 }}>
{title}
</Text>
<Text
numberOfLines={1}
adjustsFontSizeToFit
style={{ marginTop: 8 }}>
{message}
</Text>
</View>
<Icon size={20} name="x" />
</View>
),
message: 'filetitle.pdf was uploaded successfully',
title: 'Upload successful',
status: 'success',
})
}
/>
</View>
);
}

```

### Custom Toastable - Global Component
You can pass your own `renderContent` function to `Toastable` component.

```js
export default function Example() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() =>
showToastable({
title: 'React Native Heroes',
message: 'We are the heroes of React Native 🚀',
status: 'success',
})
}
/>
<Toastable
renderContent={(props) => {
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 16,
paddingHorizontal: 12,
backgroundColor: TOASTABLE_STATUS_MAP[props.status ?? 'info'],
borderRadius: 12,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}}>
<View style={dw.rowHCenter}>
<ClearText color="gray-100">{props.title}</ClearText>
<ClearText
color="gray-400"
style={{ marginTop: 4 }}
variant="small-none-regular">
{props.message}
</ClearText>
</View>
</View>
);
}}
/>
</View>
);
}

```
### Custom Toastable - Custom Status Colors

```js
export default function Example() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() => showToastable({ message: 'React Native Heroes is awesome! 🚀', status:'success' })}
/>
<View style={{ flex:1 }}>
<NavigationContainer />
<Toastable
statusMap={{
success: '#00BFA6',
danger: '#FF5252',
warning: '#FFD600',
info: '#2962FF',
success: 'red'
danger: 'yellow'
warning: 'green'
info: 'blue'
}}
offset={top}
position="top"
/>
</View>
);
}

```

## Advanced Usage

### Control toastable's content through `showToastable` function

```js
export default function Example() {
export default function HomeScreen() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() =>
showToastable({
message: 'React Native Heroes is awesome! 🚀',
alwaysVisible: true,
animationInTiming: 1000,
animationOutTiming: 1000,
backgroundColor: 'red',
duration: 2000,
contentStyle: {
marginHorizontal: 20,
},
onPress: () => {
console.log('onPress');
},
status: 'success',
swipeDirection: 'left',
messageColor: 'white',
})
}
/>
<Toastable />
</View>
);
}

```

## Control its content through `Toastable` component

```js
export default function Example() {
return (
<View style={{flex:1}}>
<Button
title="Show Toastable"
onPress={() =>
showToastable({ message: 'React Native Heroes is awesome! 🚀', status: 'success'})
}
/>
<Toastable
containerStyle={{ marginHorizontal: 20 }}
alwaysVisible
animationInTiming={2000}
animationOutTiming={2000}
duration={5000}
onToastableHide={() => {
console.log('onToastableHide');
}}
statusMap={{
success: 'green',
danger: 'red',
info: 'blue',
warning: 'yellow',
}}
renderContent={(props) => <ToastableBody {...props} />}
swipeDirection={['left', 'right']}
onPress={() => showToastable({ message: 'React Native Heroes is awesome! 🚀', status:'success' })}
/>
</View>
);
}

```


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

## ToastableBodyParams

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

## Contributing

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

## Inspiration
Expand Down
1 change: 1 addition & 0 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default function App() {
}
/>
<Toastable
offset={100}
containerStyle={{ marginHorizontal: 20 }}
alwaysVisible
animationInTiming={2000}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ToastableBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ToastableBody = ({
const styles = StyleSheet.create({
content: {
padding: 16,
borderRadius: 12,
borderRadius: 4,
},
title: {
fontSize: 16,
Expand Down
Loading

0 comments on commit 2baee84

Please sign in to comment.