@draftbit/core 46.11.1-c64d65.2 → 46.11.1-ca634b.2

package/src/components/BottomSheet/BottomSheetComponent.js

@@ -0,0 +1,437 @@
+/**
+ * Slightly modfied version as taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet
+ * Main previously breaking change:
+ * const node = this.props.innerRef.current?.getNode() ==> const node = this.props.innerRef.current as any
+ */
+/**
+ * Copyright (c) 2020 Raul Gomez Acuna
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React, { Component } from "react";
+import { Dimensions, FlatList, Platform, ScrollView, SectionList, StyleSheet, View, } from "react-native";
+import Animated, { abs, add, and, call, Clock, clockRunning, cond, Easing as EasingDeprecated, 
+// @ts-ignore: this property is only present in Reanimated 2
+EasingNode, eq, event, Extrapolate, greaterOrEq, greaterThan, multiply, not, onChange, or, set, startClock, stopClock, sub, spring, timing, Value, } from "react-native-reanimated";
+import { NativeViewGestureHandler, PanGestureHandler, State as GestureState, TapGestureHandler, } from "react-native-gesture-handler";
+const { 
+//@ts-ignore
+interpolate: interpolateDeprecated, 
+// @ts-ignore: this property is only present in Reanimated 2
+interpolateNode, } = Animated;
+const interpolate = interpolateNode !== null && interpolateNode !== void 0 ? interpolateNode : interpolateDeprecated;
+//@ts-ignore
+const Easing = EasingNode !== null && EasingNode !== void 0 ? EasingNode : EasingDeprecated;
+const FlatListComponentType = "FlatList";
+const ScrollViewComponentType = "ScrollView";
+const SectionListComponentType = "SectionList";
+const TimingAnimationType = "timing";
+const SpringAnimationType = "spring";
+const DEFAULT_SPRING_PARAMS = {
+    damping: 50,
+    mass: 0.3,
+    stiffness: 121.6,
+    overshootClamping: true,
+    restSpeedThreshold: 0.3,
+    restDisplacementThreshold: 0.3,
+};
+const { height: windowHeight } = Dimensions.get("window");
+const IOS_NORMAL_DECELERATION_RATE = 0.998;
+const ANDROID_NORMAL_DECELERATION_RATE = 0.985;
+const DEFAULT_ANIMATION_DURATION = 250;
+const DEFAULT_EASING = Easing.inOut(Easing.linear);
+const imperativeScrollOptions = {
+    [FlatListComponentType]: {
+        method: "scrollToIndex",
+        args: {
+            index: 0,
+            viewPosition: 0,
+            viewOffset: 1000,
+            animated: true,
+        },
+    },
+    [ScrollViewComponentType]: {
+        method: "scrollTo",
+        args: {
+            x: 0,
+            y: 0,
+            animated: true,
+        },
+    },
+    [SectionListComponentType]: {
+        method: "scrollToLocation",
+        args: {
+            itemIndex: 0,
+            sectionIndex: 0,
+            viewPosition: 0,
+            viewOffset: 1000,
+            animated: true,
+        },
+    },
+};
+export class ScrollBottomSheet extends Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        /**
+         * Gesture Handler references
+         */
+        this.masterDrawer = React.createRef();
+        this.drawerHandleRef = React.createRef();
+        this.drawerContentRef = React.createRef();
+        this.scrollComponentRef = React.createRef();
+        /**
+         * Flag to indicate imperative snapping
+         */
+        this.isManuallySetValue = new Value(0);
+        /**
+         * Manual snapping amount
+         */
+        this.manualYOffset = new Value(0);
+        this.prevSnapIndex = -1;
+        this.dragY = new Value(0);
+        this.prevDragY = new Value(0);
+        this.tempDestSnapPoint = new Value(0);
+        this.isAndroid = new Value(Number(Platform.OS === "android"));
+        this.animationClock = new Clock();
+        this.animationPosition = new Value(0);
+        this.animationFinished = new Value(0);
+        this.animationFrameTime = new Value(0);
+        this.velocityY = new Value(0);
+        this.lastStartScrollY = new Value(0);
+        this.destSnapPoint = new Value(0);
+        this.dragWithHandle = new Value(0);
+        this.scrollUpAndPullDown = new Value(0);
+        this.convertPercentageToDp = (str) => (Number(str.split("%")[0]) * (windowHeight - this.props.topInset)) / 100;
+        this.getNormalisedSnapPoints = () => {
+            return this.props.snapPoints.map((p) => {
+                if (typeof p === "string") {
+                    return this.convertPercentageToDp(p);
+                }
+                else if (typeof p === "number") {
+                    return p;
+                }
+                throw new Error(`Invalid type for value ${p}: ${typeof p}. It should be either a percentage string or a number`);
+            });
+        };
+        this.getScrollComponent = () => {
+            switch (this.props.componentType) {
+                case "FlatList":
+                    return FlatList;
+                case "ScrollView":
+                    return ScrollView;
+                case "SectionList":
+                    return SectionList;
+                default:
+                    throw new Error("Component type not supported: it should be one of `FlatList`, `ScrollView` or `SectionList`");
+            }
+        };
+        this.snapTo = (index) => {
+            const snapPoints = this.getNormalisedSnapPoints();
+            this.isManuallySetValue.setValue(1);
+            this.manualYOffset.setValue(snapPoints[index]);
+            this.nextSnapIndex.setValue(index);
+        };
+        const { initialSnapIndex, animationType } = props;
+        const animationDriver = animationType === "timing" ? 0 : 1;
+        const animationDuration = (props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.duration)) ||
+            DEFAULT_ANIMATION_DURATION;
+        const ScrollComponent = this.getScrollComponent();
+        // @ts-ignore
+        this.scrollComponent = Animated.createAnimatedComponent(ScrollComponent);
+        const snapPoints = this.getNormalisedSnapPoints();
+        const openPosition = snapPoints[0];
+        const closedPosition = this.props.enableOverScroll
+            ? windowHeight
+            : snapPoints[snapPoints.length - 1];
+        const initialSnap = snapPoints[initialSnapIndex];
+        this.nextSnapIndex = new Value(initialSnapIndex);
+        const initialDecelerationRate = Platform.select({
+            android: props.initialSnapIndex === 0 ? ANDROID_NORMAL_DECELERATION_RATE : 0,
+            ios: IOS_NORMAL_DECELERATION_RATE,
+        });
+        this.decelerationRate = new Value(initialDecelerationRate);
+        //@ts-ignore
+        const handleGestureState = new Value(-1);
+        //@ts-ignore
+        const handleOldGestureState = new Value(-1);
+        //@ts-ignore
+        const drawerGestureState = new Value(-1);
+        //@ts-ignore
+        const drawerOldGestureState = new Value(-1);
+        const lastSnapInRange = new Value(1);
+        this.prevTranslateYOffset = new Value(initialSnap);
+        this.translationY = new Value(initialSnap);
+        this.lastSnap = new Value(initialSnap);
+        this.onHandleGestureEvent = event([
+            {
+                nativeEvent: {
+                    translationY: this.dragY,
+                    oldState: handleOldGestureState,
+                    state: handleGestureState,
+                    velocityY: this.velocityY,
+                },
+            },
+        ]);
+        this.onDrawerGestureEvent = event([
+            {
+                nativeEvent: {
+                    translationY: this.dragY,
+                    oldState: drawerOldGestureState,
+                    state: drawerGestureState,
+                    velocityY: this.velocityY,
+                },
+            },
+        ]);
+        this.onScrollBeginDrag = event([
+            {
+                nativeEvent: {
+                    contentOffset: { y: this.lastStartScrollY },
+                },
+            },
+        ]);
+        const didHandleGestureBegin = eq(handleGestureState, GestureState.ACTIVE);
+        const isAnimationInterrupted = and(or(eq(handleGestureState, GestureState.BEGAN), eq(drawerGestureState, GestureState.BEGAN), and(eq(this.isAndroid, 0), eq(animationDriver, 1), or(eq(drawerGestureState, GestureState.ACTIVE), eq(handleGestureState, GestureState.ACTIVE)))), clockRunning(this.animationClock));
+        this.didGestureFinish = or(and(eq(handleOldGestureState, GestureState.ACTIVE), eq(handleGestureState, GestureState.END)), and(eq(drawerOldGestureState, GestureState.ACTIVE), eq(drawerGestureState, GestureState.END)));
+        // Function that determines if the last snap point is in the range {snapPoints}
+        // In the case of interruptions in the middle of an animation, we'll get
+        // lastSnap values outside the range
+        const isLastSnapPointInRange = (i = 0) => i === snapPoints.length
+            ? lastSnapInRange
+            : cond(eq(this.lastSnap, snapPoints[i]), [set(lastSnapInRange, 1)], isLastSnapPointInRange(i + 1));
+        const scrollY = [
+            set(lastSnapInRange, 0),
+            isLastSnapPointInRange(),
+            cond(or(didHandleGestureBegin, and(this.isManuallySetValue, not(eq(this.manualYOffset, snapPoints[0])))), [set(this.dragWithHandle, 1), 0]),
+            cond(
+            // This is to account for a continuous scroll on the drawer from a snap point
+            // Different than top, bringing the drawer to the top position, so that if we
+            // change scroll direction without releasing the gesture, it doesn't pull down the drawer again
+            and(eq(this.dragWithHandle, 1), greaterThan(snapPoints[0], add(this.lastSnap, this.dragY)), and(not(eq(this.lastSnap, snapPoints[0])), lastSnapInRange)), [
+                set(this.lastSnap, snapPoints[0]),
+                set(this.dragWithHandle, 0),
+                this.lastStartScrollY,
+            ], cond(eq(this.dragWithHandle, 1), 0, this.lastStartScrollY)),
+        ];
+        this.didScrollUpAndPullDown = cond(and(greaterOrEq(this.dragY, this.lastStartScrollY), greaterThan(this.lastStartScrollY, 0)), set(this.scrollUpAndPullDown, 1));
+        this.setTranslationY = cond(and(not(this.dragWithHandle), not(greaterOrEq(this.dragY, this.lastStartScrollY))), set(this.translationY, sub(this.dragY, this.lastStartScrollY)), set(this.translationY, this.dragY));
+        this.extraOffset = cond(eq(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0);
+        const endOffsetY = add(this.lastSnap, this.translationY, multiply(1 - props.friction, this.velocityY));
+        this.calculateNextSnapPoint = (i = 0) => i === snapPoints.length
+            ? this.tempDestSnapPoint
+            : cond(greaterThan(abs(sub(this.tempDestSnapPoint, endOffsetY)), abs(sub(add(snapPoints[i], this.extraOffset), endOffsetY))), [
+                set(this.tempDestSnapPoint, add(snapPoints[i], this.extraOffset)),
+                set(this.nextSnapIndex, i),
+                this.calculateNextSnapPoint(i + 1),
+            ], this.calculateNextSnapPoint(i + 1));
+        const runAnimation = ({ clock, from, to, position, finished, velocity, frameTime, }) => {
+            var _a;
+            const state = {
+                finished,
+                velocity: new Value(0),
+                position,
+                time: new Value(0),
+                frameTime,
+            };
+            const timingConfig = {
+                duration: animationDuration,
+                easing: (props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.easing)) ||
+                    DEFAULT_EASING,
+                toValue: new Value(0),
+            };
+            const springConfig = {
+                ...DEFAULT_SPRING_PARAMS,
+                ...((props.animationType === "spring" && props.animationConfig) || {}),
+                toValue: new Value(0),
+            };
+            return [
+                cond(and(not(clockRunning(clock)), not(eq(finished, 1))), [
+                    // If the clock isn't running, we reset all the animation params and start the clock
+                    set(state.finished, 0),
+                    set(state.velocity, velocity),
+                    set(state.time, 0),
+                    set(state.position, from),
+                    set(state.frameTime, 0),
+                    set(timingConfig.toValue, to),
+                    set(springConfig.toValue, to),
+                    startClock(clock),
+                ]),
+                // We run the step here that is going to update position
+                cond(eq(animationDriver, 0), 
+                //@ts-ignore
+                timing(clock, state, timingConfig), spring(clock, state, springConfig)),
+                cond(state.finished, [
+                    call([this.nextSnapIndex], ([value]) => {
+                        var _a, _b;
+                        if (value !== this.prevSnapIndex) {
+                            (_b = (_a = this.props).onSettle) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        }
+                        this.prevSnapIndex = value;
+                    }),
+                    // Resetting appropriate values
+                    set(drawerOldGestureState, GestureState.END),
+                    set(handleOldGestureState, GestureState.END),
+                    set(this.prevTranslateYOffset, state.position),
+                    cond(eq(this.scrollUpAndPullDown, 1), [
+                        set(this.prevTranslateYOffset, sub(this.prevTranslateYOffset, this.lastStartScrollY)),
+                        set(this.lastStartScrollY, 0),
+                        set(this.scrollUpAndPullDown, 0),
+                    ]),
+                    cond(eq(this.destSnapPoint, snapPoints[0]), [
+                        set(this.dragWithHandle, 0),
+                    ]),
+                    set(this.isManuallySetValue, 0),
+                    set(this.manualYOffset, 0),
+                    stopClock(clock),
+                    this.prevTranslateYOffset,
+                ], 
+                // We made the block return the updated position,
+                state.position),
+            ];
+        };
+        const translateYOffset = cond(isAnimationInterrupted, [
+            // set(prevTranslateYOffset, animationPosition) should only run if we are
+            // interrupting an animation when the drawer is currently in a different
+            // position than the top
+            cond(or(this.dragWithHandle, greaterOrEq(abs(this.prevDragY), this.lastStartScrollY)), set(this.prevTranslateYOffset, this.animationPosition)),
+            set(this.animationFinished, 1),
+            set(this.translationY, 0),
+            // Resetting appropriate values
+            set(drawerOldGestureState, GestureState.END),
+            set(handleOldGestureState, GestureState.END),
+            // By forcing that frameTime exceeds duration, it has the effect of stopping the animation
+            set(this.animationFrameTime, add(animationDuration, 1000)),
+            set(this.velocityY, 0),
+            stopClock(this.animationClock),
+            this.prevTranslateYOffset,
+        ], cond(or(this.didGestureFinish, this.isManuallySetValue, clockRunning(this.animationClock)), [
+            runAnimation({
+                clock: this.animationClock,
+                from: cond(this.isManuallySetValue, this.prevTranslateYOffset, add(this.prevTranslateYOffset, this.translationY)),
+                to: this.destSnapPoint,
+                position: this.animationPosition,
+                finished: this.animationFinished,
+                frameTime: this.animationFrameTime,
+                velocity: this.velocityY,
+            }),
+        ], [
+            set(this.animationFrameTime, 0),
+            set(this.animationFinished, 0),
+            // @ts-ignore
+            this.prevTranslateYOffset,
+        ]));
+        this.translateY = interpolate(add(translateYOffset, this.dragY, multiply(scrollY, -1)), {
+            inputRange: [openPosition, closedPosition],
+            outputRange: [openPosition, closedPosition],
+            extrapolate: Extrapolate.CLAMP,
+        });
+        this.position = interpolate(this.translateY, {
+            inputRange: [openPosition, snapPoints[snapPoints.length - 1]],
+            outputRange: [1, 0],
+            extrapolate: Extrapolate.CLAMP,
+        });
+    }
+    render() {
+        const { renderHandle, initialSnapIndex, containerStyle, ...rest } = this.props;
+        const AnimatedScrollableComponent = this.scrollComponent;
+        const normalisedSnapPoints = this.getNormalisedSnapPoints();
+        const initialSnap = normalisedSnapPoints[initialSnapIndex];
+        const Content = (React.createElement(Animated.View, { style: [
+                StyleSheet.absoluteFillObject,
+                containerStyle,
+                // @ts-ignore
+                {
+                    transform: [{ translateY: this.translateY }],
+                },
+            ] },
+            React.createElement(PanGestureHandler, { ref: this.drawerHandleRef, shouldCancelWhenOutside: false, simultaneousHandlers: this.masterDrawer, onGestureEvent: this.onHandleGestureEvent, onHandlerStateChange: this.onHandleGestureEvent },
+                React.createElement(Animated.View, null, renderHandle())),
+            React.createElement(PanGestureHandler, { ref: this.drawerContentRef, simultaneousHandlers: [this.scrollComponentRef, this.masterDrawer], shouldCancelWhenOutside: false, onGestureEvent: this.onDrawerGestureEvent, onHandlerStateChange: this.onDrawerGestureEvent },
+                React.createElement(Animated.View, { style: styles.container },
+                    React.createElement(NativeViewGestureHandler, { ref: this.scrollComponentRef, waitFor: this.masterDrawer, simultaneousHandlers: this.drawerContentRef },
+                        React.createElement(AnimatedScrollableComponent, { overScrollMode: "never", bounces: false, ...rest, ref: this.props.innerRef, 
+                            // @ts-ignore
+                            decelerationRate: this.decelerationRate, onScrollBeginDrag: this.onScrollBeginDrag, scrollEventThrottle: 1, contentContainerStyle: [
+                                rest.contentContainerStyle,
+                                { paddingBottom: this.getNormalisedSnapPoints()[0] },
+                            ] })))),
+            this.props.animatedPosition && (React.createElement(Animated.Code, { exec: onChange(this.position, set(this.props.animatedPosition, this.position)) })),
+            React.createElement(Animated.Code, { exec: onChange(this.dragY, cond(not(eq(this.dragY, 0)), set(this.prevDragY, this.dragY))) }),
+            React.createElement(Animated.Code, { exec: onChange(this.didGestureFinish, cond(this.didGestureFinish, [
+                    this.didScrollUpAndPullDown,
+                    this.setTranslationY,
+                    set(this.tempDestSnapPoint, add(normalisedSnapPoints[0], this.extraOffset)),
+                    set(this.nextSnapIndex, 0),
+                    set(this.destSnapPoint, this.calculateNextSnapPoint()),
+                    cond(and(greaterThan(this.dragY, this.lastStartScrollY), this.isAndroid, not(this.dragWithHandle)), call([], () => {
+                        var _a, _b;
+                        // This prevents the scroll glide from happening on Android when pulling down with inertia.
+                        // It's not perfect, but does the job for now
+                        const { method, args } = imperativeScrollOptions[this.props.componentType];
+                        // @ts-ignore
+                        const node = this.props.innerRef.current;
+                        if (node &&
+                            node[method] &&
+                            ((this.props.componentType === "FlatList" &&
+                                (((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0) ||
+                                (this.props.componentType === "SectionList" &&
+                                    this.props.sections.length > 0) ||
+                                this.props.componentType === "ScrollView")) {
+                            node[method](args);
+                        }
+                    })),
+                    set(this.dragY, 0),
+                    set(this.velocityY, 0),
+                    set(this.lastSnap, sub(this.destSnapPoint, cond(eq(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0))),
+                    call([this.lastSnap], ([value]) => {
+                        var _a, _b;
+                        // This is the TapGHandler trick
+                        // @ts-ignore
+                        (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
+                            maxDeltaY: value - this.getNormalisedSnapPoints()[0],
+                        });
+                    }),
+                    set(this.decelerationRate, cond(eq(this.isAndroid, 1), cond(eq(this.lastSnap, normalisedSnapPoints[0]), ANDROID_NORMAL_DECELERATION_RATE, 0), IOS_NORMAL_DECELERATION_RATE)),
+                ])) }),
+            React.createElement(Animated.Code, { exec: onChange(this.isManuallySetValue, [
+                    cond(this.isManuallySetValue, [
+                        set(this.destSnapPoint, this.manualYOffset),
+                        set(this.animationFinished, 0),
+                        set(this.lastSnap, this.manualYOffset),
+                        call([this.lastSnap], ([value]) => {
+                            var _a, _b;
+                            // This is the TapGHandler trick
+                            // @ts-ignore
+                            (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
+                                maxDeltaY: value - this.getNormalisedSnapPoints()[0],
+                            });
+                        }),
+                    ], [set(this.nextSnapIndex, 0)]),
+                ]) })));
+        // On Android, having an intermediary view with pointerEvents="box-none", breaks the
+        // waitFor logic
+        if (Platform.OS === "android") {
+            return (React.createElement(TapGestureHandler, { maxDurationMs: 100000, ref: this.masterDrawer, maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0], shouldCancelWhenOutside: false }, Content));
+        }
+        // On iOS, We need to wrap the content on a view with PointerEvents box-none
+        // So that we can start scrolling automatically when reaching the top without
+        // Stopping the gesture
+        return (React.createElement(TapGestureHandler, { maxDurationMs: 100000, ref: this.masterDrawer, maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0] },
+            React.createElement(View, { style: StyleSheet.absoluteFillObject, pointerEvents: "box-none" }, Content)));
+    }
+}
+ScrollBottomSheet.defaultProps = {
+    topInset: 0,
+    friction: 0.95,
+    animationType: "timing",
+    innerRef: React.createRef(),
+    enableOverScroll: false,
+};
+export default ScrollBottomSheet;
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});

