Skip to content

Hotfix: Update tabs content to allow scroll view #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 9, 2025
Merged

Hotfix: Update tabs content to allow scroll view #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a03b10e
fix(tabs): update flex style to allow scroll view
theoribbi Sep 9, 2025
b3cc561
Merge pull request #105 from nativeui-org/fix/tabs-content-scroll-view
theoribbi Sep 9, 2025
7302aed
Merge branch 'master' into hotfix
theoribbi Sep 9, 2025
594b734
refactor(tabs): reorganize imports and improve component structure
theoribbi Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 95 additions & 95 deletions app/(site)/docs/components/tabs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,140 +13,140 @@ export default function TabsPage() {
"language": "tsx"
}
]}
componentCode={`import * as React from "react";
import { View, Text, Pressable, Platform } from "react-native";
import { cn } from "@/lib/utils";
componentCode={`import { cn } from "@/lib/utils";
import * as React from "react";
import { Platform, Pressable, Text, View } from "react-native";

interface TabsProps {
defaultValue?: string;
value?: string;
onValueChange?: (value: string) => void;
children: React.ReactNode;
className?: string;
defaultValue?: string;
value?: string;
onValueChange?: (value: string) => void;
children: React.ReactNode;
className?: string;
}

interface TabsListProps {
children: React.ReactNode;
className?: string;
children: React.ReactNode;
className?: string;
}

interface TabsTriggerProps {
value: string;
children: React.ReactNode;
className?: string;
value: string;
children: React.ReactNode;
className?: string;
}

interface TabsContentProps {
value: string;
children: React.ReactNode;
className?: string;
value: string;
children: React.ReactNode;
className?: string;
}

const TabsContext = React.createContext<{
value: string;
onValueChange: (value: string) => void;
value: string;
onValueChange: (value: string) => void;
}>({
value: "",
onValueChange: () => { },
value: "",
onValueChange: () => {},
});

const Tabs = React.forwardRef<View, TabsProps>(
({ defaultValue, value, onValueChange, children, className }, ref) => {
const [selectedValue, setSelectedValue] = React.useState(
value || defaultValue || ""
);
({ defaultValue, value, onValueChange, children, className }, ref) => {
const [selectedValue, setSelectedValue] = React.useState(
value || defaultValue || "",
);

const handleValueChange = React.useCallback(
(newValue: string) => {
setSelectedValue(newValue);
onValueChange?.(newValue);
},
[onValueChange]
);
const handleValueChange = React.useCallback(
(newValue: string) => {
setSelectedValue(newValue);
onValueChange?.(newValue);
},
[onValueChange],
);

return (
<TabsContext.Provider
value={{
value: selectedValue,
onValueChange: handleValueChange,
}}
>
<View ref={ref} className={cn("w-full", className)}>
{children}
</View>
</TabsContext.Provider>
);
}
return (
<TabsContext.Provider
value={{
value: selectedValue,
onValueChange: handleValueChange,
}}
>
<View ref={ref} className={cn("flex-1 w-full", className)}>
{children}
</View>
</TabsContext.Provider>
);
},
);

const TabsList = React.forwardRef<View, TabsListProps>(
({ children, className }, ref) => {
return (
<View
ref={ref}
className={cn(
"flex-row items-center justify-center rounded-xl bg-muted p-1",
Platform.OS === "ios" ? "h-12" : "h-14",
className
)}
>
{children}
</View>
);
}
({ children, className }, ref) => {
return (
<View
ref={ref}
className={cn(
"flex-row items-center justify-center rounded-xl bg-muted p-1",
Platform.OS === "ios" ? "h-12" : "h-14",
className,
)}
>
{children}
</View>
);
},
);

const TabsTrigger = React.forwardRef<View, TabsTriggerProps>(
({ value, children, className }, ref) => {
const { value: selectedValue, onValueChange } =
React.useContext(TabsContext);
const isSelected = selectedValue === value;
({ value, children, className }, ref) => {
const { value: selectedValue, onValueChange } =
React.useContext(TabsContext);
const isSelected = selectedValue === value;

return (
<Pressable
ref={ref}
onPress={() => onValueChange(value)}
className={cn(
"flex-1 items-center justify-center rounded-lg px-4 py-2",
Platform.OS === "ios" ? "h-10" : "h-12",
isSelected ? "bg-background" : "bg-transparent",
className
)}
>
<Text
className={cn(
"text-base font-medium",
isSelected ? "text-foreground" : "text-muted-foreground"
)}
>
{children}
</Text>
</Pressable>
);
}
return (
<Pressable
ref={ref}
onPress={() => onValueChange(value)}
className={cn(
"flex-1 items-center justify-center rounded-lg px-4 py-2",
Platform.OS === "ios" ? "h-10" : "h-12",
isSelected ? "bg-background" : "bg-transparent",
className,
)}
>
<Text
className={cn(
"text-base font-medium",
isSelected ? "text-foreground" : "text-muted-foreground",
)}
>
{children}
</Text>
</Pressable>
);
},
);

const TabsContent = React.forwardRef<View, TabsContentProps>(
({ value, children, className }, ref) => {
const { value: selectedValue } = React.useContext(TabsContext);
const isSelected = selectedValue === value;
({ value, children, className }, ref) => {
const { value: selectedValue } = React.useContext(TabsContext);
const isSelected = selectedValue === value;

if (!isSelected) return null;
if (!isSelected) return null;

return (
<View ref={ref} className={cn("mt-4", className)}>
{children}
</View>
);
}
return (
<View ref={ref} className={cn("flex-1 mt-4", className)}>
{children}
</View>
);
},
);

Tabs.displayName = "Tabs";
TabsList.displayName = "TabsList";
TabsTrigger.displayName = "TabsTrigger";
TabsContent.displayName = "TabsContent";

export { Tabs, TabsList, TabsTrigger, TabsContent };
export { Tabs, TabsContent, TabsList, TabsTrigger };
`}
previewCode={`import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import * as React from "react";
Expand Down
2 changes: 1 addition & 1 deletion public/r/tabs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"files": [
{
"path": "registry/tabs/tabs.tsx",
"content": "import * as React from \"react\";\nimport { View, Text, Pressable, Platform } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsProps {\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsListProps {\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsTriggerProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsContentProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nconst TabsContext = React.createContext<{\n value: string;\n onValueChange: (value: string) => void;\n}>({\n value: \"\",\n onValueChange: () => { },\n});\n\nconst Tabs = React.forwardRef<View, TabsProps>(\n ({ defaultValue, value, onValueChange, children, className }, ref) => {\n const [selectedValue, setSelectedValue] = React.useState(\n value || defaultValue || \"\"\n );\n\n const handleValueChange = React.useCallback(\n (newValue: string) => {\n setSelectedValue(newValue);\n onValueChange?.(newValue);\n },\n [onValueChange]\n );\n\n return (\n <TabsContext.Provider\n value={{\n value: selectedValue,\n onValueChange: handleValueChange,\n }}\n >\n <View ref={ref} className={cn(\"w-full\", className)}>\n {children}\n </View>\n </TabsContext.Provider>\n );\n }\n);\n\nconst TabsList = React.forwardRef<View, TabsListProps>(\n ({ children, className }, ref) => {\n return (\n <View\n ref={ref}\n className={cn(\n \"flex-row items-center justify-center rounded-xl bg-muted p-1\",\n Platform.OS === \"ios\" ? \"h-12\" : \"h-14\",\n className\n )}\n >\n {children}\n </View>\n );\n }\n);\n\nconst TabsTrigger = React.forwardRef<View, TabsTriggerProps>(\n ({ value, children, className }, ref) => {\n const { value: selectedValue, onValueChange } =\n React.useContext(TabsContext);\n const isSelected = selectedValue === value;\n\n return (\n <Pressable\n ref={ref}\n onPress={() => onValueChange(value)}\n className={cn(\n \"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n Platform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n isSelected ? \"bg-background\" : \"bg-transparent\",\n className\n )}\n >\n <Text\n className={cn(\n \"text-base font-medium\",\n isSelected ? \"text-foreground\" : \"text-muted-foreground\"\n )}\n >\n {children}\n </Text>\n </Pressable>\n );\n }\n);\n\nconst TabsContent = React.forwardRef<View, TabsContentProps>(\n ({ value, children, className }, ref) => {\n const { value: selectedValue } = React.useContext(TabsContext);\n const isSelected = selectedValue === value;\n\n if (!isSelected) return null;\n\n return (\n <View ref={ref} className={cn(\"mt-4\", className)}>\n {children}\n </View>\n );\n }\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
"content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Platform, Pressable, Text, View } from \"react-native\";\n\ninterface TabsProps {\n\tdefaultValue?: string;\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsListProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsTriggerProps {\n\tvalue: string;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsContentProps {\n\tvalue: string;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nconst TabsContext = React.createContext<{\n\tvalue: string;\n\tonValueChange: (value: string) => void;\n}>({\n\tvalue: \"\",\n\tonValueChange: () => {},\n});\n\nconst Tabs = React.forwardRef<View, TabsProps>(\n\t({ defaultValue, value, onValueChange, children, className }, ref) => {\n\t\tconst [selectedValue, setSelectedValue] = React.useState(\n\t\t\tvalue || defaultValue || \"\",\n\t\t);\n\n\t\tconst handleValueChange = React.useCallback(\n\t\t\t(newValue: string) => {\n\t\t\t\tsetSelectedValue(newValue);\n\t\t\t\tonValueChange?.(newValue);\n\t\t\t},\n\t\t\t[onValueChange],\n\t\t);\n\n\t\treturn (\n\t\t\t<TabsContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tvalue: selectedValue,\n\t\t\t\t\tonValueChange: handleValueChange,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<View ref={ref} className={cn(\"flex-1 w-full\", className)}>\n\t\t\t\t\t{children}\n\t\t\t\t</View>\n\t\t\t</TabsContext.Provider>\n\t\t);\n\t},\n);\n\nconst TabsList = React.forwardRef<View, TabsListProps>(\n\t({ children, className }, ref) => {\n\t\treturn (\n\t\t\t<View\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex-row items-center justify-center rounded-xl bg-muted p-1\",\n\t\t\t\t\tPlatform.OS === \"ios\" ? \"h-12\" : \"h-14\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</View>\n\t\t);\n\t},\n);\n\nconst TabsTrigger = React.forwardRef<View, TabsTriggerProps>(\n\t({ value, children, className }, ref) => {\n\t\tconst { value: selectedValue, onValueChange } =\n\t\t\tReact.useContext(TabsContext);\n\t\tconst isSelected = selectedValue === value;\n\n\t\treturn (\n\t\t\t<Pressable\n\t\t\t\tref={ref}\n\t\t\t\tonPress={() => onValueChange(value)}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n\t\t\t\t\tPlatform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n\t\t\t\t\tisSelected ? \"bg-background\" : \"bg-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Text\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"text-base font-medium\",\n\t\t\t\t\t\tisSelected ? \"text-foreground\" : \"text-muted-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Text>\n\t\t\t</Pressable>\n\t\t);\n\t},\n);\n\nconst TabsContent = React.forwardRef<View, TabsContentProps>(\n\t({ value, children, className }, ref) => {\n\t\tconst { value: selectedValue } = React.useContext(TabsContext);\n\t\tconst isSelected = selectedValue === value;\n\n\t\tif (!isSelected) return null;\n\n\t\treturn (\n\t\t\t<View ref={ref} className={cn(\"flex-1 mt-4\", className)}>\n\t\t\t\t{children}\n\t\t\t</View>\n\t\t);\n\t},\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n",
"type": "registry:ui"
}
],
Expand Down
Loading