Add `ScrollViewProps` or `ScrollViewStyle` to Tab component props
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 48/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react-native, typescript
- Domain
- mobile
Research direction
Start at the Tab component and its props definition, then trace how the tab items are rendered in the scroll view. Confirm that the requested scroll-view customization can be passed through, and verify the example behavior for contentContainerStyle before considering the issue done.
Written by the indexing model from the issue text.
Description
Is your feature request related to a problem? Please Describe.
Add ScrollViewProps or ScrollViewStyle to Tab component props. specially style is really important, I wanted to add contentContainerStyle for the scrollView but it was not possible
Describe the solution you'd like
import React from "react";
import { Tab, Text, TabView } from "@rneui/themed";
export default () => {
const [index, setIndex] = React.useState(0);
return (
<>
<Tab
value={index}
onChange={(e) => setIndex(e)}
scrollViewProps={{ // << Here our new props
contentContainerStyle: {
paddingHorizontal: 12,
},
}}
indicatorStyle={{
backgroundColor: "white",
height: 3,
}}
variant="primary"
>
<Tab.Item
title="Recent"
titleStyle={{ fontSize: 12 }}
icon={{ name: "timer", type: "ionicon", color: "white" }}
/>
<Tab.Item
title="favorite"
titleStyle={{ fontSize: 12 }}
icon={{ name: "heart", type: "ionicon", color: "white" }}
/>
<Tab.Item
title="cart"
titleStyle={{ fontSize: 12 }}
icon={{ name: "cart", type: "ionicon", color: "white" }}
/>
</Tab>
<TabView value={index} onChange={setIndex} animationType="spring">
<TabView.Item style={{ backgroundColor: "red", width: "100%" }}>
<Text h1>Recent</Text>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "blue", width: "100%" }}>
<Text h1>Favorite</Text>
</TabView.Item>
<TabView.Item style={{ backgroundColor: "green", width: "100%" }}>
<Text h1>Cart</Text>
</TabView.Item>
</TabView>
</>
);
};
- Dominant language
- MDX
- Stars
- 25.9k
- Forks
- 4.7k
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-native-elements/react-native-elements
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
react-native-elements/react-native-elements#4035 · 1 comment ·
-
Needs Triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
react-native-elements/react-native-elements#3963 · 2 comments · 2 reactions ·
-
component: Button
react-native-elements/react-native-elements#4032 · 1 assignee ·
-
TS Bug - @rneui/base@5.0.0 — Undeclared type dependency causes IconProps to lose color/name/size Opencomponent: Icon
react-native-elements/react-native-elements#4027 · 2 comments · 4 reactions · 1 assignee ·
-
📞 Needs Response from Author
react-native-elements/react-native-elements#4022 · 9 comments · 2 reactions · 1 assignee ·
All issues in react-native-elements/react-native-elements
Similar issues
-
tvOS
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Good First Issue
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
ankidroid/Anki-Android#21942 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
libre-tube/LibreTube#8781 · 1 comment ·
-
enhancement remote
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
skiptools/skip-fuse-ui#147 ·