want to add vertical line between tabs in createMeterialTopTabNavigator - javascript

Hy.
I am replicating an app. I am using createMeterialTopTabNavigator. The rest of functionality is working fine. I want to show a vertical line between tabs. but I have no idea where to get started. Please help me.
I want the tabs to show a similar line like the one in the image.
here is my code
import { Text, View} from 'react-native';
import Constants from 'expo-constants';
import {
createBottomTabNavigator,
createMaterialTopTabNavigator
} from "react-navigation-tabs";
import{createAppContainer,NavigationContainer} from "react-navigation";
import ArenaCashScreen from './Screens/ArenaCashScreen';
import ArenaPointsScreen from './Screens/ArenaPointsScreen';
import UnknownCashScreen from './Screens/UnknownCashScreen';
const MainTabs = createMaterialTopTabNavigator(
{
CurrentList: {
screen: ArenaCashScreen,
navigationOptions: {
title: 'Arena Cash (AC)',
},
},
OthersList: {
screen: ArenaPointsScreen,
navigationOptions: {
title: 'Arena Points (AP)',
},
},
thirdlistt: {
screen: UnknownCashScreen,
navigationOptions: {
title: 'Unknown Cash (UC)',
},
},
},
{
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'white',
indicatorStyle: {
backgroundColor: 'orange',
},
style: {
backgroundColor: 'black',
elevation:0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'black'
},
showLabel: true,
showIcon: false,
},
},
);
const AppContainer2 = createAppContainer(MainTabs);
export default AppContainer2;

You can do this by adding the css style to the tabs.
For this you just open the inspect by clicking F12 and find out the class used for the styling for showing the title and div containing these titles.
Once you find the class, add the border-left by applying the other required sytle like color and width as well as border style.

It can be achieved using tabBarItemStyle property. However, it will add the vertical line on each Tab-bar Item, but in my case vertical line with last item won't show, it works fine
<Tab.Navigator
screenOptions={{
tabBarItemStyle:{borderRightWidth:1,height:Height*0.08,borderRightColor:'red'},
}}
>
{/*Your Tab Screens*/}
</Tab.Navigator>

Related

MUI React - Override SvgIcon color don't work

I'm using MUI (version 5) on React.
I'm trying to override the icon color for the Error Alert using General StylesOverrides.
I managed to change the color on the Alert component, but I can't find the way to do it for the icon that is in the Alert
In my Overrides Theme this is my code:
const theme = createTheme({
components: {
MuiAlert: { // These changes are working
styleOverrides: {
standardError: {
backgroundColor: colors.error.light,
color: colors.error.dark,
border: '4px solid',
borderColor: colors.error.dark,
}
}
},
MuiSvgIcon: { // These changes are not working
styleOverrides: {
ErrorOutlineIcon: {
htmlColor:'#000000',
main:'#fff000'
}
}
}
},
})
This is the documentation on the MUI website https://mui.com/material-ui/api/svg-icon/ but I'm missing something.
Could you help me, please?
To change the icon color simply do
<Alert color="color.error" />
at place where icon is implemented

how to customize material ui tabs, tabs scroller

