Trying to make rounded corner go inward to create a semi-circle illusion on the rectangular shape.
leftContainer: {
width:'50%',
height: Dimensions.get('window').height,
flex: 1,
},
rightContainer: {
width:'50%',
height: Dimensions.get('window').height,
flex: 1,
You can achieve this with 3rd View. Position it absolute and give it border radius of '50%'.
Related
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.
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 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
I'm trying to make a tab with a curved bottom left corner and a border on the left and bottom sides, but I can only get it to have the border on all sides or none.
I'll get it on all sides if I use anything like:
tab2:{
top: 3*width/8,
width: 3*width/16,
backgroundColor: 'red',
borderColor:'white',
height: width/8,
borderBottomLeftRadius: 100,
borderWidth: 1,
borderRightWidth: 0,
borderTopWidth: 0,
borderTopColor: 'transparent
borderRightColor: 'transparent'}
And if I take out borderWidth: 1, I don't get a border at all.
Any suggestions?
I just overlapped the View component and created border at top left and bottom right region only
here is the expo demo link:-
https://snack.expo.io/#vivek22719/multiple-screens
here is my code:-
<View style={{width:297,height:128,backgroundColor:"#fff",borderWidth:1,marginTop:20,borderColor:"darkcyan"}}>
<View style={{width:300,height:130,top:-2,left:-2,backgroundColor:"#fff",borderTopStartRadius:40,borderBottomEndRadius:40,display:"flex",justifyContent:"center",alignItems:"center"}}}}><Text style={{fontSize:24,color:"darkcyan"}}>A space for parents</Text><Text style={{fontSize:24,color:"darkcyan"}}> by parents</Text>
</View>
</View>
As you mentioned border will be all or none. If you try with single side it will work on Android but may not work on IOS . You can give a try with View by giving proper height and width. I have managed for bottom border with View.
For left and bottom border it would be tough but may be it will work by two View element between your main elements design. One for left side and another for bottom.
Define the border for left and bottom part using borderLeft and borderBottom
tab2:{
top: 3*width/8,
width: 3*width/16,
backgroundColor: 'red',
borderColor:'white',
height: width/8,
borderBottomLeftRadius: '100',
borderLeft: '1',
borderBottom: '1',
}
I wanna have a ScrollView above a map. The content of the ScrollView should start at 2/3 of the screen so I can see the markers on the map and use the map. But when I start dragging the scroll view it should use the whole height to scroll and not just the 1/3 where the ScrollView is.
I tried positioning with top which let me use the map but scrolling happened just inside the small area left. paddingTop has the desired effect but it didn't let me use the map of course.
How can I achieve what I want?
clubResultContainer: {
position: 'absolute',
top: 0,
paddingTop: (Dimensions.get('window').height / 3) * 2,
left: 0,
right: 0,
bottom: 0,
zIndex: 20,
backgroundColor: 'transparent',
},
try to add flexDirection: 'row' on your stylesheet