Hello I'm trying to create:
A top Bar for all screen
a bottom bar for only 4 screen
So I have 2 screens -> Home screen and connection screen (without any top or bottom bar)
Then I have my 6 screen A B C D E F
I want a top bar on each and a bottom on A B C F
const TabRouter = createBottomTabNavigator(
{
HomeAfterLoginScreen: { screen: A },
ShowListAlertScreen: { screen: B },
ShowListProfessionScreen: { screen: C },
MyAccountScreen: { screen: F }
},
{
tabBarPosition: "bottom",
tabBarOptions: {
style: { backgroundColor: "#50bcb8" },
showIcon: true,
showLabel: true,
gesturesEnabled: true,
indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
inactiveTintColor: "#fff",
activeTintColor: "#fff",
tabStyle: { justifyContent: "center", alignItems: "center" }
}
});
const Router = createStackNavigator({
// If I add A B C F here i loose my bottombar
D : {
screen : D,
navigationOptions: {(nav option ..)}
},
E : {
screen : E,
navigationOptions: {(nav option ..)}
},
Home: {
screen: HomeScreen,
navigationOptions: {(nav option ..)}
},
App: {
screen: TabRouter,
navigationOptions: {
visible: false,
header: null
}
},
ConnexionScreen: {
screen: ConnexionScreen,
navigationOptions: {(nav option ..)}
},
});
export default Router;
There is a sample of my router.js
With this configuration I have bottom bar but I don't have my top bar. Any advice?
this is my screen A and i want a top bar on it. but if if add this screen on creatstack navigator i loose my bottom bar.
const STANDARD_NAVIGATION_OPTION = {
backtitle: null,
headerStyle: { backgroundColor: 'green' },
headerTintColor: 'white'
};
const App = createBottomTabNavigator({
tabA: {
screen: createStackNavigator(
{
tabAFirstScreen: {
screen: tabAScreen,
navigationOptions: {
...STANDARD_NAVIGATION_OPTION,
title: 'Header Title A'
}
}
},
{ headerMode: 'screen' })
},
tabB: {
screen: createStackNavigator(
{
tabBFirstScreen: {
screen: tabBScreen,
navigationOptions: {
...STANDARD_NAVIGATION_OPTION,
title: 'Header Title B'
}
}
},
{ headerMode: 'screen' })
}
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
labelStyle: { fontSize: 12 },
activeTintColor: 'yellow',
pressColor: 'orange'
}
})
const MainNavigator = createAppContainer(App);
export default MainNavigator;
The idea is, first you have a bottomTabNavigator as root, then within the bottom tab, define each and every tab: tabA, tabB and so on..
Within each of the tab, define their own createStackNavigator, so that each and every tab will gives you the header look, which allows you to stack the screen within the tab too.
try by removing the header: null line in
App: {
screen: TabRouter,
navigationOptions: {
visible: false,
header: null
}
An image of what you are expecting would help. Its a weird navigation pattern to hide the tabs on some screens , that means that you don't want the user to navigate to the hidden tabs. But if you are still using the same screens in the top tabnavigator, then i'ts pretty useless to have a bottom and top tabbar for the same screens.
You can have a tab with only 3 tabs, one of them being a nested tabnavigator with 4 tabs , that's the pattern.
Ok, you wan't a header ? , i thought you wanted top tabs navigation, then it's pretty easy, instead of passing a screen to HomeAfterLoginScreen, use a nested stacknavigator , because the tabnavigator doesn't give access to headers , but if you nest a stacknavigator there you can have a header. then you just remove the header with header:null
Related
I try to configure the license of Fusionchart in ReactNative as in this URL https://www.npmjs.com/package/react-native-fusioncharts#license-configuration.
But still, it shows the watermark which should not be visible. Is there anything I missed?
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Platform } from 'react-native';
import ReactNativeFusionCharts from 'react-native-fusioncharts';
global.licenseConfig = {
key: "license-key",
creditLabel: false // true/false to show/hide watermark respectively
};
export default class App extends Component {
constructor(props) {
super(props);
//STEP 2 - Chart Data
const chartData = [
{ label: 'Venezuela', value: '250' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' },
];
//STEP 3 - Chart Configurations
const chartConfig = {
type: 'column2d',
width: 400,
height: 400,
dataFormat: 'json',
dataSource: {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'fusion',
exportEnabled: 1, // to enable the export chart functionality
},
data: chartData,
},
};
const events = {
// Add your events method here:
// Event name should be in small letters.
dataPlotClick: (ev, props) => {
console.log('dataPlotClick');
},
dataLabelClick: (ev, props) => {
console.log('dataLabelClick');
},
};
this.state = {
chartConfig,
events
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.heading}>FusionCharts Integration with React Native</Text>
<View style={styles.chartContainer}>
<ReactNativeFusionCharts chartConfig={this.state.chartConfig} events={this.state.events} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
height: 500,
backgroundColor: 'white'
},
heading: {
fontSize: 20,
textAlign: 'center',
marginBottom: 10,
},
chartContainer: {
borderColor: 'red',
borderWidth: 1,
height: 500,
},
});
// skip this line if using Create React Native App
AppRegistry.registerComponent('ReactNativeFusionCharts', () => App);
I also add the below code in the root component but not worked.
global.licenseConfig = {
key: "license-key",
creditLabel: false // true/false to show/hide watermark respectively
};
Answering my own question. Hope this will be helpful to someone.
Issue is latest react-native-fusionchart 5.0.0 is not updated with fusionchart 3.17.0. You may need to manually copy the fusionchart content to react-native-fusionchart.
Copy the node_module/fusionchart content into node_modules/react-native-fusioncharts/src/modules/fusionchart folder and run below script.
find fusioncharts -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.fcscript"' {} \;
Then the watermark vanishes as expected. These steps are configured in the gulp script but somehow it seems to be not working.
Hope this issue will be fixed soon.
I want to change the background color of my material ui datepicker modal
import { createMuiTheme } from "#material-ui/core";
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
},
},
},
});
export default materialTheme
In the above code i was able to change colors of date and few others but not the total background color
Are there any documentation from which i can get these class names or any other option
Try in CSS:
.MuiPaper-root {
background-color: #eaea87;
}
In recent version of MUI (v5.3.1) I resolved this issue by adding sx={{ backgroundColor: 'white' }} to TextField in renderInput prop as below:
<MobileDatePicker
label="Date"
value={date}
onChange={(newValue) => {
setDate(newValue);
}}
renderInput={(params) => (
<TextField
sx={{ backgroundColor: 'white' }}
fullWidth
{...params}
/>
)}
/>
You can use createTheme to provide component overrides (see docs):
const theme = createTheme({
components: {
// Name of the component
MuiInputBase: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
backgroundColor: "white",
// add variant styles like so
"&.Mui-disabled": {
"backgroundColor": "#cccccc"
}
},
},
},
},
});
You can see the name of the component to use by inspect element and looking at the class names, and you can find the slots in the component definition, e.g. this is the slots for the MuiInput component.
Also see this source on combining class names to target disabled, hover, active etc.
MuiPickers is using Dialog Material Ui, so override all dialog component that be used in this pickers. I'm not sure with this solution below. You can try this, hope it's worked.
const materialTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'red',
},
},
MuiPickersDay: {
day: {
color: 'black',
},
daySelected: {
backgroundColor: '#33abb6',
},
dayDisabled: {
color: '#ccc',
},
current: {
color: 'red',
},
},
MuiPickersModal: {
dialogAction: {
color: '#33abb6',
backgroundColor: 'YOUR HEX HERE',
},
},
},
});
I think the good way is send style in DialogProps
https://material-ui-pickers.dev/api/DateTimePicker (section modal wrapper)
so then you can override all dialog modal.
I am using createMaterialTopTabNavigator to display Top Tabs in react native but the data from other tab is visible on the current tab
I have tried to set the container style to flex 1 and the flexWrap : 'wrap' but still the problem persists
const NotificationTabs = createMaterialTopTabNavigator(
{
MobileNotification: {
screen: MobileNotificationScreen,
navigationOptions: {
title: Languages.Notifications.Mobile,
},
},
EmailNotification: {
screen: EmailNotificationScreen,
navigationOptions: {
title: Languages.Notifications.Email,
},
},
},
{
initialRouteName: 'MobileNotification',
tabBarComponent: TopTabBarComponent,
tabBarOptions: {
style: {
backgroundColor: Colors.SAWhite,
},
labelStyle: {
color: Colors.SAPrimary,
...Fonts.Style.normal,
},
activeTintColor: Colors.SAPrimary,
inactiveTintColor: Colors.SASecondary,
upperCaseLabel: false,
},
}
);
<View style={styles.flat}>
<NotificationTabs navigation={navigation} />
</View>
styles
flat: {
flex:1
borderRadius:10
marginTop: '10%',
padding: 4,
backgroundColor: Colors.SAWhite,
},
I fixed it by adding overflow: 'hidden' to the styles
flat: {
flex:1
borderRadius:10
marginTop: '10%',
padding: 4,
backgroundColor: Colors.SAWhite,
overflow: 'hidden'
}
I am after creating a custom theme with material UI but cannot target individual parts of the theme as I would like:
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
fontFamily: '"Indie Flower", handwriting',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
typography: {
// Use the system font instead of the default Roboto font.
h1: {
fontFamily: '"Indie Flower", handwriting',
},
},
})
Are you able to change things like default font for h1,h2,input,p etc?
I'm getting started with react-navigation.
How do I change the tabBar background color when I change tab?
Here is some pseudo-code showing what I'm hoping for:
_backgroundColor = function() {
switch (this.routeName) {
case 'tabHome': return { backgroundColor: '#002663' };
case 'tabRewards': return { backgroundColor: '#3F9C35' };
default: return { backgroundColor: 'white' }
}
}
// Tabs setup
export const TabStack = TabNavigator({
tabHome: { screen: HomeStack, },
tabRewards: { screen: RewardsStack, },
}, {
tabBarOptions: {
style: _backgroundColor(),
}
});
At the minute it's always defaulting to white ( which is fine because my code is wrong :-) so how do I pass in something which triggers this logic either on routeName or iconLabel or whatever.
Any help would be most appreciated.
Thanks in advance.
Cheers
import React from 'react';
import { Image, View } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
const Screen = () => <View />;
const Tabs = TabNavigator(
{
Tab1: {
screen: Screen,
navigationOptions: {
title: 'Tab1',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab2: {
screen: Screen,
navigationOptions: {
title: 'Tab2',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab3: {
screen: Screen,
navigationOptions: {
title: 'Tab3',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
},
{
lazy: true,
tabBarComponent: props => {
const backgroundColor = props.position.interpolate({
inputRange: [0, 1, 2],
outputRange: ['orange', 'white', 'green'],
})
return (
<TabBarBottom
{...props}
style={{ backgroundColor: backgroundColor }}
/>
);
},
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Tab2',
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'grey',
},
},
);
Output
For react-navigation v6, just add tabBarColor on the screen options
activeColor="#ffffff"
barStyle={{
backgroundColor: "#0071BC",
}}
initialRouteName="Home"
shifting={true}
>
<Tab.Screen
name="Downloads"
component={Downloads}
options={{
tabBarLabel: "Downloads",
tabBarIcon: ({ color }) => (
<SimpleLineIcons name="question" size={20} color={color} />
),
tabBarColor: Colors.tutor,
}}
/>```