I am trying to apply a border for a view on top and bottom only with a "dashed" style. But the borderStyle not working with borderTopWidth and borderBottomWidth.
This is working,
<View
style={{
backgroundColor: 'white',
borderRadius: 10,
marginHorizontal: 20,
padding: 16,
borderStyle: 'dashed',
borderColor: 'red',
borderWidth: 1
}}>{...content...}</View>
This is not working,
<View
style={{
backgroundColor: 'white',
borderRadius: 10,
marginHorizontal: 20,
padding: 16,
borderStyle: 'dashed',
borderBottomColor: 'red',
borderBottomWidth: 1,
borderTopColor: 'red',
borderTopWidth: 1,
}}>{...content...}</View>
Is there any different way to achieve this style?
Not an exact solution, but this hack works (example - for adding bottom border)
<View style={{ overflow: 'hidden' }}>
<View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: '#000', margin: -2, marginBottom: 0 }}>
<Text>Some Data to be underlined</Text>
</View>
</View>
Basically what we are doing is:
defining an outer container which hides the overflowing parts (data, items etc).
for inner container, we set it's margins so as to go beyond outer container dimensions
Try this
import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
function Index(props) {
return <View style={styles.container}></View>;
}
const styles = StyleSheet.create({
container: {
width: 126,
height: 46,
backgroundColor: "rgba(255,255,255,1)",
borderColor: "rgba(255,0,0,1)",
borderWidth: 0,
borderTopWidth: 2,
borderBottomWidth: 2,
borderStyle: "dashed"
}
});
export default Index;
Note: I have design it by BuilderX
Related
I am trying to give shadow to my custom card component but the shadow cuts down the view like this:
Here is my code
import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'
const { width } = Dimensions.get('window')
export default function CardCus() {
return (
<View style={{
justifyContent: 'center', alignItems: 'center', padding: 10
}}>
<View style={styles.container}>
<View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
<Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
</View>
<View style={{ margin: 10, padding: 5 }}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 2,
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: width - 10,
},
title: {
fontWeight: 'bold'
}
}
)
I have tried many different style settings but none of them work. Is there a way to solve this issue? Thanks in advance.
So related to your question, it was hard to understand at first.
I just added the properties zIndex and backgroundColor to the container style and increased the value of the elevation and now it looks better. Also improved the readability.
See the comments in the improved code below:
import React from 'react';
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native';
export default function CardCus() {
const imgUri =
'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940';
return (
<View style={styles.main}>
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: imgUri }} />
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>Title</Text>
<Text>Separator</Text>
<Text>Title</Text>
<Text>Title</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 10, // changed to a greater value
flexDirection: 'row',
borderRadius: 10,
borderColor: 'black',
borderWidth: 1,
height: 110,
width: Dimensions.get('window').width - 10,
zIndex: 99, // added zIndex
backgroundColor: 'white', // added a background color
},
title: {
fontWeight: 'bold',
},
imageContainer: {
width: 110,
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
backgroundColor: 'white',
},
image: {
width: '100%',
height: '100%',
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
},
textContainer: {
margin: 10,
padding: 5,
backgroundColor: 'white',
},
main: {
justifyContent: 'center',
alignItems: 'center',
padding: 10,
},
});
You can adjust the values to make the shadow darker. And this is how it looks:
I'm having a hard time setting some shadow only for the left and right part of a view like this: imgur
I've been trying to work out the properties on react-native-shadow-generator website but to no success. Anyone knows how / if this is possible to be achieved in react-native?
You can do like this:
return (
<View style={styles.mainContainer}>
<View elevation={5} style={styles.boxStyle}>
<Text>Box 1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: '#ebebeb',
padding: 10,
height : height
},
boxStyle: {
backgroundColor: '#fff',
alignItem: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginLeft: 30,
marginTop: 15,
width: 120,
height: 120,
padding: 12,
borderRadius: 8,
shadowColor: "00000",
shadowOpacity: 0.9,
shadowRadius: 4,
shadowOffset: {
height: 2,
width: 2
}
}
});
I am designing custom button in react native through TouchableOpacity. So far I have tried different styling approaches but didn't get like required design. below mentioned is my attempt to solve.
<TouchableOpacity style={styles.numericButton}>
<View>
<Text style={styles.numericButtonText}>1</Text>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
numericButton: {
margin:10,
padding:10,
backgroundColor:'#D3D3D3',
borderColor:'#000',
borderWidth:2,
borderRadius:5,
elevation:10,
shadowOffset: { width: 5, height: 5 },
shadowColor: "black",
shadowOpacity: 1,
shadowRadius: 5,
},
numericButtonText:{
fontSize:24,
fontWeight:'bold',
fontFamily:'Cochin'
}
});
result:
I want to style my react native button like this
We can achieve same type of button with react-native-linear-gradient
👆🏽was achieved with:
<TouchableOpacity>
<LinearGradient
// start={{x: 0.5, y: .5}} end={{x: 1, y: 1.0}}
style={styles.button}
locations={[0.3, 0, 0]}
colors={['#A8AFB5', 'white', 'white']}
>
<Text style={styles.buttonText}>{props.data}</Text>
</LinearGradient>
</TouchableOpacity>
const styles = StyleSheet.create({
button: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: null, height: 81,marginTop:5, borderWidth: 1 },
buttonText: {
//textAlign:'center',
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Cochin',
color: 'black'
}
});
Use following style and use more gradient to set the colors matching the design and check the reflected changes
numericButton: {
alignItems: 'center',
margin: 10,
padding: 10,
backgroundColor: '#D3D3D3',
borderColor: '#000',
borderWidth: 2,
//borderRadius:5,
elevation: 5,
shadowOffset: { width: 5, height: 5 },
shadowColor: 'grey',
shadowOpacity: 1,
shadowRadius: 5,
},
numericButtonText: {
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Cochin',
},
You're good to go!
How to add custom shape buttons , for example a pentagon shaped button on react native application. Any help or input would be appreciated.
Here is one way to achieve it (View Snack):
export class PentagonButton extends Component {
render() {
return (
<TouchableOpacity onPress={() => { }}>
<View style={styles.pentagon}>
<View style={styles.pentagonInner} />
<View style={styles.pentagonBefore} />
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
pentagon: {
backgroundColor: 'transparent'
},
pentagonInner: {
width: 90,
borderBottomColor: 'red',
borderBottomWidth: 0,
borderLeftColor: 'transparent',
borderLeftWidth: 18,
borderRightColor: 'transparent',
borderRightWidth: 18,
borderTopColor: 'red',
borderTopWidth: 50
},
pentagonBefore: {
position: 'absolute',
height: 0,
width: 0,
top: -35,
left: 0,
borderStyle: 'solid',
borderBottomColor: 'red',
borderBottomWidth: 35,
borderLeftColor: 'transparent',
borderLeftWidth: 45,
borderRightColor: 'transparent',
borderRightWidth: 45,
borderTopWidth: 0,
borderTopColor: 'transparent',
}
});
This example is using views in different shapes to build your button. Credit to #browniefed who has made a lot of different shapes here.
Another way to solve it is using React ART wich is a great way of creating shapes in React Native. Here are the unofficial docs.
I am developing a social networking app in react-native. I wanted to know if it is possible to cut <Image> in the way shown in the image:
If yes, can you provide me some example or any hints to implement this.
Reference for android
You could display a white triangle shaped View on top of your image
import React from 'react';
import { StyleSheet, View, Image, Dimensions } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.img} source={require('./images.jpg')} >
<View style={[styles.triangle]} /></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
triangle: {
position: 'absolute',
right: 0,
bottom: 0,
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: Dimensions.get('window').width,
borderRightWidth: 0,
borderBottomWidth: 50,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#fff',
},
img: {
width: Dimensions.get('window').width,
},
});
apply this to your style tag of view,don forgot to import Dimensions from 'react-native'
triangleCorner: {
left:0,
height: 200,
backgroundColor: 'green',
borderStyle: 'solid',
borderLeftWidth:Dimensions.get('window').width,
borderBottomWidth: 80,
borderLeftColor: 'transparent',
borderBottomColor: 'white'
}
very old post but I found one solution, I use inline style for more easy example:
<ImageBackground
style={{
left: 0,
width: Dimensions.get('window').width - 10,
height: 220,
justifyContent: 'center', alignSelf: 'center'
}}
source={{ uri: header.banner }}></ImageBackground>
<View style={{
position: 'absolute',
right: 0,
bottom: 0,
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: Dimensions.get('window').width,
borderLeftWidth: 0,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#fff',
}} />