Snackbar

Simple snackbar for react-native.

Installation

At this point, this component has not yet been published, and after it has been published, it may be installed with the command below.

yarn add @dooboo-ui

or

yarn add @dooboo-ui/snackbar

Usage

Types

export enum Timer {
  SHORT = 1500,
  LONG = 3000,
}

export interface SnackbarProps {
  testID?: string;
  ref: React.MutableRefObject<SnackbarRef>;
}

export interface SnackbarRef {
  show(content: Content): void;
}

export interface Content {
  text: string;
  actionText?: string;
  timer?: Timer;
  actionStyle?: TextStyle;
  containerStyle?: ViewStyle;
  messageStyle?: TextStyle;
  onPressAction?: () => void;
}

• SnackbarProps

| | necessary | types | default | info | | ------- | :-------: | ----------------------- | --------- | ------------ | | ref | v | MutableRefObject | undefined | | | testID | | string | undefined | |

• Content

An object of this type is needed to show an Snackbar.

| | necessary | types | default | info | | -------------- | :-------: | ---------------- | ------------------ | ------------------ | | text | v | string | undefined | | | timer | | number | 1500 (Timer.SHORT) | Closing time | | messageStyle | | TextStyle | undefined | Message text style | | containerStyle | | ViewStyle | undefined | | | actionText | | string | undefined | | | actionStyle | | TextStyle | undefined | Action text style | | onPressAction | | function | undefined | |

Getting started

• Import

  import Snackbar from '@dooboo-ui/snackbar';

• Using Component

  
  function Container(): React.ReactElement {
    const snackbar = useRef<SnackbarRef>(null);
    const onPress = (): void => {
      snackbar.current && snackbar.current.show({
        text: 'Simple Snackbar is opened',
      });
    };
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <TouchableOpacity onPress={onPress} style={{ borderWidth: 1, padding: 10 }}>
            <Text>Show Snackbar</Text>
          </TouchableOpacity>
          <Snackbar ref={snackbar}/>
        </View>
      </SafeAreaView>
    );
  }
  

To show a Snackbar component, just provide ref props to the component and call the show function (with a Content type parameter) of it. This component will appear at the bottom of the parent view, not at the bottom of the screen.

• Using Provider

You can also set SnackbarProvider to use Snackbar component.

  function Container(): React.ReactElement {
    const snackbar = useSnackbarContext();
    const onPress = (): void => {
      snackbar.show({
        text: 'Simple Snackbar is opened',
      });
    };
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={onPress} style={{ borderWidth: 1, padding: 10 }}>
          <Text>Show Snackbar</Text>
        </TouchableOpacity>
      </View>
    );
  }

  function Provider(): React.ReactElement {
    return (
      <SnackbarProvider>
        <Container/>
      </SnackbarProvider>
    );
  }

For versions after iPhone x, Snackbar will overlap with the gesture bar. Previously, Snackbar was put in SafeAreaView, but this could be a problem and changed to use View. We recommend that using 'defaultContent' like below.

  function Provider(): React.ReactElement {
    return (
      <SnackbarProvider
        defaultContent={{ containerStyle: { bottom: safeAreaBottom + 10 }}}
      >
        <Container/>
      </SnackbarProvider>
    );
  }

• Using some Action

To add some action to the Snackbar, just add options about the action to the show function.

    snackbar.show({
      text: 'Simple Snackbar is opened',
      actionText: 'Some action',
      onPressAction: () => Alert.alert('Some action occurs!!'),
    });

• More Complex Examples

You can find more complex usages on this storybook codes.