Add unstableLabelStyle & fix switch statement comparison method

README.md

@@ -181,24 +181,25 @@ const styles = StyleSheet.create({
 
 ### Dialog.Input props
 
-| Name         | Type   | Default   | Description                                 |
-| ------------ | ------ | --------- | ------------------------------------------- |
-| label        | string | undefined | The input floating label                    |
-| wrapperStyle | any    | undefined | The style applied to the input wrapper View |
-| textInputRef | ref    | undefined | Ref to the input                            |
+| Name               | Type   | Default   | Description                                                             |
+| ------------------ | ------ | --------- | ----------------------------------------------------------------------- |
+| label              | string | undefined | The input floating label                                                |
+| wrapperStyle       | any    | undefined | The style applied to the input wrapper View                             |
+| textInputRef       | ref    | undefined | Ref to the input                                                        |
+| unstableLabelStyle | any    | undefined | Likely to be removed in a future version. See issue #141 for discussion |
 
 `Dialog.Input` also accepts all the React-Native's `TextInput` component props.
 
 ### Dialog.CodeInput props
 
-| Name                        | Type   | Default   | Description                                                  |
-| --------------------------- | ------ | --------- | ------------------------------------------------------------ |
-| wrapperStyle                | any    | undefined | The style applied to the input wrapper View                  |
-| digitContainerStyle         | any    | undefined | The style applied to the digit container View                |
-| digitContainerFocusedStyle  | any    | undefined | The style applied to the digit container View when in focus  |
-| digitStyle                  | any    | undefined | The style applied to the digit text                          |
-| codeLength                  | number | 4         | The total number of digits                                   |
-| onCodeChange                | func   | undefined | Called when the input changed                                |
+| Name                       | Type   | Default   | Description                                                 |
+| -------------------------- | ------ | --------- | ----------------------------------------------------------- |
+| wrapperStyle               | any    | undefined | The style applied to the input wrapper View                 |
+| digitContainerStyle        | any    | undefined | The style applied to the digit container View               |
+| digitContainerFocusedStyle | any    | undefined | The style applied to the digit container View when in focus |
+| digitStyle                 | any    | undefined | The style applied to the digit text                         |
+| codeLength                 | number | 4         | The total number of digits                                  |
+| onCodeChange               | func   | undefined | Called when the input changed                               |
 
 `Dialog.CodeInput` also accepts all the React-Native's `TextInput` component props.
 
@@ -212,9 +213,10 @@ const styles = StyleSheet.create({
 
 ### Dialog.Switch props
 
-| Name  | Type   | Default   | Description                 |
-| ----- | ------ | --------- | --------------------------- |
-| label | string | undefined | The switch description text |
+| Name               | Type   | Default   | Description                                                             |
+| ------------------ | ------ | --------- | ----------------------------------------------------------------------- |
+| label              | string | undefined | The switch description text                                             |
+| unstableLabelStyle | any    | undefined | Likely to be removed in a future version. See issue #141 for discussion |
 
 `Dialog.Switch` also accepts all the React-Native's `Switch` component props.
 

src/CodeInput.tsx

@@ -15,6 +15,8 @@ import {
 import useTheme from "./useTheme";
 
 export interface DialogCodeInputProps extends TextInputProps {
+  autoFocus?: boolean; // TODO: Why do we need to add this to fix TS2339? It should already be included in TextInputProps.
+  style?: StyleProp<ViewStyle>;
   wrapperStyle?: StyleProp<ViewStyle>;
   digitContainerStyle?: StyleProp<ViewStyle>;
   digitContainerFocusedStyle?: StyleProp<ViewStyle>;
@@ -25,6 +27,7 @@ export interface DialogCodeInputProps extends TextInputProps {
 
 const DialogCodeInput: React.FC<DialogCodeInputProps> = (props) => {
   const {
+    autoFocus = false,
     style,
     wrapperStyle,
     digitContainerStyle,
@@ -36,9 +39,7 @@ const DialogCodeInput: React.FC<DialogCodeInputProps> = (props) => {
   } = props;
   const { styles } = useTheme(buildStyles);
   const codeRef = React.useRef<TextInput>(null);
-  const [containerIsFocused, setContainerIsFocused] = React.useState(
-    props.autoFocus || false
-  );
+  const [containerIsFocused, setContainerIsFocused] = React.useState(autoFocus);
   const [code, setCode] = React.useState("");
   const codeDigitsArray = new Array(codeLength).fill(0);
   const emptyInputChar = " ";

src/Container.tsx

@@ -60,14 +60,16 @@ const DialogContainer: React.FC<DialogContainerProps> = (props) => {
   const { styles } = useTheme(buildStyles);
   React.Children.forEach(children, (child) => {
     if (typeof child === "object" && child !== null && "type" in child) {
-      switch (child.type) {
-        case DialogTitle:
+      // @ts-expect-error: "Property 'displayName' does not exist on type 'string"
+      const displayName = child.type?.displayName || child.type?.name;
+      switch (displayName) {
+        case DialogTitle.displayName:
           titleChildrens.push(child as TitleElement);
           return;
-        case DialogDescription:
+        case DialogDescription.displayName:
           descriptionChildrens.push(child as DescriptionElement);
           return;
-        case DialogButton:
+        case DialogButton.displayName:
           if (Platform.OS === "ios" && buttonChildrens.length > 0) {
             buttonChildrens.push(
               <View

src/Input.tsx

@@ -8,6 +8,7 @@ import {
   View,
   PlatformColor,
   TextInputProps,
+  TextStyle,
   ViewStyle,
   StyleProp,
 } from "react-native";
@@ -17,6 +18,7 @@ export interface DialogInputProps extends TextInputProps {
   label?: ReactNode;
   wrapperStyle?: StyleProp<ViewStyle>;
   textInputRef?: LegacyRef<TextInput>;
+  unstableLabelStyle?: StyleProp<TextStyle>;
 }
 
 const DialogInput: React.FC<DialogInputProps> = (props) => {
@@ -27,6 +29,7 @@ const DialogInput: React.FC<DialogInputProps> = (props) => {
     textInputRef,
     multiline,
     numberOfLines,
+    unstableLabelStyle,
     ...nodeProps
   } = props;
   const lines = (multiline && numberOfLines) || 1;
@@ -35,7 +38,7 @@ const DialogInput: React.FC<DialogInputProps> = (props) => {
   const { styles, isDark } = useTheme(buildStyles);
   return (
     <View style={[styles.textInputWrapper, wrapperStyle]}>
-      {label && <Text style={styles.label}>{label}</Text>}
+      {label && <Text style={[styles.label, unstableLabelStyle]}>{label}</Text>}
       <TextInput
         ref={textInputRef}
         placeholderTextColor={

src/Switch.tsx

@@ -7,20 +7,23 @@ import {
   Text,
   View,
   PlatformColor,
+  StyleProp,
+  TextStyle,
   SwitchProps,
 } from "react-native";
 import useTheme, { StyleBuilder } from "./useTheme";
 
 export interface DialogSwitchProps extends SwitchProps {
   label?: ReactNode;
+  unstableLabelStyle?: StyleProp<TextStyle>;
 }
 
 const DialogSwitch: React.FC<DialogSwitchProps> = (props) => {
-  const { label, ...nodeProps } = props;
+  const { label, unstableLabelStyle, ...nodeProps } = props;
   const { styles } = useTheme(buildStyles);
   return (
     <View style={styles.switchWrapper}>
-      <Text style={styles.label}>{label}</Text>
+      <Text style={[styles.label, unstableLabelStyle]}>{label}</Text>
       <Switch {...nodeProps} />
     </View>
   );