Nocturnal Programmer's Machine

    @dooboo-ui/snackbar
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    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.

    Feb-25-2020 00-12-07

    • 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!!'),
        });

    Feb-25-2020 00-16-47

    • More Complex Examples

    You can find more complex usages on this storybook codes.

    Install

    npm i @dooboo-ui/snackbar

    DownloadsWeekly Downloads

    3

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    905 kB

    Total Files

    16

    Last publish

    Collaborators

    • jongtaek
    • yujonglee
    • do02reen24
    • dooboolab