I want to acomplish this : https://i.stack.imgur.com/NNrP3.png ,
Current situation is : https://i.stack.imgur.com/s1rI5.png ,
I am unable to create that grayish line over every tab, and my actual orange indicator will go over that gray line when im moving thru my navigator.
Thanks for all the help.
At the end i figure out how to do it and here is an example if anyone have same problem :
tabBarOptions={{
activeTintColor: getThemeColor("white", app.appTheme),
style: {
backgroundColor: getThemeColor("background"),
elevation: 0,
borderBottomWidth:_generalSize(1),
borderBottomColor: getThemeColor('textInputPlaceholder'),
},
I just put inside tabBarOptions style: and then i put normal border botom.
Related
I've a Text nested in a View, I would like that the Text autoresize itself getting only the effective required space, but this seems to be impossible...
This is the link to the snack I've done:
https://snack.expo.dev/#david92/flexshrink-text
I would expect the green block to end immediately after the words "very" and "word"...
How can I change the current behavior?
This is a screenshot of the current result...
Change your code in your container style to this.
container: {
alignSelf: 'flex-start',
backgroundColor: "red",
},
Hi i want my bottom nav bar to be like this is there any other way to achieve this?
these is the photo i want to achieve.
[1]: https://i.stack.imgur.com/4V0bu.jpg
and this is my TabBarStyle
tabBarStyle: {
backgroundColor: "#000080",
height:70,
borderTopRightRadius:12,
borderTopLeftRadius:12,
},
im using drop down menu https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu
by default it is set to be transparent last items in the menu, i was wondering if i can disable it since im only using 2 items in the menu and it makes my second item to be transparent and hardly be seen.
when i click my drop down menu and you can see the 2 items there (second is barely seen)
I'm afraid this cannot be disabled by a simple bool prop or similar. This option will likely be something that is added in the future. For now, i would suggest you try to edit the theme for the UI toolkit.
If you're using the Shoutem platform, you could create a custom theme that you could use in your app ( as a new custom extension ). If not, you could define your default UI toolkit theme manually, where you would "disable" this gradient.
In both cases, you would need to override the DropDownModal component theme styles.
This is the default theme style that is passed to the component.
'shoutem.ui.DropDownModal': {
modal: {
'shoutem.ui.Button.close': {
'shoutem.ui.Icon': {
color: changeColorAlpha(variables.subtitle.color, 0.5),
fontSize: 24,
},
position: 'absolute',
bottom: 25,
left: 0,
right: 0,
},
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 20,
backgroundColor: changeColorAlpha(variables.backgroundColor, 0.97),
},
....
},
You could define a new theme for the toolkit that overrides this specific style property. So you could pass in something like
'shoutem.ui.DropDownModal': {
modal: {
backgroundColor: 'transparent',
},
},
We're using the backgroundColor property to style the overlay above the actual dropdown.
If you're not using the Shoutem platform, you can make use of getTheme, that is exported from UI toolkit to get the default theme. This will provide you with resolved style object, into which, you can merge your changes from above. Then, just set the new theme as the current one, by making use of #shoutem/theme;
import { Theme } from '#shoutem/theme';
Theme.setDefaultThemeStyle(myCustomTheme);
If you're using Shoutem platform, you could create the same override, by creating a new theme extension, that merges default styles from the Rubicon theme extension.
I'm using to React-Native. After searching everywhere, I still don't know how to make the Indicator line of bottom tab on top or in bottom. Is it possible or not ?
I already tried indicatorStyle but it doesn't work. Does anyone have an idea or suggestion ?
const MyTabNavi = createBottomTabNavigator(
{
...
},
{
tabBarOptions: {
....
indicatorStyle: {
paddingBottom: 300,
backgroundColor: '#46ff46',
height: 50,
}
}
}
The indicatorStyle exists only in TopTabNavigator. See docs below:
Top tabBarOptions:
https://reactnavigation.org/docs/material-top-tab-navigator#tabbaroptions
Bottom tabBarOptions:
https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaroptions
In the TopTabNavigator, the indicator line is displayed for default. Currently has a bug in React Navigation... When set the tabStyle backgroundColor, the indicator line disappears. See issue below:
https://github.com/react-navigation/react-navigation/issues/8012
I am trying desperately to change the color used to underline the selected tab in the NativeBase element Tab https://docs.nativebase.io/Components.html#tabs-def-headref . So fare I have been able to change the text color of the selected element to red but there seems to be no way of doing it for the underlings blue bar.
here is The Vue native template which can use every react native element.
<template>
<nb-container :style="{flex:1, backgroundColor: '#fff'}">
<header v-bind:title="title" ></header>
<nb-tabs>
<nb-tab :heading="heading1" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<actualitesVue v-bind:navigation= "navigation" > </actualitesVue>
</nb-tab>
<nb-tab heading="Dossiers" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<dossiersVue v-bind:navigation= "navigation" > </dossiersVue>
</nb-tab>
</nb-tabs>
</nb-container>
here is the prop
data: function () {
return {
heading1: "Actualités",
title : "INFOS",
tabStyle : {backgroundColor: "white"},
activeTabStyle : {backgroundColor: "white"},
textStyle : {color: "rgba(189,40,26,0.6)"},
activeTextStyle : {color : "rgba(189,40,26,1)", fontSize: 20 },
}
},
And the result is close to this. My point is about the blue line:
Simply you can change :
<Tabs tabBarUnderlineStyle={{ backgroundColor: "red" }}>
....
</Tabs>