The label was line break
dunglaclary opened this issue · 2 comments
Bug
Environment info
| Library | Version |
|---|---|
| @gorhom/animated-tabbar | 2.1.0 |
| react-native | 0.63.3 |
| react-native-reanimated | 1.13.2 |
| react-native-gesture-handler | 1.8.0 |
| react-native-svg | 12.1.0 |
Steps To Reproduce
- Create 5 tabs with label
Describe what you expected to happen:
- The label in one line
Reproducible sample code
const tabs = { Home: { icon: { component: Svgs.Home, color: 'rgba(255,255,255,1)', }, ripple: { color: '#5B37B7', }, }, Category: { labelStyle: { color: '#ffffff', }, icon: { component: Svgs.Category, color: 'rgba(255,255,255,1)', }, // background: { // activeColor: '#ff9800', // inactiveColor: 'rgba(207,235,239,0)', // }, ripple: { color: '#C9379D', }, }, Search: { labelStyle: { color: '#ffffff', }, icon: { component: Svgs.Search, color: 'rgba(255,255,255,1)', }, // background: { // activeColor: '#ff9800', // inactiveColor: 'rgba(207,235,239,0)', // }, ripple: { color: '#202E2E', }, }, Payment: { labelStyle: { color: '#ffffff', }, icon: { component: Svgs.Payment, color: 'rgba(255,255,255,1)', }, // background: { // activeColor: '#ff9800', // inactiveColor: 'rgba(207,235,239,0)', // }, ripple: { color: '#E6A919', }, }, Profile: { labelStyle: { color: '#ffffff', }, icon: { component: Svgs.Profile, color: 'rgba(255,255,255,1)', }, ripple: { color: '#1194AA', }, }, };
<Tab.Navigator tabBarOptions={tabBarOptions} tabBar={(props) => ( <AnimatedTabBar preset="material" animation="iconWithLabel" iconSize={24} tabs={tabs} duration={500} {...props} /> )} > <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Category" component={Search} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Payment" component={Payment} options={{ tabBarBadge: 3 }} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator>
same problem here
how to fix this?