@uiw/react-native/lib/ActionSheet/index.js

UIW for React Native

import React, { useEffect, useState } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import Modal from '../Modal';
import ActionSheetItem from './item';
export { default as ActionSheetItem } from './item';
let MainWidth = Dimensions.get('window').width;
export default function ActionSheet(props) {
  const {
    children,
    visible: props_visible,
    activeOpacity,
    underlayColor,
    cancelText = '取消',
    dividerStyle,
    isCancel = true,
    containerStyle,
    textStyle,
    onCancel,
    ...other
  } = props;
  const visible = !!props_visible;
  const [state, setState] = useState({
    stateVisible: !!visible,
    control: 'props'
  });
  useEffect(() => {
    if (props.visible === state.stateVisible && state.control === 'state') {
      setState({
        control: 'props',
        stateVisible: props.visible
      });
    }
    if (props.visible !== state.stateVisible) {
      if (state.control === 'state') {
        setState({
          ...state,
          control: 'props'
        });
      }
      setState({
        control: 'props',
        stateVisible: !!props.visible
      });
    }
  }, [state.stateVisible, props.visible]);
  const onModalClose = () => {
    if (isCancel) {
      setState({
        stateVisible: false,
        control: 'state'
      });
      onCancel?.();
    }
  };
  return <Modal placement="bottom" animationType="fade" // slide  none  fade
  transparent={true} {...other} visible={state.stateVisible} onClosed={onModalClose}>
      <View>
        {React.Children.toArray(children).map((item, index) => <View key={index}>
            {index !== 0 && <View style={StyleSheet.flatten([styles.itemDivider, dividerStyle?.itemDivider])} />}
            {React.cloneElement(item, {
          activeOpacity: activeOpacity,
          underlayColor: underlayColor
        })}
          </View>)}
        <View style={StyleSheet.flatten([styles.actionDivider, dividerStyle?.actionDivider])} />
        <ActionSheetItem activeOpacity={activeOpacity} underlayColor={underlayColor} onPress={() => onCancel?.()} children={cancelText} containerStyle={containerStyle} textStyle={textStyle} />
      </View>
    </Modal>;
}
const styles = StyleSheet.create({
  actionDivider: {
    backgroundColor: 'rgba(197,217,232,.3)',
    width: MainWidth,
    height: 6
  },
  itemDivider: {
    backgroundColor: 'rgba(197,217,232,.3)',
    height: 2,
    width: MainWidth
  }
});