Skip to main content

SimpleSnackbarUI

Overview

simple-snackbar-example

API Usage

Step 1. create snackbar

Using Default

SimpleSnackbar.tsx
import { SimpleSnackbarUI, createPopup } from 'react-native-global-components';
export default createPopup(SimpleSnackbarUI);

or you can override default props

SimpleSnackbar.tsx
import {
SimpleSnackbarUI,
SimpleSnackbarProps,
createPopup,
} from 'react-native-global-components';

const styles: SimpleSnackbarProps['styles'] = StyleSheet.create({
// override default styles
});

export default createPopup((props: SimpleSnackbarProps) => (
<SimpleSnackbarUI {...props} styles={styles} />
));

Step 2. register portal

App.tsx
const App = () => {
return (
<NavigationContainer>
<RootNavigator />
<SimpleSnackbar.Portal />
</NavigationContainer>
);
};

Step 3. use anywhere

SimpleSnackbar.show({
title: 'Hello👋🏻',
description: 'My name is Jerry',
});
SimpleSnackbar.show({
title: 'Hello👋🏻',
description: 'My name is Jerry',
leftElement: (
<Image
source={{
uri: 'https://icon2.cleanpng.com/20171220/woq/tom-and-jerry-png-5a3aa9384280b5.4480956315137938482724.jpg',
}}
style={{
width: 30,
height: 30,
borderRadius: 8,
}}
/>
),
});

see more on storybook

Tips

For SafeArea, here's what you can do

SimpleSnackbar.tsx
export default createPopup((props: SimpleSnackbarProps) => {
const { top } = useSafeAreaInsets();
return (
<SimpleSnackbar
offsetY={props.position === 'top' ? top : BOTTOM_TAB_BAR_HEIGHT}
{...props}
/>
);
});

Props

title

title text to show

TypeDefaultRequired
stringundefinedYES

description

description text to show below title

TypeDefaultRequired
stringundefinedNO

duration

duration to show snackbar in milliseconds

snackbar automatically hides after given duration

TypeDefaultRequired
number2000NO

position

absolute position of snackbar in screen

TypeDefaultRequired
'top' or 'bottom''top'NO

offsetY

absolute position of y

snackbar moves from offsetY to offsetY + translateY

TypeDefaultRequired
number50NO

translateY

translateY that snackbar should move

TypeDefaultRequired
number30NO

onPress

translateY that snackbar should move

TypeDefaultRequired
FunctionundefinedNO

hideOnPress

flag that should hide snackbar onPress

TypeDefaultRequired
booleantrueNO

leftElement

ReactElement to render left of contents

TypeDefaultRequired
ReactElementundefinedNO

rightElement

ReactElement to render right of contents

TypeDefaultRequired
ReactElementundefinedNO

slideAnimationConfig

slide animation configuration. see useSlideAnimationStyle.

TypeDefaultRequired
Omit<SlideAnimationConfig, 'translateY'>undefinedNO

fadeAnimationConfig

fade animation configuration. see useFadeAnimationStyle.

TypeDefaultRequired
FadeAnimationConfigsundefinedNO

styles

style object to override default style

TypeDefaultRequired
StylesundefinedNO
interface Styles {
style?: StyleProp<ViewStyle>;
title?: StyleProp<TextStyle>;
description?: StyleProp<TextStyle>;
container?: StyleProp<TextStyle>;
titleContainer?: StyleProp<ViewStyle>;
}