For context, I'm trying to make a progress circle following this article; essentially, I'm overlaying coloured semi-circles made from borders on top of a base circular border to represent progress. These semi-circle borders are theoretically made by setting the bottom and left borders to transparent, but when I do this the entire border disappears.
This is the simplified portion of the code that I'm working with:
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<View style={styles.semicircle}></View>
);
}
const styles = StyleSheet.create({
semicircle: {
width: 200,
height: 200,
borderWidth: 20,
position: 'absolute',
borderLeftColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: '#3498db',
borderTopColor: '#3498db',
borderRadius: 100
}
});
When I set the transparent border sides to black instead, the entire circle is visible like so, but having any transparent borders causes the entire border to disappear. How do I fix this? Any help would be greatly appreciated.
Related
Stack:
React Native
React Navigator
Core components only
I have this style on TabNavigator.tsx:
const styles = StyleSheet.create({
tabStyle: {
backgroundColor: colors.background,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
height: 80,
overflow: 'hidden',
// position: 'absolute', // needed to ensure the bar has a transparent background in the corners
},
})
I keep commented the position absolute, there is always a background behind the corners, making it looking weird when a component of another color scroll.
Here it is, colored in yellow for visibility:
If I un-comment position absolute, the content flow behind the tab bar, making it feel more natural.
But...
I need to add a bottom margin on each screen to compensate the space that the tab takes, or the content in the bottom is hidden.
There i feel that there should be a good practice or a known pattern, maybe a tested workaround, that would make my life easier. Do you have an idea?
Thanks
Ahh, it's simple, after going through trial and error I discovered that just add Border Radius to it and make sure barStyle has overflow hidden. Here I pasted the snippet for it.
barStyle:{
borderRadius:50,
backgroundColor:"orange",
position: 'absolute',
overflow:'hidden',
left: 0,
bottom: 0,
right: 0,
padding:5,
}
Thnx me later...
tabBarOptions={{
style: {
backgroundColor: 'green',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
overflow: "hidden",
},
}}
I'm using react-native-elements Icon component and I'm trying to make it smaller, but only the height, not the size. I want to keep the same size, but with a smaller height.
The Problem is that when I change the height of the icon, the icon itself doesn't get up, only cuts the bottom part of the icon.
I want to center the icon.
Here is the icon with no height, it has some weird paddings that even with padding zero, it doesn't go away.
Here is the icon with a smaller height, but the bottom part of the icon is cut off.
Here is the code I have done so far. Trying to make the Icon smaller.
* only important parts
import { StyleSheet } from 'react-native'
import { Icon } from 'react-native-elements'
<Icon
name='angle-up'
type='font-awesome'
color='blue'
containerStyle={iconStyles.container}
iconStyle={iconStyles.icon}
onPress={() => this.handlePlusValue(time, i)}
size={75}
/>
const iconStyles = StyleSheet.create({
container: {
alignSelf: 'center',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
icon: {
backgroundColor: 'green',
height: 50,
textAlign: 'center',
width: 100,
},
});
How can I make the height of the icon smaller, without changing the size of it, but also make the icon in the center?
I am having problem. I want to add shadows to the border of a view, like here: https://github.com/styled-components/styled-components/issues/709
I have tried with styled-components and with normal style prop.
I currently have:
const shadow = {
shadowOffset:{ width: 10, height: 10, },
shadowColor: 'black',
shadowOpacity: 1.0,
shadowRadius: 8,
};
...
<View style={shadow}>
<TotalText>SALDO</TotalText>
<MoneyText>R$ 1.000,00</MoneyText>
<NextAllowanceText>PRÓXIMA MESADA</NextAllowanceText>
</View>
This is the output: https://ibb.co/b6xOYp
I want the shadow to be applied to the border and not the content inside, what am I missing?
Try setting the background colour of the view to white - backgroundColor: 'white'
I'm using React Navigation and trying to apply a linear gradient from white to transparent to the tab navigator and have it sit at the bottom of the screen.
I've found a good solution for using react-native-linear-gradient with a navigation header here: React Navigation - Gradient color for Header
What isn't clear to me is how to apply this same logic to the tabBar. I tried defining a component like in the linked example and then passing that to backgroundColor, but it threw an error.
Here's my current code for the tabBarOptions:
{
tabBarOptions: {
activeTintColor: 'rgba(248, 164, 2, 0.6)', // Color of tab when pressed
inactiveTintColor: 'rgba(0,0,0,0.5)', // Color of tab when not pressed
showLabel: false,
indicatorStyle: {
backgroundColor: 'transparent'
},
style: {
backgroundColor: 'rgba(255, 255, 255, 1.0)',
borderTopColor: 'transparent',
height: dynamicSize(60),
position: 'absolute',
left: 0,
right: 0,
bottom: 0
},
},
},
I then pass this into the StackNavigator by defining tabs as:
tabs: {
screen: TabVisibleNavigator
},
Decided to go with a hack that seems to work fine:
In the tabBarOptions style set backgroundColor to transparent; positioning to absolute
Create gradient png image, save as an asset in the project
Load png as an element in the bottom of the main View container
Set png style as absolute so that it renders over the background container view
This will load a transparent tab bar over a gradient image. Not the most elegant solution but hopefully it helps someone stuck on the same problem.
I want to create an overlay on top of react-native camera. However, I want only the center area to be clear and all other area to have some overlay with small opacity.
I have created component which acts as a wrapper and add corners, but I can't get overlay except in center. If I add overlay with background opacity it applies to whole screen including center box.
This is what I have so far.
<Camera style={[cameraStyle.camera]}>
<CustomView center style={[cameraMarkerStyles.container]}>
<CustomView
transparentBg
spaceBetween
style={[cameraMarkerStyles.cameraMarker]}
>
<CustomView row spaceBetween>
<CornerBox status={status} position="topLeft" />
<CornerBox status={status} position="topRight" />
</CustomView>
<CustomView row spaceBetween>
<CornerBox status={status} position="bottomLeft" />
<CornerBox status={status} position="bottomRight" />
</CustomView>
</CustomView>
<CustomView
style={[cameraMarkerStyles.container, cameraMarkerStyles.overlay]}
/>
</CustomView>
</Camera>
Bascially I add a View which is center area, which has 4 boxes at all corners which create the border. And then at the end there is a View which acts as overlay for whole screen. Now that last View if I change the background color to something other than transparent, it covers center area as well.
I have tried changing zIndex, set it to -1 as well. However that also did not work.
One very dirty solution that I have is I can place a View above center area and below center area and on each side of it and then give those views as some background and opacity. In that way we can add overlay just apart from center area.
Does anyone know any good way to implement such kind of layout? Even simple idea is enough, I don't need whole code.
Adding styles just in case anyone needs to see.
const markerSize = 250
const cornerBoxSize = 50
const cornerBoxBorderSize = 5
const cameraMarkerStyles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
},
overlay: {
zIndex: -1,
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
cameraMarker: {
width: markerSize,
height: markerSize,
},
cornerBox: {
width: cornerBoxSize,
height: cornerBoxSize,
},
topLeftBox: {
borderTopWidth: cornerBoxBorderSize,
borderLeftWidth: cornerBoxBorderSize,
},
})
const cameraStyle = StyleSheet.create({
camera: {
height: Dimensions.get('screen').height,
backgroundColor: 'transparent',
},
})
we talked about this on Twitter but I wanted to make sure the proposed solution was logged...
I suggest you create four translucent gray boxes for the four sides of the screen. The center of the screen will be blank and those four boxes will form a mask on each side of the center-area