0
# Tab Bar Indicator
1
2
The TabBarIndicator component is an animated indicator that shows the active tab position. It automatically moves and resizes based on the current tab selection and supports both fixed and dynamic width configurations.
3
4
## Capabilities
5
6
### TabBarIndicator Component
7
8
Animated indicator component that highlights the currently active tab with smooth transitions.
9
10
```typescript { .api }
11
/**
12
* Animated indicator component for highlighting active tab
13
* @param props - TabBarIndicator configuration and styling options
14
* @returns JSX element containing the animated indicator
15
*/
16
function TabBarIndicator<T extends Route>(props: Props<T>): JSX.Element;
17
18
interface Props<T extends Route> extends SceneRendererProps {
19
/** Required navigation state */
20
navigationState: NavigationState<T>;
21
/** Indicator width configuration - 'auto' for dynamic sizing or fixed values */
22
width: 'auto' | `${number}%` | number;
23
/** Function to get tab width by index for positioning calculations */
24
getTabWidth: GetTabWidth;
25
/** Text direction for RTL support */
26
direction: LocaleDirection;
27
/** Custom indicator styling */
28
style?: StyleProp<ViewStyle>;
29
/** Space between tabs for positioning calculations */
30
gap?: number;
31
/** Child components to render inside indicator */
32
children?: React.ReactNode;
33
}
34
35
/**
36
* Function type for getting tab width by index
37
*/
38
type GetTabWidth = (index: number) => number;
39
```
40
41
**Usage Examples:**
42
43
```typescript
44
import React from 'react';
45
import { TabBar, TabBarIndicator } from 'react-native-tab-view';
46
47
// Custom indicator with fixed width
48
const renderTabBar = (props) => (
49
<TabBar
50
{...props}
51
renderIndicator={(indicatorProps) => (
52
<TabBarIndicator
53
{...indicatorProps}
54
width={100}
55
style={{
56
backgroundColor: '#ff4081',
57
height: 4,
58
borderRadius: 2,
59
}}
60
/>
61
)}
62
/>
63
);
64
65
// Dynamic width indicator (auto-sizing)
66
const renderTabBarWithAutoIndicator = (props) => (
67
<TabBar
68
{...props}
69
renderIndicator={(indicatorProps) => (
70
<TabBarIndicator
71
{...indicatorProps}
72
width="auto"
73
style={{
74
backgroundColor: '#2196f3',
75
height: 3,
76
bottom: 2,
77
}}
78
/>
79
)}
80
/>
81
);
82
83
// Percentage-based width indicator
84
const renderTabBarWithPercentIndicator = (props) => (
85
<TabBar
86
{...props}
87
renderIndicator={(indicatorProps) => (
88
<TabBarIndicator
89
{...indicatorProps}
90
width="80%"
91
style={{
92
backgroundColor: '#4caf50',
93
height: 2,
94
borderTopLeftRadius: 1,
95
borderTopRightRadius: 1,
96
}}
97
/>
98
)}
99
/>
100
);
101
102
// Custom indicator with child content
103
const renderTabBarWithCustomIndicator = (props) => (
104
<TabBar
105
{...props}
106
renderIndicator={(indicatorProps) => (
107
<TabBarIndicator
108
{...indicatorProps}
109
width="auto"
110
style={{
111
backgroundColor: 'transparent',
112
height: 6,
113
}}
114
>
115
<View
116
style={{
117
flex: 1,
118
backgroundColor: '#ffeb3b',
119
borderRadius: 3,
120
margin: 1,
121
}}
122
/>
123
</TabBarIndicator>
124
)}
125
/>
126
);
127
```
128
129
### Animation and Positioning
130
131
The indicator automatically animates between tab positions using React Native's Animated API.
132
133
```typescript { .api }
134
/**
135
* Animation configuration for indicator movement
136
*/
137
interface AnimationConfig {
138
/** Whether to use native driver for animations */
139
useNativeDriver: boolean;
140
/** Animation easing function */
141
easing: Animated.EasingFunction;
142
/** Animation duration in milliseconds */
143
duration: number;
144
}
145
```
146
147
### Width Configuration Options
148
149
The indicator supports three width modes for different use cases:
150
151
**Fixed Width (`number`):**
152
- Indicator maintains constant width regardless of tab size
153
- Useful for consistent visual appearance across all tabs
154
155
**Percentage Width (`"${number}%"`):**
156
- Indicator width is percentage of individual tab width
157
- Scales proportionally with each tab
158
159
**Auto Width (`"auto"`):**
160
- Indicator dynamically sizes to match each tab's content width
161
- Provides the most natural appearance but requires tab width measurements
162
163
### RTL Support
164
165
The indicator automatically adapts to right-to-left text direction.
166
167
```typescript { .api }
168
/**
169
* Text direction enumeration
170
*/
171
type LocaleDirection = 'ltr' | 'rtl';
172
```
173
174
**RTL Examples:**
175
176
```typescript
177
// Automatic RTL detection
178
import { I18nManager } from 'react-native';
179
180
const direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
181
182
const renderTabBar = (props) => (
183
<TabBar
184
{...props}
185
direction={direction}
186
renderIndicator={(indicatorProps) => (
187
<TabBarIndicator
188
{...indicatorProps}
189
direction={direction}
190
/>
191
)}
192
/>
193
);
194
```
195
196
### Performance Optimization
197
198
The indicator uses optimized animations and memoization for smooth performance.
199
200
```typescript { .api }
201
/**
202
* Performance optimization features
203
*/
204
interface PerformanceFeatures {
205
/** Uses React.memo for component optimization */
206
memoized: boolean;
207
/** Native driver animations for better performance */
208
nativeDriver: boolean;
209
/** Lazy opacity animations for auto-width indicators */
210
lazyOpacity: boolean;
211
}
212
```
213
214
### Platform-Specific Behavior
215
216
The indicator handles platform differences automatically:
217
218
**Web Platform:**
219
- Uses different transform approach for better browser compatibility
220
- Fallback positioning for browsers that don't support scaleX properly
221
222
**Native Platforms:**
223
- Utilizes native animation drivers for optimal performance
224
- Hardware acceleration for smooth transitions
225
226
### Styling Customization
227
228
Complete control over indicator appearance through styling props.
229
230
```typescript { .api }
231
/**
232
* Default indicator styles that can be overridden
233
*/
234
interface DefaultStyles {
235
/** Default background color */
236
backgroundColor: '#ffeb3b';
237
/** Default position */
238
position: 'absolute';
239
/** Default placement */
240
start: 0;
241
bottom: 0;
242
end: 0;
243
/** Default height */
244
height: 2;
245
}
246
```
247
248
**Advanced Styling Examples:**
249
250
```typescript
251
// Gradient indicator
252
const GradientIndicator = (props) => (
253
<TabBarIndicator
254
{...props}
255
style={{ backgroundColor: 'transparent', height: 4 }}
256
>
257
<LinearGradient
258
colors={['#ff4081', '#3f51b5']}
259
start={{ x: 0, y: 0 }}
260
end={{ x: 1, y: 0 }}
261
style={{ flex: 1, borderRadius: 2 }}
262
/>
263
</TabBarIndicator>
264
);
265
266
// Animated dot indicator
267
const DotIndicator = (props) => (
268
<TabBarIndicator
269
{...props}
270
width={8}
271
style={{
272
backgroundColor: '#2196f3',
273
height: 8,
274
borderRadius: 4,
275
bottom: -4,
276
}}
277
/>
278
);
279
280
// Multi-layer indicator
281
const MultiLayerIndicator = (props) => (
282
<TabBarIndicator
283
{...props}
284
style={{ backgroundColor: 'transparent', height: 6 }}
285
>
286
<View style={{ flex: 1, backgroundColor: '#e3f2fd', borderRadius: 3 }}>
287
<View
288
style={{
289
height: 2,
290
backgroundColor: '#1976d2',
291
borderRadius: 1,
292
margin: 2,
293
}}
294
/>
295
</View>
296
</TabBarIndicator>
297
);
298
```