I am trying to create a bottom tabBar with react-navigation which is transparent.
I am using the "tabBarComponent: " BottomTabNavigatorConfig. and background of the MyCustomTabBar is transparent.
Yet I am getting a white background in tabbar.
const DashboardTabNavigator = createBottomTabNavigator(
{
Posts: PostsStack,
Subreddits: SubredditsScreen,
Profile: ProfileScreen,
Inbox: InboxScreen,
Search: SearchScreen
},
{
animationEnabled: false,
swipeEnabled: false,
lazyLoad: true,
tabBarOptions: {
tinColor: 'transparent',
activeTintColor: 'red',
inactiveTintColor: 'green',
showIcon: true,
showLabel: true,
lazyLoad: true,
upperCaseLabel: false,
indicatorStyle: {
backgroundColor: 'transparent'
},
style: {
backgroundColor: 'rgba(22, 22, 22, 0.6)',
borderTopWidth: 1,
borderTopColor: '#996600',
position: 'absolute',
left: 0,
right: 0,
bottom: 0
}
},
tabBarComponent: props => <TabBar {...props} />,
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return routeName === 'Posts'
? { header: null }
: { headerTitle: routeName }; // Disabled TabNavigators header for Posts screen cos It has its own header from another stacknavigator.
}
}
);
Looks like this
tabBarOptions are ignored if a tabBarComponent is provided.
Solution to the issue was to apply following style to the parent view of the custom component.
style: {
backgroundColor: 'rgba(22, 22, 22, 0.6)',
borderTopWidth: 1,
borderTopColor: '#996600',
position: 'absolute',
left: 0,
right: 0,
bottom: 0
}
set in tab bar option
tabBarOptions: {
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
elevation: 0,
},
},
Related
How can I change the x and y co-ordinates of text in react-google-charts?
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
marginRight: 10,
},
},
hAxis: {
textStyle: {
slantedTextAngle: 90
},
}
{
legend: { position: "bottom" },
colors: ["#01B8FF", "#EB6F33", "#03C895"],
chartArea: { width: "40%", height: "70%" },
isStacked: true,
bar: {groupWidth: '30'},
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
},
},
};
This properties can be used to create a horizontal stacked chart.
I am having troubles placing the google react charts on the left of a full width container without the legend thinking it's being cut off.
If I leave it as a default it looks like this:
However I want it to be on the left side and the legend to be next to it.
When I change the position of the chart area:
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
It then looks like this:
For whatever reason it thinks there isn't enough space and it cuts the legend text which is really annoying.
Here is the code I am using:
const pieOptions = {
title: '',
pieHole: 0.6,
slices: [
{
color: '#00A3E0',
},
{
color: '#F2A900',
},
{
color: '#43B02A',
},
{
color: '#DF4661',
},
{
color: '#003865',
},
{
color: '#A15A95',
},
{
color: '#FF6A13',
},
],
legend: {
position: 'right',
alignment: 'end',
textStyle: {
color: '#666',
fontSize: 12,
},
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
fontName: 'inherit',
fontSize: 12,
}
Can anyone advise?
Also if this is not fixable, can you please recommend a chart which supports that and custom colours please?
Thank you in advance!
I have tried this based on the answers given here: how to remove padding-top in menu drop-down react-select?. But this doesn't work for me. The space is also bigger than most examples found on https://react-select.com/styles. It sucks that I can't inspect element the drop-down to see what is going wrong.
My code:
const stateOptions = [
{ value: 'All', label: 'ALL' },
{ value: 'SELECT1', label: 'SELECT1' },
{ value: 'SELECT2', label: 'SELECT2' },
{ value: 'SELECT3', label: 'SELECT3' }
]
const options = [
{
options: stateOptions
}
]
const customStyles = {
menu: provided => ({
...provided,
marginTop: 0,
width: '100%',
marginTop: '-1px',
}),
menuList: (provided, state) => ({
...provided,
paddingTop: 0,
paddingBottom: 0,
overflow: 'hidden',
}),
option: (provided, state) => ({
...provided,
height: '55px',
borderBottom: '1px solid #b0b0b0',
color: state.isSelected ? 'white' : '#000000',
background: state.isSelected ? '#e3155c' : 'white',
fontFamily: 'Qanelas-Regular',
fontSize: '16px',
padding: '15px',
':hover': {
...provided[':active'],
backgroundColor: '#e3155c',
color: 'white'
},
}),
What really worked for me is the following:
group: provided => ({
...provided,
paddingTop: 0,
}),
A hack to try to inspect the code is to press F8 in order to pause the script execution.
I'm using echarts-for-react to create a gauge. I'm trying to disable the hover effect on the pointer.
The current behaviour is that I have a circle with a small pointer, and when hovering, the pointer covers the text. I've tried setting emphasis: null but it didn't change anything.
Here's the pictures demonstrating this issue:
Normal Behaviour
When hovering
Here's my code:
const series = {
type: 'gauge',
radius: '100%',
startAngle: '-20',
endAngle: '200',
clockWise: false,
data: [ltv],
max: 150,
axisLine: {
show: true,
lineStyle: {
width: '12',
color: [[0.2, '#e2da34'], [0.4, '#c2e234'], [0.6, '#7dea52'], [0.8, '#c2e234'], [1, '#e2da34']],
shadowColor: '#f5f5f5',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
length: '100%',
width: '4'
},
itemStyle: {
color: '#d1d1d1',
borderWidth: 5,
borderColor: '#d1d1d1'
},
detail: {
show: true,
formatter: e => [`{val|${e.toFixed(1)}%}`, '{text|Good!}'].join('\n'),
rich: {
val: {
color: '#2f353a',
fontWeight: 'bold',
fontFamily: 'SegoePro-Bold',
fontSize: '24'
},
text: {
color: '#9c9c9c',
fontFamily: 'SegoePro-Regular',
fontSize: '12'
}
},
offsetCenter: [0, 0],
padding: [40, 10, 0, 10],
width: 85,
height: 65,
backgroundColor: '#ffffff',
borderWidth: 1,
borderRadius: 50,
borderShadow: '#000000'
}
};
const config = {
title: {
show: false
},
legend: {
show: false
},
tooltip: {
show: false
},
series
};
I have a helper function is.iphone('x') to check for iphone x and I want some styles to get added to the styles.icon and styles.textContainer and styles.container if true. This needs to happen inside the render method. However, when I try to run my code:
const styles = {
addToCartButton: {
borderRadius: 0,
width: windowWidth,
},
container: {
overflow: 'hidden',
},
innerContainer: {
width: 2 * windowWidth,
flexDirection: 'row',
},
checkoutButton: {
borderRadius: 0,
width: windowWidth,
},
icon: {
backgroundColor: accentColor,
},
textContainer: {},
}
export class CartButton extends Component {
checkoutButtonColor = new Animated.Value(3)
xOffset = new Animated.Value(-windowWidth)
dynamicStyles = {
transform: [ { translateX: this.xOffset } ],
}
checkoutDynamicStyles = {
backgroundColor: this.checkoutButtonColor.interpolate({
inputRange: [ 0, 3 ],
outputRange: [ color('b'), accentColor ],
}),
}
animate = () => {
Animated.sequence([
Animated.timing(this.xOffset, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
Animated.timing(this.checkoutButtonColor, {
toValue: 0,
duration: 250,
userNativeDriver: true,
}),
]).start()
}
)
}
render () {
if (is.iphone('x')) {
styles.icon.paddingBottom = spacing
styles.textContainer.paddingBottom = spacing
styles.container.marginBottom = spacingSizes.large
}
return (
<View style={styles.container}>
<Animated.View style={[ styles.innerContainer, this.dynamicStyles ]}>
{this.renderCheckout()}
{this.renderAddToCart()}
</Animated.View>
</View>
)
}
}
I get the error "you are attempting to set Key 'paddingBottom' with value '14' (spacing =14) on an object that is meant to be immutable and has been frozen. How to do this any suggestions?
Update your code and replace style={styles.container} by style={[styles.container, is.iphone('x') ? { marginBottom: spacing } : {}]} and do the same where you use the icon style.