@meksiabdou/react-native-actionsheet

Cross platform ActionSheet.

Theme ios (Light mode)

Theme ios (Dark mode)

Theme flat (Light mode)

Theme flat (Dark mode)

Requirements

• react-native-reanimated v2.5.0 or higher

Installation

npm install @meksiabdou/react-native-actionsheet

yarn add @meksiabdou/react-native-actionsheet

Usage

import * as React from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useColorScheme,
  Platform,
} from 'react-native';
import ActionSheet, {
  ActionSheetRef,
} from '@meksiabdou/react-native-actionsheet';

const options = [
  'Volvo',
  'Saab',
  'Mercedes',
  <Text style={{ fontSize: 18, color: 'red', textAlign: 'center' }}>Audi</Text>,
];
const title = 'Please choose your favorite car';
const message = 'Cars list';

export default function App() {
  const colorScheme = useColorScheme();
  const actionSheetRef = React.useRef<ActionSheetRef>(null);

  /*const HeaderComponent = () => {
    return (
      <View>
        <Text>{title}</Text>
        <Text>{message}</Text>
      </View>
    );
  };*/

  /*const CancelComponent = () => {
    return (<Text>Cancel</Text>);
  };*/

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.btn}
        onPress={() => {
          if (actionSheetRef?.current) {
            actionSheetRef.current.show();
          }
        }}
      >
        <Text style={{ color: '#fff' }}>Action</Text>
      </TouchableOpacity>
      <ActionSheet
        ref={actionSheetRef}
        options={options}
        title={title}
        message={message}
        //theme="flat"
        //HeaderComponent={HeaderComponent()}
        //CancelComponent={CancelComponent()}
        darkMode={colorScheme === 'dark'}
        onPress={(e) => {
          //actionSheetRef?.current?.hide();
          console.log(Platform.OS, e);
        }}
        styles={{ title: { fontFamily: 'lucida grande', fontSize: 14 } }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    backgroundColor: '#000ffc',
    width: 150,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Switch Props

name	type	default
ref	any	null
options	Array	undefined
onPress	function	undefined
title	string	undefined
message	string	undefined
theme	string	ios
darkMode	boolean	false
androidStatusBarTranslucent	boolean	false
androidHardwareAccelerated	boolean	false
styles	ActionSheetStyles	undefined
CancelComponent	ReactNode	undefined
HeaderComponent	ReactNode	undefined

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library