@hoddy-ui/core 2.5.36 → 2.5.38

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.61",
+  "version": "2.0.66",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "2.5.36",
+  "version": "2.5.38",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Divider.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { View } from "react-native";
 import { ScaledSheet, ms } from "react-native-size-matters";
 import { useColors } from "../hooks";

package/src/Components/Popup.tsx

@@ -1,4 +1,5 @@
 import {
+  Dimensions,
   Keyboard,
   KeyboardAvoidingView,
   Modal,
@@ -134,7 +135,7 @@ export const Popup: React.FC<PopupProps> = ({
       marginBottom: Platform.OS === "android" && keyboardVisible ? bottom : 0,
     },
     container: {
-      paddingBottom: sheet && !bare ? bottom + ms(10) : undefined,
+      paddingBottom: sheet && !bare ? bottom + ms(0) : undefined,
       backgroundColor: theme === "dark" ? "#111" : colors.white[1],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
@@ -145,7 +146,12 @@ export const Popup: React.FC<PopupProps> = ({
       ...style,
     },
     content: {
+      maxHeight:
+        sheet && !bare
+          ? Dimensions.get("screen").height * 0.9 - bottom - ms(60)
+          : undefined,
       paddingHorizontal: bare ? undefined : "15@ms",
+      // backgroundColor : "#f94",
     },
     title: {
       flexDirection: "row",
@@ -177,6 +183,7 @@ export const Popup: React.FC<PopupProps> = ({
       statusBarTranslucent
       visible={modalOpen}
       onRequestClose={closeAction}
+      navigationBarTranslucent
     >
       <UIThemeProvider>
         <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />

package/src/Components/SelectMenu.tsx

@@ -98,27 +98,33 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
       disableAutoKeyboardManagement
     >
       <View style={styles.content}>
-        <View style={styles.header}>
-          {helperText && (
-            <Typography variant="body2" color="textSecondary" gutterBottom={5}>
-              {helperText}
-            </Typography>
-          )}
-          {searchEnabled && (
-            <TextField
-              label={searchPlaceholder}
-              value={search}
-              type="search"
-              onChangeText={setSearch}
-              variant="outlined"
-            />
-          )}
-        </View>
         <FlatList
           removeClippedSubviews
           keyExtractor={(item) => item.value}
           bounces={false}
           renderItem={renderItem}
+          ListHeaderComponent={
+            <View style={styles.header}>
+              {helperText && (
+                <Typography
+                  variant="body2"
+                  color="textSecondary"
+                  gutterBottom={5}
+                >
+                  {helperText}
+                </Typography>
+              )}
+              {searchEnabled && (
+                <TextField
+                  label={searchPlaceholder}
+                  value={search}
+                  type="search"
+                  onChangeText={setSearch}
+                  variant="outlined"
+                />
+              )}
+            </View>
+          }
           data={options
             .filter((item) =>
               search.length > 1

package/src/Components/StarRating.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import * as Haptics from "expo-haptics";
-import { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import {
   ActivityIndicator,
   TextInput,
@@ -14,39 +14,11 @@ import Button from "./Button";
 import { Popup } from "./Popup";
 import Typography from "./Typography";
 
-export const RatingStars: FC<RatingStarsProps> = ({
-  rating = 0,
-  size = 16,
-}) => {
-  const colors = useColors();
-
-  const styles = ScaledSheet.create({
-    root: {
-      flexDirection: "row",
-      alignItems: "center",
-    },
-  });
-  return (
-    <View style={styles.root}>
-      {[...Array(Math.floor(rating))].map((_, index) => (
-        <Ionicons key={index} name="star" size={size} color="#FFD700" />
-      ))}
-      {[...Array(5 - Math.floor(rating))].map((_, index) => (
-        <Ionicons
-          key={index}
-          name="star"
-          size={size}
-          color={colors.textSecondary.light}
-        />
-      ))}
-    </View>
-  );
-};
-
 export const RatingInput: FC<RatingInputProps> = ({
   onSubmit: _onSubmit,
   rating = 0,
   size = 16,
+  color = "primary",
 }) => {
   const [showReviewsModal, setShowReviewsModal] = useState(false);
   const [rate, setRate] = useState(0);
@@ -107,7 +79,7 @@ export const RatingInput: FC<RatingInputProps> = ({
                 style={{ marginLeft: 10 }}
                 name={index < rate ? "star" : "star-outline"}
                 size={size}
-                color={colors.primary.light}
+                color={colors[color as keyof typeof colors]?.main || color}
               />
             </TouchableOpacity>
           ))
@@ -144,6 +116,7 @@ export const RatingInput: FC<RatingInputProps> = ({
             value={review}
             onChangeText={(text) => setReview(text)}
             placeholder="Type review here.."
+            verticalAlign="top"
           />
         </View>
         <Button
@@ -159,3 +132,37 @@ export const RatingInput: FC<RatingInputProps> = ({
     </>
   );
 };
+
+export const RatingStars: FC<RatingStarsProps> = ({
+  rating = 0,
+  size = 16,
+  color = "#FFD700",
+}) => {
+  const colors = useColors();
+  const styles = ScaledSheet.create({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+  });
+  return (
+    <View style={styles.root}>
+      {[...Array(Math.floor(rating))].map((_, index) => (
+        <Ionicons
+          key={index}
+          name="star"
+          size={size}
+          color={colors[color as keyof typeof colors]?.main || color}
+        />
+      ))}
+      {[...Array(5 - Math.floor(rating))].map((_, index) => (
+        <Ionicons
+          key={index}
+          name="star"
+          size={size}
+          color={colors.textSecondary.light}
+        />
+      ))}
+    </View>
+  );
+};

package/src/Components/TextField.tsx

@@ -1,6 +1,12 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import React, { useRef, useState } from "react";
-import { Animated, TextInput, TouchableOpacity, View } from "react-native";
+import {
+  Animated,
+  Keyboard,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import {
   ScaledSheet,
   moderateScale,
@@ -316,7 +322,14 @@ export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
     );
 
     const setFocused = (value: boolean) => {
-      _setFocused(value);
+      if (options && value) {
+        Keyboard.dismiss();
+        setTimeout(() => {
+          _setFocused(value);
+        }, 100);
+      } else {
+        _setFocused(value);
+      }
     };
 
     const styles: any = ScaledSheet.create({

package/src/theme/index.tsx

@@ -2,7 +2,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as NavigationBar from "expo-navigation-bar";
 import * as SystemUI from "expo-system-ui";
 import React, { createContext, useEffect, useReducer } from "react";
-import { Platform, useColorScheme } from "react-native";
+import { Appearance, Platform, useColorScheme } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import FlashMessage from "../Components/FlashMessage";
 import { getConfig } from "../config/KeyManager";
@@ -43,6 +43,8 @@ const ConfigureSystemUI = () => {
 
   useEffect(() => {
     const config = getConfig();
+    Appearance.setColorScheme(theme);
+
     if (colors) {
       SystemUI.setBackgroundColorAsync(colors.white[1]);
       if (Platform.OS === "android") {

package/src/types.ts

@@ -311,6 +311,7 @@ export interface OTPInputProps {
 export interface RatingStarsProps {
   rating: number;
   size: number;
+  color?: colorTypes | (string & {});
 }
 
 export interface RatingInputProps {
@@ -318,6 +319,7 @@ export interface RatingInputProps {
   noReview?: boolean;
   size?: number;
   onSubmit?: (data: { rating: number; review: string }) => Promise<void>;
+  color?: colorTypes | (string & {});
 }
 
 export interface DividerProps {