React Native Sheet View

A simple bottom sheet component for any React Native project

iOS | Android :------------------:|:------------------: |

Installation

npm install --save react-native-sheet-view

or

yarn add react-native-sheet-view

Import the BottomSheet component

import BottomSheet from 'react-native-sheet-view';

Usage

import React, { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Button,
  Alert,
} from 'react-native';

import BottomSheet from 'react-native-sheet-view';

const App = () => {
  const [isBottomSheetVisible, setBottomSheetVisible] = useState(false);

  const showBottomSheet = () => {
    setBottomSheetVisible(true);
  }

  const hideBottomSheet = () => {
    setBottomSheetVisible(false);
  }

  const options = [
    'Option 1',
    'Option 2',
    'Option 3',
  ];

  return (
    <View
      style={styles.container}
    >
      <Text>React Native Sheet View</Text>

      <Button
        title='Show Bottom Sheet'
        onPress={showBottomSheet}
      />

      <BottomSheet
        visible={isBottomSheetVisible}
        options={options}
        onSelect={(index) => {
          Alert.alert(
            `${options[index]`,
            `You selected ${options[index]}`,
            [
              {
                text: 'OK',
              },
            ],
          )
        }}
        onCancel={hideBottomSheet}
        showCancelText={true}
        cancelText='Cancel'
        headerTitle='Bottom Sheet'
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App;

Props

| Prop | Type | Required | Description | | :--- | :--- | :--- | :--- | | visible | useState Hook | Yes | Display or hide the bottom sheet | | options | string array | Yes | Displays the options available for your bottom sheet | | onSelect | function | Yes | Dispatches the action selected for the option once selected | | onCancel | function | Yes | Dispatches the action canceled for the option already selected | | headerTitle | string | No | Shows your input as the header title of your bottom sheet | | titleColor | string | No | Change the color of your title text if you have a headerTitle | | showCancelText | boolean | No | Shows the Cancel button detached below the bottom sheet | | cancelText | string | No | Shows your input as the cancel text in the cancel button | | lineColor | string | No | Change the color of the lines between each option | | backgroundColor | string | No | Change the color of the background of your bottom sheet |

headerTitle

Shows your input as the header title of your bottom sheet

iOS | Android :------------------:|:------------------: |

<BottomSheet
  visible={isBottomSheetVisible}
  options={options}
  onSelect={(index) => {
    Alert.alert(
      `${options[index]`,
      `You selected ${options[index]}`,
      [
        {
          text: 'OK',
        },
      ],
    )
  }}
  onCancel={hideBottomSheet}
  headerTitle='Header Title'
/>

titleColor

Change the color of your title text if you have a headerTitle

You won't see any changes if you don't have a headerTitle

iOS | Android :------------------:|:------------------: |

<BottomSheet
  visible={isBottomSheetVisible}
  options={options}
  onSelect={(index) => {
    Alert.alert(
      `${options[index]`,
      `You selected ${options[index]}`,
      [
        {
          text: 'OK',
        },
      ],
    )
  }}
  onCancel={hideBottomSheet}
  headerTitle='Header Title'
  titleColor='purple'
/>

showCancelText

Shows the Cancel button detached below the bottom sheet

Default: false

iOS | Android :------------------:|:------------------: |

<BottomSheet
  visible={isBottomSheetVisible}
  options={options}
  onSelect={(index) => {
    Alert.alert(
      `${options[index]`,
      `You selected ${options[index]}`,
      [
        {
          text: 'OK',
        },
      ],
    )
  }}
  onCancel={hideBottomSheet}
  showCancelText={true}
/>

cancelText

Shows your input as the cancel text in the cancel button

You won't see any changes if you don't have showCancelText set to true

iOS | Android :------------------:|:------------------: |

<BottomSheet
  visible={isBottomSheetVisible}
  options={options}
  onSelect={(index) => {
    Alert.alert(
      `${options[index]`,
      `You selected ${options[index]}`,
      [
        {
          text: 'OK',
        },
      ],
    )
  }}
  onCancel={hideBottomSheet}
  showCancelText={true}
  cancelText='Cancelar' // <- Spanish word for 'Cancel'
/>

lineColor

Change the color of the lines between each option

iOS | Android :------------------:|:------------------: |

<BottomSheet
  visible={isBottomSheetVisible}
  options={options}
  onSelect={(index) => {
    Alert.alert(
      `${options[index]`,
      `You selected ${options[index]}`,
      [
        {
          text: 'OK',
        },
      ],
    )
  }}
  onCancel={hideBottomSheet}
  lineColor='red'
/>

backgroundColor

Change the color of the background of your bottom sheet

iOS | Android :------------------:|:------------------: |

<BottomSheet
  visible={isBottomSheetVisible}
  options={options}
  onSelect={(index) => {
    Alert.alert(
      `${options[index]`,
      `You selected ${options[index]}`,
      [
        {
          text: 'OK',
        },
      ],
    )
  }}
  onCancel={hideBottomSheet}
  backgroundColor='purple'
/>

License

React Native Sheet View is under the MIT License. See bundled LICENSE file for details.