@draftbit/core 42.3.3-fdd04d.0 → 42.4.0

package/src/components/Checkbox/Checkbox.tsx

@@ -38,7 +38,8 @@ export interface CheckboxProps {
   checkedIcon?: string;
   uncheckedIcon?: string;
   indeterminateIcon?: string;
-  initialValue?: boolean;
+  initialValue?: boolean; // deprecated
+  defaultValue?: CheckboxStatus;
   size?: number;
   style?: StyleProp<ViewStyle>;
 }
@@ -53,6 +54,7 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
     uncheckedColor,
     indeterminateColor,
     initialValue,
+    defaultValue,
     checkedIcon = "MaterialCommunityIcons/checkbox-marked",
     uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
     indeterminateIcon = "AntDesign/minussquareo",
@@ -60,6 +62,14 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
     style,
     ...rest
   }) => {
+    const [internalValue, setInternalValue] = React.useState<CheckboxStatus>(
+      status || defaultValue
+    );
+
+    React.useEffect(() => {
+      setInternalValue(status);
+    }, [status]);
+
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
       if (initialValue !== previousInitialValue) {
@@ -82,10 +92,19 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
 
     const checkboxColor = colorsMap[status];
 
+    const handlePress = () => {
+      setInternalValue(
+        internalValue === CheckboxStatus.Unchecked
+          ? CheckboxStatus.Checked
+          : CheckboxStatus.Unchecked
+      );
+      onPress(internalValue === CheckboxStatus.Unchecked);
+    };
+
     return (
       <Touchable
         {...rest}
-        onPress={() => onPress(status === "unchecked" ? true : false)}
+        onPress={handlePress}
         disabled={disabled}
         accessibilityState={{ disabled }}
         accessibilityRole="button"
@@ -94,7 +113,7 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
       >
         <Icon
           style={styles.icon}
-          name={iconsMap[status]}
+          name={iconsMap[internalValue]}
           size={size}
           color={checkboxColor}
         />

package/src/components/DatePicker/DatePicker.js

@@ -26,8 +26,8 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, initialValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
-    const [value, setValue] = React.useState(date);
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, initialValue, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
+    const [value, setValue] = React.useState(date || defaultValue);
     const [pickerVisible, setPickerVisible] = React.useState(false);
     const [labeled] = React.useState(new Animated.Value(date ? 0 : 1));
     const [placeholder1, setPlaceholder1] = React.useState("");

package/src/components/DatePicker/DatePicker.tsx

@@ -45,7 +45,8 @@ type Props = {
   date?: Date;
   format?: string;
   onDateChange?: (data?: Date) => void;
-  initialValue?: Date;
+  initialValue?: Date; // deprecated
+  defaultValue?: Date;
   disabled?: boolean;
   mode?: "date" | "time" | "datetime";
   type?: "solid" | "underline";
@@ -79,6 +80,7 @@ const DatePicker: React.FC<Props> = ({
   date,
   onDateChange = () => {},
   initialValue,
+  defaultValue,
   disabled = false,
   mode = "date",
   format,
@@ -90,7 +92,7 @@ const DatePicker: React.FC<Props> = ({
   placeholder,
   ...props
 }) => {
-  const [value, setValue] = React.useState<any>(date);
+  const [value, setValue] = React.useState<any>(date || defaultValue);
   const [pickerVisible, setPickerVisible] = React.useState(false);
   const [labeled] = React.useState<Animated.Value>(
     new Animated.Value(date ? 0 : 1)

package/src/components/FieldSearchBarFull.js

@@ -4,11 +4,15 @@ import { withTheme } from "../theming";
 import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, } from "@draftbit/types";
 import Config from "./Config";
 import { usePrevious } from "../hooks";
-const FieldSearchBarFull = ({ Icon, icon = "search", placeholder = "", style, theme: { colors, typography }, onChange: changeOverride, onSubmit: submitOverride, value, initialValue, }) => {
+const FieldSearchBarFull = ({ Icon, icon = "search", placeholder = "", style, theme: { colors, typography }, onChange: changeOverride, onSubmit: submitOverride, value, initialValue, defaultValue, }) => {
     const [focused, setIsFocused] = React.useState(false);
     const onBlur = () => {
         setIsFocused(false);
     };
+    const [internalValue, setIntervalValue] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        setIntervalValue(value);
+    }, [value]);
     const onChange = React.useCallback((text) => {
         changeOverride && changeOverride(text);
     }, [changeOverride]);
@@ -25,10 +29,16 @@ const FieldSearchBarFull = ({ Icon, icon = "search", placeholder = "", style, th
         submitOverride && submitOverride(e);
     };
     const { lineHeight, ...typeStyles } = typography.body2; // eslint-disable-line @typescript-eslint/no-unused-vars
+    const handleChangeText = (newValue) => {
+        setIntervalValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
     return (React.createElement(View, { style: [{ padding: 16 }, styles.container, style] },
         React.createElement(Icon, { name: icon, size: Config.fieldSearchBarFullIconSize, color: focused ? colors.primary : colors.light }),
         React.createElement(View, { style: { marginLeft: 12, flex: 1 } },
-            React.createElement(TextInput, { clearButtonMode: "while-editing", placeholder: placeholder, value: value, onBlur: onBlur, onFocus: onFocus, onChangeText: onChange, onSubmitEditing: onSubmit, placeholderTextColor: colors.light, style: [
+            React.createElement(TextInput, { clearButtonMode: "while-editing", placeholder: placeholder, value: internalValue, onBlur: onBlur, onFocus: onFocus, onChangeText: handleChangeText, onSubmitEditing: onSubmit, placeholderTextColor: colors.light, style: [
                     {
                         color: colors.medium,
                     },

package/src/components/FieldSearchBarFull.tsx

@@ -27,10 +27,11 @@ type Props = {
   placeholder?: string;
   style?: StyleProp<ViewStyle>;
   theme: Theme;
-  onChange: (text: string) => void;
+  onChange?: (text: string) => void;
   onSubmit?: (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
-  value: string;
-  initialValue?: string;
+  value?: string;
+  initialValue?: string; // deprecated
+  defaultValue?: string;
 } & IconSlot;
 
 const FieldSearchBarFull: React.FC<Props> = ({
@@ -43,6 +44,7 @@ const FieldSearchBarFull: React.FC<Props> = ({
   onSubmit: submitOverride,
   value,
   initialValue,
+  defaultValue,
 }) => {
   const [focused, setIsFocused] = React.useState(false);
 
@@ -50,6 +52,14 @@ const FieldSearchBarFull: React.FC<Props> = ({
     setIsFocused(false);
   };
 
+  const [internalValue, setIntervalValue] = React.useState<string | undefined>(
+    value || defaultValue
+  );
+
+  React.useEffect(() => {
+    setIntervalValue(value);
+  }, [value]);
+
   const onChange = React.useCallback(
     (text: string) => {
       changeOverride && changeOverride(text);
@@ -76,6 +86,13 @@ const FieldSearchBarFull: React.FC<Props> = ({
 
   const { lineHeight, ...typeStyles } = typography.body2; // eslint-disable-line @typescript-eslint/no-unused-vars
 
+  const handleChangeText = (newValue: string) => {
+    setIntervalValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
   return (
     <View style={[{ padding: 16 }, styles.container, style]}>
       <Icon
@@ -87,10 +104,10 @@ const FieldSearchBarFull: React.FC<Props> = ({
         <TextInput
           clearButtonMode="while-editing"
           placeholder={placeholder}
-          value={value}
+          value={internalValue}
           onBlur={onBlur}
           onFocus={onFocus}
-          onChangeText={onChange}
+          onChangeText={handleChangeText}
           onSubmitEditing={onSubmit}
           placeholderTextColor={colors.light}
           style={[

package/src/components/Picker/Picker.js

@@ -24,7 +24,11 @@ function normalizeOptions(options) {
     }
     throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
 }
-const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverride, value, initialValue, ...props }) => {
+const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverride, value, initialValue, defaultValue, ...props }) => {
+    const [internalValue, setIntervalValue] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        setIntervalValue(value);
+    }, [value]);
     const onValueChange = React.useCallback((itemValue, itemIndex) => {
         if (placeholder && itemIndex === 0) {
             return;
@@ -46,7 +50,13 @@ const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverrid
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
         : normalizedOptions;
-    return (React.createElement(PickerComponent, { ...props, selectedValue: String(value), placeholder: placeholder, options: pickerOptions, onValueChange: onValueChange }));
+    const handleValueChange = (newValue, itemIndex) => {
+        setIntervalValue(newValue);
+        if (onValueChange) {
+            onValueChange(newValue, itemIndex);
+        }
+    };
+    return (React.createElement(PickerComponent, { ...props, selectedValue: String(internalValue), placeholder: placeholder, options: pickerOptions, onValueChange: handleValueChange }));
 };
 export default withTheme(Picker);
 const SEED_DATA_PROPS = {

package/src/components/Picker/Picker.tsx

@@ -16,7 +16,7 @@ import { usePrevious } from "../../hooks";
 
 type Props = PickerComponentProps & {
   placeholder?: string;
-  value: string;
+  value?: string;
   options: PickerOption[] | string[];
 };
 
@@ -52,8 +52,17 @@ const Picker: React.FC<Props> = ({
   onValueChange: onValueChangeOverride,
   value,
   initialValue,
+  defaultValue,
   ...props
 }) => {
+  const [internalValue, setIntervalValue] = React.useState<string | undefined>(
+    value || defaultValue
+  );
+
+  React.useEffect(() => {
+    setIntervalValue(value);
+  }, [value]);
+
   const onValueChange = React.useCallback(
     (itemValue: string, itemIndex: number) => {
       if (placeholder && itemIndex === 0) {
@@ -86,13 +95,20 @@ const Picker: React.FC<Props> = ({
     ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
     : normalizedOptions;
 
+  const handleValueChange = (newValue: string, itemIndex: number) => {
+    setIntervalValue(newValue);
+    if (onValueChange) {
+      onValueChange(newValue, itemIndex);
+    }
+  };
+
   return (
     <PickerComponent
       {...props}
-      selectedValue={String(value)}
+      selectedValue={String(internalValue)}
       placeholder={placeholder}
       options={pickerOptions}
-      onValueChange={onValueChange}
+      onValueChange={handleValueChange}
     />
   );
 };

package/src/components/Picker/PickerTypes.ts

@@ -13,6 +13,7 @@ export interface PickerComponentProps extends TextFieldProps {
   placeholder?: string;
   selectedValue: string;
   disabled?: boolean;
-  onValueChange: (value: string, index: number) => void;
-  initialValue?: string;
+  onValueChange?: (value: string, index: number) => void;
+  initialValue?: string; // deprecated
+  defaultValue?: string;
 }

package/src/components/RadioButton/RadioButtonGroup.js

@@ -4,7 +4,11 @@ import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, }
 import { radioButtonGroupContext, Direction } from "./context";
 import { usePrevious } from "../../hooks";
 const { Provider } = radioButtonGroupContext;
-const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange = () => { }, initialValue, style, children, ...rest }) => {
+const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange = () => { }, initialValue, defaultValue, style, children, ...rest }) => {
+    const [internalValue, setIntervalValue] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        setIntervalValue(value);
+    }, [value]);
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
         if (initialValue !== previousInitialValue) {
@@ -22,7 +26,11 @@ const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange
         });
     }
     return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
-        React.createElement(Provider, { value: { value, onValueChange, direction } },
+        React.createElement(Provider, { value: {
+                value: internalValue || "",
+                onValueChange: setIntervalValue,
+                direction,
+            } },
             React.createElement(View, { style: _containerStyle }, children))));
 };
 export default RadioButtonGroup;

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -12,9 +12,10 @@ import { usePrevious } from "../../hooks";
 export interface RadioButtonGroupProps {
   direction?: Direction;
   style?: StyleProp<ViewStyle>;
-  value: string;
+  value?: string;
   onValueChange: (value: string) => void;
-  initialValue?: string;
+  initialValue?: string; // deprecated
+  defaultValue?: string;
   theme: Theme;
   children: React.ReactNode;
 }
@@ -26,10 +27,19 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
   value,
   onValueChange = () => {},
   initialValue,
+  defaultValue,
   style,
   children,
   ...rest
 }) => {
+  const [internalValue, setIntervalValue] = React.useState<string | undefined>(
+    value || defaultValue
+  );
+
+  React.useEffect(() => {
+    setIntervalValue(value);
+  }, [value]);
+
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {
     if (initialValue !== previousInitialValue) {
@@ -51,7 +61,13 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
 
   return (
     <View style={[{ minHeight: 40 }, style]} {...rest}>
-      <Provider value={{ value, onValueChange, direction }}>
+      <Provider
+        value={{
+          value: internalValue || "",
+          onValueChange: setIntervalValue,
+          direction,
+        }}
+      >
         <View style={_containerStyle}>{children}</View>
       </Provider>
     </View>

package/src/components/Slider.js

@@ -24,22 +24,30 @@ function maybeParseValue(value) {
     }
     return undefined;
 }
-function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, initialValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
+function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, initialValue, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
         if (initialValue !== previousInitialValue) {
             onValueChange(initialValue);
         }
     }, [initialValue, previousInitialValue, onValueChange]);
+    const [internalValue, setIntervalValue] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        setIntervalValue(value);
+    }, [value]);
     const minTrackColor = minimumTrackTintColor || theme.colors.primary;
     const maxTrackColor = maximumTrackTintColor || theme.colors.light;
     const thumbColor = thumbTintColor || theme.colors.primary;
     const leftIconThemeColor = leftIconColor || theme.colors.light;
     const rightIconThemeColor = rightIconColor || theme.colors.light;
-    const parsedValue = maybeParseValue(value);
+    const parsedValue = maybeParseValue(internalValue);
+    const handleSlidingComplete = (newValue) => {
+        setIntervalValue(newValue);
+        onValueChange(newValue);
+    };
     return (React.createElement(View, { style: [styles.container, style], ...rest },
         leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
-        React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: onValueChange, style: styles.slider }),
+        React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
         rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
 }
 const styles = StyleSheet.create({

package/src/components/Slider.tsx

@@ -21,7 +21,8 @@ import { usePrevious } from "../hooks";
 export type Props = {
   style?: StyleProp<ViewStyle>;
   value?: number;
-  initialValue?: number;
+  initialValue?: number; // deprecated
+  defaultValue?: number;
   minimumTrackTintColor: string;
   maximumTrackTintColor: string;
   leftIcon?: string;
@@ -66,6 +67,7 @@ function Slider({
   rightIconColor,
   value,
   initialValue,
+  defaultValue,
   minimumTrackTintColor,
   maximumTrackTintColor,
   thumbTintColor,
@@ -85,6 +87,14 @@ function Slider({
     }
   }, [initialValue, previousInitialValue, onValueChange]);
 
+  const [internalValue, setIntervalValue] = React.useState<number | undefined>(
+    value || defaultValue
+  );
+
+  React.useEffect(() => {
+    setIntervalValue(value);
+  }, [value]);
+
   const minTrackColor = minimumTrackTintColor || theme.colors.primary;
   const maxTrackColor = maximumTrackTintColor || theme.colors.light;
   const thumbColor = thumbTintColor || theme.colors.primary;
@@ -92,7 +102,12 @@ function Slider({
   const leftIconThemeColor = leftIconColor || theme.colors.light;
   const rightIconThemeColor = rightIconColor || theme.colors.light;
 
-  const parsedValue = maybeParseValue(value);
+  const parsedValue = maybeParseValue(internalValue);
+
+  const handleSlidingComplete = (newValue: number) => {
+    setIntervalValue(newValue);
+    onValueChange(newValue);
+  };
 
   return (
     <View style={[styles.container, style]} {...rest}>
@@ -108,7 +123,7 @@ function Slider({
         minimumTrackTintColor={minTrackColor}
         maximumTrackTintColor={maxTrackColor}
         thumbTintColor={thumbColor}
-        onSlidingComplete={onValueChange}
+        onSlidingComplete={handleSlidingComplete}
         style={styles.slider}
       />
       {rightIcon ? (

package/src/components/StarRating.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { View, StyleSheet, Pressable, } from "react-native";
 import { withTheme } from "../theming";
 import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, GROUPS, } from "@draftbit/types";
-const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
-    const [localRating, setLocalRating] = React.useState(rating);
+const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, defaultValue, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
+    const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
     React.useEffect(() => {
         setLocalRating(rating);
     }, [rating]);

package/src/components/StarRating.tsx

@@ -24,6 +24,7 @@ type Props = {
   starSize?: number;
   maxStars?: number;
   rating?: number;
+  defaultValue?: number;
   isEditable?: boolean;
   activeColor?: string;
   inactiveColor?: string;
@@ -37,6 +38,7 @@ const StarRating: React.FC<Props> = ({
   starSize = 16,
   maxStars = 5,
   rating = 0,
+  defaultValue,
   isEditable = false,
   activeColor,
   inactiveColor,
@@ -44,7 +46,9 @@ const StarRating: React.FC<Props> = ({
   onPress,
   ...rest
 }) => {
-  const [localRating, setLocalRating] = React.useState(rating);
+  const [localRating, setLocalRating] = React.useState<number>(
+    rating || defaultValue || 0
+  );
 
   React.useEffect(() => {
     setLocalRating(rating);

package/src/components/Stepper.js

@@ -4,8 +4,11 @@ import { withTheme } from "../theming";
 import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, Triggers, } from "@draftbit/types";
 import IconButton from "./IconButton";
 import { usePrevious } from "../hooks";
-const Stepper = ({ Icon, value = 0, style, onChange, initialValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
-    const [stateValue, setStateValue] = React.useState(value);
+const Stepper = ({ Icon, value = 0, style, onChange, initialValue, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
+    const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
+    React.useEffect(() => {
+        setStateValue(value);
+    }, [value]);
     const previousInitialValue = usePrevious(initialValue);
     React.useEffect(() => {
         if (initialValue !== previousInitialValue) {

package/src/components/Stepper.tsx

@@ -19,7 +19,8 @@ type Props = {
   theme: Theme;
   style?: StyleProp<ViewStyle>;
   onChange?: (value: number) => void;
-  initialValue?: number;
+  initialValue?: number; // deprecated
+  defaultValue?: number;
   iconSize?: number;
   iconColor?: string;
   borderRadius?: number;
@@ -32,13 +33,20 @@ const Stepper: React.FC<Props> = ({
   style,
   onChange,
   initialValue,
+  defaultValue,
   theme: { colors, typography, roundness },
   iconSize = 24,
   iconColor = colors.strong,
   borderRadius = roundness,
   typeStyle,
 }) => {
-  const [stateValue, setStateValue] = React.useState(value);
+  const [stateValue, setStateValue] = React.useState(
+    value || defaultValue || 0
+  );
+
+  React.useEffect(() => {
+    setStateValue(value);
+  }, [value]);
 
   const previousInitialValue = usePrevious(initialValue);
   React.useEffect(() => {

package/src/components/Swiper/Swiper.js

@@ -1,16 +1,12 @@
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
 import React from "react";
 import { View } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
-const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor = "red", nextTitleColor = "blue", dotsTouchable = true, dotColor, dotActiveColor, children, style, }) => (React.createElement(View, { style: style },
+const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", dotsTouchable = true, children, style, }) => (React.createElement(View, { style: style },
     React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
             prevTitle,
             nextTitle,
-            prevTitleStyle: { color: prevTitleColor },
-            nextTitleStyle: { color: nextTitleColor },
             dotsTouchable,
-            dotActiveStyle: { backgroundColor: dotActiveColor },
-            dotProps: { badgeStyle: { backgroundColor: dotColor } },
         } }, children)));
 export default Swiper;
 export const SEED_DATA = {
@@ -51,20 +47,6 @@ export const SEED_DATA = {
             label: "Next Title",
             defaultValue: "",
         }),
-        prevTitleColor: createColorProp({
-            label: "Previous Title Color",
-        }),
-        nextTitleColor: createColorProp({
-            label: "Next Title Color",
-        }),
-        dotColor: createColorProp({
-            label: "Dot Color",
-            defaultValue: "#86939e",
-        }),
-        dotActiveColor: createColorProp({
-            label: "Dot Active Color",
-            defaultValue: "#2089dc",
-        }),
         dotsTouchable: createBoolProp({
             group: GROUPS.basic,
             label: "Dots Touchable",

package/src/components/Swiper/Swiper.tsx

@@ -1,7 +1,6 @@
 import {
   COMPONENT_TYPES,
   createBoolProp,
-  createColorProp,
   createNumberProp,
   createTextProp,
   GROUPS,
@@ -17,11 +16,7 @@ export interface SwiperProps {
   timeout?: number;
   prevTitle?: string;
   nextTitle?: string;
-  prevTitleColor: string;
-  nextTitleColor: string;
   dotsTouchable?: boolean;
-  dotColor?: string;
-  dotActiveColor?: string;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
@@ -33,11 +28,7 @@ const Swiper = ({
   from = 0,
   prevTitle = "",
   nextTitle = "",
-  prevTitleColor = "red",
-  nextTitleColor = "blue",
   dotsTouchable = true,
-  dotColor,
-  dotActiveColor,
   children,
   style,
 }: SwiperProps) => (
@@ -50,11 +41,7 @@ const Swiper = ({
       controlsProps={{
         prevTitle,
         nextTitle,
-        prevTitleStyle: { color: prevTitleColor },
-        nextTitleStyle: { color: nextTitleColor },
         dotsTouchable,
-        dotActiveStyle: { backgroundColor: dotActiveColor },
-        dotProps: { badgeStyle: { backgroundColor: dotColor } },
       }}
     >
       {children}
@@ -102,20 +89,6 @@ export const SEED_DATA = {
       label: "Next Title",
       defaultValue: "",
     }),
-    prevTitleColor: createColorProp({
-      label: "Previous Title Color",
-    }),
-    nextTitleColor: createColorProp({
-      label: "Next Title Color",
-    }),
-    dotColor: createColorProp({
-      label: "Dot Color",
-      defaultValue: "#86939e",
-    }),
-    dotActiveColor: createColorProp({
-      label: "Dot Active Color",
-      defaultValue: "#2089dc",
-    }),
     dotsTouchable: createBoolProp({
       group: GROUPS.basic,
       label: "Dots Touchable",

package/src/components/Switch.js

@@ -10,6 +10,9 @@ function Switch({ value, initialValue, defaultValue, disabled, onValueChange, ac
     const activeThumbThemeColor = activeThumbColor || "#FFF";
     const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
     const [checked, setChecked] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        setChecked(value);
+    }, [value]);
     React.useEffect(() => {
         if (value != null && value !== checked) {
             setChecked(value);

package/src/components/Switch.tsx

@@ -45,6 +45,11 @@ function Switch({
   const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
 
   const [checked, setChecked] = React.useState(value || defaultValue);
+
+  React.useEffect(() => {
+    setChecked(value);
+  }, [value]);
+
   React.useEffect(() => {
     if (value != null && value !== checked) {
       setChecked(value);