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",
},
}}
Related
I'm trying to create a simple Floating Action Bar button with a plus icon in it, and have had trouble true-centering the "plus" in some edge cases. I was just using '\uFF0B' in a <Text>, but tried to switch to react-native-vector-icons, only to discover that they too were using a font and not an image to back the <Icon> instances, and that my problems seem to persist.
Things are fine on most screens and devices but in some cases users are reporting the plus icon is not perfectly centered. I have a hypothesis that it may involve users' accessibility options increasing the font size in the app beyond size of the parent View. At any rate I can reproduce something like the screenshots folks are sharing with me by setting the fontSize greater than the lineHeight. Assuming that is the issue -
How do you center a single glyph within the view area of a <Text> (or <Icon>, since that derives from <Text>), even when the fontSize may be much larger than the <Text>'s lineHeight or even overall height?
In the below example, the "+" font size is exactly double the line-height, so the plus is centered smack dab on the upper-right corner of the view area, as though it were expecting to be in a box that was 112dp x 112dp; but I want it centered dead-center of the 56dp x 56dp box instead, with the arms of the plus cropped. No combination of style attributes seems to effect it, but rather just controls where the <Icon> positions within its parent.
Currently:
Normally:
For oversized font:
Code:
<View style={s.fabStyle}>
<TouchableOpacity onPress={()=>{this.onPlus()}}>
<Icon name="plus" style={s.fabText} />
</TouchableOpacity>
</View>
...
const s = StyleSheet.create({
fabStyle: {
position: 'absolute',
right: 16,
bottom: 16,
borderRadius: 28,
width: 56,
height: 56,
backgroundColor: styleConstants.color.primary,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
},
fabText: {
position: 'relative',
left: 0,
top: 0,
right: 0,
bottom: 0,
fontSize: 112,
color: '#fff',
textAlign: 'center',
lineHeight: 56,
width: 56,
height: 56,
},
});
This isn't an answer to the question itself, which still stands, but an answer to the underlying issue, in case somebody arrives here by Google search with a similar issue. In my case it was indeed the case that accessibility settings were causing font to be bigger than it was designed to be, thus triggering the above scenario. While I still don't know how to center the text adequately in this case, in my case the issue could be circumvented by making sure allowFontScaling=false for relevant Views holding text.
I need to add a shadow around the Image my image is a rectangular field and i need to add a shadow around that rectangular field
I want to do something like this: stackoverflow question
I wanted to know how to do this in react native that can be applicable for both android and ios
Shadow is only for iOS. For Android you need Elevation. You could do something like this. I use it currently and works fine:
elevationLow: {
...Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
},
android: {
elevation: 5,
},
}),
},
Wrap your Image inside View (for semantic clarity) and then define following style rules to the View:
shadow: {
shadowColor: '#202020',
shadowOffset: {width: 0, height: 0},
shadowRadius: 5,
},
I made an example here: https://snack.expo.io/rJesdOgRZ. But atm "snack" is so freaking slow that it's difficult to check actual results. But at least the code is visible and works as a benchmark.
You can use shadow style props for your View to achieve this. You will want
shadowOffset = takes in height and (optional, i dont really like using it, but ) width values to move your shadow in those directions.
shadowColor = takes a colour, similar to backgroundColor, indicates colour of the shadow
shadowRadius = takes a value, will dictate how far out your shadow is from the View
shadowOpacity = value from 0 to 1, indicates how strong the shadow presence is.
Heres a quick example of something you probably want. This code will make a red circle, with a slight shadow visible at the bottom of the circle. This code is of course customizable.
<View style = {{
position: 'absolute', top: 50, left: 50,
backgroundColor: 'red', width: 100, height: 100, borderRadius: 50,
shadowColor: "black",
shadowOffset: { height: 2},
shadowOpacity: 0.3,
}}>
//CONTENT
</View>
Another easiest and the best option I came across is the use of react-native-shadow-2 along with react-native-svg. Here, we need to install react-native-svg since react-native-shadow-2 is dependant on react-native-svg.
Basic shadow
import { Shadow } from 'react-native-shadow-2';
export default const ImageWithShadow = () => {
<Shadow>
<Image style={styles.imageStyles} source={ImageSource} />
</Shadow>
}
Advance shadow styling
import { Shadow } from 'react-native-shadow-2';
export default const ImageWithShadow = () => {
<Shadow startColor='#00000020' distance=10 radius=5 size=20>
<Image style={styles.imageStyles} source={ImageSource} />
</Shadow>
}
As shown in the above sample code you have to just wrap all the content (image or text or View or any other react native component) that you need to add a shadow inside the tag. No need of doing any manual styling like in react native shadow options. If you browse their documentation you can find many props that you can effectively utilize to customize the shadow applied to the component.
I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?
You will have to use different style props for iOS and Android.
Android
It's very simple for android, just use the elevation style prop (See docs) . An example:
boxWithShadow: {
elevation: 5
}
iOS
In iOS you have more flexibility, use the Shadow props (See docs). An example:
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 1,
}
Summary
In summary, to get box shadow for both platforms, use both sets of style props:
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}
Attention: Do not use overflow: 'hidden';, in iOS all of the shadows disappear by this property.
Hey, Look it's Done Now !
const styles = StyleSheet.create({
shadow: {
borderColor:'yourchoice', // if you need
borderWidth:1,
overflow: 'hidden',
shadowColor: 'yourchoice',
shadowRadius: 10,
shadowOpacity: 1,
}
});
Keep in mind the shadow's props are only available for IOS.
You can use library "react-native-shadow-2", works for both android and iOS.
No need to write seperate chunk of code for iOS/android & has typescript support also.
Installation:
First install react-native-svg.
Then install react-native-shadow-2:
npm i react-native-shadow-2
Structure:
import { Shadow } from 'react-native-shadow-2';
<Shadow>
{/* Your component */}
</Shadow>
There are many props such as startColor, finalColor, radius, offset. You can use as per your requirements.
I've found a workaround using a Linear Gradient for a very similar issue. I haven't found anything better anywhere on stack, so I suppose I'll add it here. It's especially nice and easy if you only want top and bottom, or side shadows.
I added a top and bottom inner box shadow to an image with full width and 140 height. You could create multiple gradients to make an outer box shadow. Don't forget about the corners. You can use the start and end props to make angled shadows / gradients, maybe that'll work for corners if you need them.
<ImageBackground
source={imagePicker(this.props.title)}
style={styles.image}
>
<LinearGradient
colors={[
'transparent',
'transparent',
'rgba(0,0,0,0.2)',
'rgba(0,0,0,0.6)'
]}
start={[0,0.9]}
end={[0,1]}
style={styles.image_shadows}
/>
<LinearGradient
colors={[
'rgba(0,0,0,0.6)',
'rgba(0,0,0,0.2)',
'transparent',
'transparent'
]}
start={[0,0]}
end={[0,0.1]}
style={styles.image_cover}
/>
</ImageBackground>
const styles = StyleSheet.create({
image: {
flex: 1,
resizeMode: "stretch",
justifyContent: "center",
paddingTop:90,
paddingLeft:10,
height:140,
flexDirection: 'row',
},
image_shadows: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 140
}
}
If you use expo you can install it with 'expo install expo-linear-gradient' Expo Docs. If not, I believe react-native-linear-gradient is similar React-Native-Linear-Gradient github.
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 have a simple progress bar, it has a borderRadius and overflow set to hidden. I have a child of this, it has no borderRadius, and it is overflowing outside of the corners. Here is my markup:
<View style={style.progressbar}>
<View style={[style.progressbarfill, { width:'50%' }]} />
</View>
const style = {
progressbar: {
backgroundColor: '#ccc',
height: 25,
width: '90%',
borderRadius: 12,
overflow: 'hidden'
},
progressbarfill: {
backgroundColor: 'springgreen',
width: '10%',
height: '100%'
}
}
This is what it looks like:
I put arrows on where the green is covering the border. The green should not overflow outside the edges.
Does anyone know why this is?
Actually I'm testing it right now, seems to be working fine on iOS, but Android is the one having the issue with the overflow right now. It looks like that is still getting more support currently. A temporary fix, is to just add the same borderRadius on the progressbarfill.
Here is the issue on the React Native Docs:
The overflow style property defaults to hidden and cannot be changed
on Android This is a result of how Android rendering works. This
feature is not being worked on as it would be a significant
undertaking and there are many more important tasks.
Another issue with overflow: 'hidden' on Android: a view is not
clipped by the parent's borderRadius even if the parent has overflow:
'hidden' enabled – the corners of the inner view will be visible
outside of the rounded corners. This is only on Android; it works as
expected on iOS. See the corresponding issue.
I found that, in addition to overflow: 'hidden' needed on the parent, I also needed backgroundColor: 'transparent' added to the parent
Edit: I also found that sometimes testing this required a refresh of my app.