At this moment the library https://www.npmjs.com/package/#miblanchard/react-native-slider does not have a solution to be able to change the height of the left and right track of the thumb.
How to implement it?
I found a workaround:
The container in which the Slider is should have overflow style: "hidden"
I use renderThumbComponent to display the thumb left line to the left
renderThumbComponent={() => (
<>
<View style={styles.thickerLine} />
<View style={styles.thumb} />
</>
)}
I set the style for thickerLine to be as long as possible, so that it goes beyond the container.
thickerLine: {
position: "absolute",
top: 8,
right: 0,
backgroundColor: "blue",
height: 4,
width: window.width,
},
Yes, I know it's wild, but it works!
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",
},
}}
Any idea how can I create two views that fill the screen, with a curved border between them?
In the following example, the top one (red) should have a concave border, the other one (blue) a convex one?
Using the code suggested in the answer (60 instead of 60%, which doesn't work), gives the following:
Not what I am looking for, unfortunately...
Test this code and check out.
<View>
<View style={{width: "100%", height: 100, backgroundColor: 'skyblue'}} />
<View style={{position:"absolute",top:50,width: "100%", height: 100, backgroundColor: 'steelblue',borderRadius:"60%"}} />
<View style={{width: "100%", height: 100, backgroundColor: 'steelblue',}} />
</View>
The above code has a slight resemblence to what you want to achieve. However the best option would be to use image in the background.
Follow this answer by Vishal in another Stack question: Using SVG
RESULT:
I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks
return(
<TouchableOpacity style = {styles.food_wrapper}
onPress = {()=> this.userAction()}
>
<Text style = {styles.foodname}>
{this.name}
</Text>
<Text style = {styles.foodprice}>
Rs: {this.price}
</Text>
</TouchableOpacity>
);
food_wrapper:{
flex: 1,
flexDirection :'row',
justifyContent:'space-between',
alignItems:'flex-start',
width: '100%',//Dimensions.get('window').width,
minHeight: 50,
marginVertical: '1%',
padding: '2%',
backgroundColor: 'rgb(155,200,200)'
},
You need to understand what is the basic difference from 100% and the width you get using dimension.get('window')
100% means you want to get the container 100% width which mean if your parent container is 50px then 100% will return 50px.
the width from dimension give you a static width of your device width
so be careful to choose what to use to your component
if you want to follow the parent container then it is easier to use 100% then width from dimension but for responsive reasons without any parent container or it is the parent itself then width from dimension will work better
You need to add a wrapper view with flexDirection: 'row', then style the child view (or Touchable or whatever) with flex: 1
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>
Or you could use alignSelf: 'stretch' inside a few with flexDirection: 'column' (which is the default for all views)
Hang in there. Learning flexbox takes some practice. Your first thought when you get stuck should be "do I need to add a wrapper view?"
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',
}