package/src/components/DeckSwiper/DeckSwiper.js

@@ -50,7 +50,7 @@ const DeckSwiper = ({ onIndexChanged, onEndReached, startCardIndex = 0, infinite
 };
 const styles = StyleSheet.create({
     cardsContainer: {
-        width: "100%",
+        flex: 1,
     },
     card: {
         left: 0,

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -120,7 +120,7 @@ const DeckSwiper = <T extends object>({
 
 const styles = StyleSheet.create({
   cardsContainer: {
-    width: "100%",
+    flex: 1,
   },
   card: {
     left: 0,

package/src/components/Picker/Picker.js

@@ -38,7 +38,7 @@ const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
 //Empty string for 'value' is treated as a non-value
 //reason: Draftbit uses empty string as initial value for string state*/
-const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder = "Select an option", value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -50,6 +50,9 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         if (value != null && value !== "") {
             setInternalValue(value);
         }
+        else if (value === "") {
+            setInternalValue(undefined);
+        }
     }, [value]);
     React.useEffect(() => {
         if (defaultValue != null && defaultValue !== "") {
@@ -67,12 +70,21 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             Keyboard.dismiss();
         }
     }, [pickerVisible, autoDismissKeyboard]);
-    const normalizedOptions = normalizeOptions(options);
+    const normalizedOptions = React.useMemo(() => normalizeOptions(options), [options]);
     //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
     //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
-    const pickerOptions = placeholder
+    const pickerOptions = React.useMemo(() => placeholder
         ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
-        : normalizedOptions;
+        : normalizedOptions, [placeholder, normalizedOptions]);
+    //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+    if (!placeholder &&
+        pickerOptions.length &&
+        !internalValue &&
+        internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+    ) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(pickerOptions[0].value, 0);
+        setInternalValue(pickerOptions[0].value);
+    }
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [

package/src/components/Picker/Picker.tsx

@@ -101,7 +101,7 @@ const Picker: React.FC<PickerProps> = ({
   defaultValue,
   Icon,
   style,
-  placeholder = "Select an option",
+  placeholder,
   value,
   disabled = false,
   assistiveText,
@@ -130,6 +130,8 @@ const Picker: React.FC<PickerProps> = ({
   React.useEffect(() => {
     if (value != null && value !== "") {
       setInternalValue(value);
+    } else if (value === "") {
+      setInternalValue(undefined);
     }
   }, [value]);
 
@@ -151,13 +153,31 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, autoDismissKeyboard]);
 
-  const normalizedOptions = normalizeOptions(options);
+  const normalizedOptions = React.useMemo(
+    () => normalizeOptions(options),
+    [options]
+  );
 
   //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
   //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
-  const pickerOptions = placeholder
-    ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
-    : normalizedOptions;
+  const pickerOptions = React.useMemo(
+    () =>
+      placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions,
+    [placeholder, normalizedOptions]
+  );
+
+  //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (
+    !placeholder &&
+    pickerOptions.length &&
+    !internalValue &&
+    internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+  ) {
+    onValueChange?.(pickerOptions[0].value, 0);
+    setInternalValue(pickerOptions[0].value);
+  }
 
   const { viewStyles, textStyles } = extractStyles(style);
 

package/src/components/Shadow.js

@@ -1,6 +1,11 @@
 import React from "react";
+import { StyleSheet } from "react-native";
 import { Shadow as ShadowComponent } from "react-native-shadow-2";
-const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, paintInside = false, style, ...rest }) => {
+import { extractBorderAndMarginStyles } from "../utilities";
+const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, paintInside = true, style, ...rest }) => {
+    const { borderStyles } = extractBorderAndMarginStyles(style);
+    const containerStyle = StyleSheet.flatten(style);
+    Object.keys(borderStyles).forEach((key) => delete containerStyle[key]);
     return (React.createElement(ShadowComponent, { offset: [offsetX, offsetY], sides: {
             start: showShadowSideStart,
             end: showShadowSideEnd,
@@ -11,6 +16,6 @@ const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShad
             topEnd: showShadowCornerTopEnd,
             bottomStart: showShadowCornerBottomStart,
             bottomEnd: showShadowCornerBottomEnd,
-        }, containerStyle: style, paintInside: paintInside, ...rest }));
+        }, style: borderStyles, containerStyle: containerStyle, paintInside: paintInside, ...rest }));
 };
 export default Shadow;