Here I am trying to customize this mui tabs, tab color, and tab bottom border color. I have tried to do so by using makestyles and so on but nothing is working.
my code is,
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
tab:{
"& .MuiButtonBase-root":{
marginLeft:"25px"
}
},
tabs:{
"& .MuiTabs-indicator":{
ml:"30px"
}
}
})
Besides, I also face issues with customizing mui classes. Though I use a solution that is sx props but I know that is not best practice.
const theme = createTheme({
components: {
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: 'orange',
height: 10,
},
},
},
}
})
You can style the selected tab styling with the property '&.MuiTab-root.Mui-selected' as for the border coloring for the current tab, you can use the prop TabIndicatorProps and add a styles property,i.e
export const StyledTab = styled((Tab))({
'&.MuiTab-root.Mui-selected': {
color: 'gold',
},
and
TabIndicatorProps={{
style: {
backgroundColor: '#f1db29'
}
}}

React-Native Tab Bar: Remove horizontal line (React Native UI Kitten + React Navigation)

Using the react-native-ui-kitten components BottomNavigation and BottomNavigationTab in my app running on iPhone (expo v2.21.2, react-native v0.57.1 ), there is a horizontal line on the top of the currently selected BottomNavigationTab which contains both the title and an icon.
From my app:
Test B tab is selected and has the unwanted horizontal line above the icon.
From the docs:
The BottomNavigation docs show that when both the title and icon are defined, there is no horizontal line on the selected tab. But this is not the case for me.
Question: How can the horizontal line be removed?
My Code:
import { View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, Avatar } from 'react-native-ui-kitten';
class BottomNavigationShowcase extends React.Component {
...
render () {
return (
<BottomNavigation
selectedIndex={this.state.selectedIndex}
onSelect={this.onTabSelect}
>
<BottomNavigationTab title='Test A' icon={this.renderIconA} />
<BottomNavigationTab title='Test B' icon={this.renderIconB} />
<BottomNavigationTab title='Test C' icon={this.renderIconC} />
<BottomNavigationTab title='Test D' icon={this.renderIconD} />
</BottomNavigation>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
TestA: TestAScreen,
TestB: TestBScreen,
TestC: TestCScreen,
TestD: TestDScreen
}, {
initialRouteName: 'TestA',
tabBarComponent: BottomNavigationShowcase
}
)
const RootNavigator = createSwitchNavigator({
Main: TabNavigator,
}, {
initialRoute: "Main"
})
Just try to add a property to the BottomNavigation-component: appearance='noIndicator'. Looks like we've forgotten display this ability in the documentation. Hope this helps.

How do i use custom fonts in navigation tab in react native + expo?

I can load and render custom fonts for text in general, but when i try to specify the font Family for my navigation bar, i get an error: "fontfamily 'poetsenone' is not a system font and has not been loaded through Font.Loadsync.
i've loaded the font in my root comopnent # app.js using Font.Loadasync.
// homescreen.js:
static navigationOptions = {
title: 'Scan',
tabBarOptions: {
labelStyle: {
fontSize: 20,
fontFamily: "poetsenone"
},
tabStyle: {
},
style: {
marginTop: 23,
backgroundColor: '#423D3D',
},
}
};
//app.js
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'poetsenone': require('./assets/fonts/poetsenone.ttf')
});
}
render() {
return (
<AppContainer />
);
}
}
Isn't app.js typically the top-level component? what's going on?
Remove the quotes around 'poetsenone' in loadAsync and it should work.

react native, react-navigation, TabNavigator, how to send a request when I change tab screen

I am using thereact-navigation to control react-native App.
const MainTab = TabNavigator({
Home: tabscreen(HomeScreen, '/home', 'home', 'home'),
Chat: tabscreen(ChatScreen, '/chat', 'chat', 'chat'),
Find: tabscreen(FindScreen, '/find', 'find', 'find'),
Profile: tabscreen(ProfileScreen, '/profile', 'profile', 'profile')
}, {
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
//...other configs
tabBarOptions: {
// tint color is passed to text and icons (if enabled) on the tab bar
activeTintColor: '#1BBC9B',
inactiveTintColor: '#9B9B9B',
showIcon: true,
style: {
backgroundColor: '#F4F4F4',
borderTopWidth: 0,
height: 49
},
labelStyle: {
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 1.5
}
}
});
const AppNavigator = StackNavigator({
Main: {
screen: MainTab ,
path: '/',
navigationOptions: {
// header: null,
headerVisible: false,
gesturesEnabled: false,
}
},
....
{
initialRouteName: 'Main',
mode: 'card',
headerMode: 'screen',
navigationOptions: {
headerVisible: false,
gesturesEnabled: true,
headerStyle: styles.headerStyle,
headerTitleStyle: styles.headerTitleStyle,
headerTintColor: 'white',
headerBackTitle: null,
}
});
In the Chat tab, I send a request to the backend to get a list data in ChatScreen's componentDidMount function. It works well.
When I navigate another screen from the ChatScreen, do something, and then go back to the ChatScreen by clicking the back button in the left top corner of another screen.I need to request the list data from the backend again, but the componentDidMount doesn't execute again.
If ChatScreen navigates to another screen named "A". "A" screen navigate go back to the ChatScreen. I find the ChatScreen doesn't execute the componentDidMount function in this case.
My need is requesting the list data when I change the screen to the ChatScreen. Must I send the request in another react lifecycle function
One more thing, I am using the redux to control the state.
It's not supported yet, you can follow issue #51 for this.
and it's in roadmap to v1 stable #723
as for workaround, you can use this pmachawoski's that use high order component, to know if a tab is focused or not, but the problem with this is, it's always executed, not like componentDidMount that executed once.
You should use onNavigationStateChange
link example here: https://www.reddit.com/r/reactnative/comments/69xm4p/react_navigation_tab_change_event/

Categories