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
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 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 trying to get a bottom to top white to transparent-white transition in my React Native screen using Expo Linear Gradients:
https://docs.expo.io/versions/latest/sdk/linear-gradient.html
I copied the second example and flipped it around, and made it white instead of black. But now the "transparent" the white is supposed to fade in to is darker that the white is, see below:
The transparent actually is see through so that's good but is there a way to give it a white hue?
Code here:
<LinearGradient
colors={[ 'transparent', 'rgba(255,255,255,0.8)']}
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 200,
}}
/>
It's because transparent is equal to rgba(0,0,0,0)
Try using rgba(255,255,255,0) instead of transparent to get a white to white transition
The w3 spec defines transparent as transparent black as can be read here
I actually found my own answer. "transparent" apparently translates to black-transparent, to get white just specify an rgba() in the white channel like so:
<LinearGradient
colors={[ 'rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 80,
}}
/>
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'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',
}