package/src/components/Shadow.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
 import { Shadow as ShadowComponent } from "react-native-shadow-2";
+import { extractBorderAndMarginStyles } from "../utilities";
 
 interface ShadowProps {
   disabled?: boolean;
@@ -33,10 +34,15 @@ const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
   showShadowCornerTopEnd = true,
   showShadowCornerBottomStart = true,
   showShadowCornerBottomEnd = true,
-  paintInside = false,
+  paintInside = true,
   style,
   ...rest
 }) => {
+  const { borderStyles } = extractBorderAndMarginStyles(style);
+
+  const containerStyle = StyleSheet.flatten(style) as StyleProp<any>;
+  Object.keys(borderStyles).forEach((key) => delete containerStyle[key]);
+
   return (
     <ShadowComponent
       offset={[offsetX, offsetY]}
@@ -52,7 +58,8 @@ const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
         bottomStart: showShadowCornerBottomStart,
         bottomEnd: showShadowCornerBottomEnd,
       }}
-      containerStyle={style}
+      style={borderStyles}
+      containerStyle={containerStyle}
       paintInside={paintInside}
       {...rest}
     />

package/src/components/TabView/TabView.js

@@ -39,7 +39,7 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
         }
     };
     const renderTabBar = (props) => {
-        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
                 backgroundColor: indicatorColor || theme.colors.primary,
             }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
                 backgroundColor: tabsBackgroundColor || theme.colors.background,

package/src/components/TabView/TabView.tsx

@@ -106,7 +106,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
       <TabBar
         {...props}
         activeColor={activeColor || theme.colors.primary}
-        inactiveColor={inactiveColor || theme.colors.divider}
+        inactiveColor={inactiveColor || "rgb(200,200,200)"}
         pressColor={pressColor || theme.colors.primary}
         scrollEnabled={scrollEnabled}
         indicatorStyle={{

package/src/index.js

@@ -35,6 +35,7 @@ export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
+export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
 export { Table, TableRow, TableCell } from "./components/Table";
 /* Deprecated: Fix or Delete!  */

package/src/index.tsx

@@ -58,6 +58,8 @@ export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 
+export { BottomSheet } from "./components/BottomSheet";
+
 export { YoutubePlayer } from "./components/YoutubePlayer";
 
 export { Table, TableRow, TableCell } from "./components/Table";