I am trying to create notification screen and I have an icon in the app bar. For the header, I am using "react-native-flat-header". Everything is working fine but on the press of notification icon I need to open a box that will show the list of notifications.
I am trying to show the box screen but it's not showing out of my header component.
I need to design
Here is my header component:
<FlatHeader
<View style={styles.notification}>
<View style={styles.triangle}/>
</View>
/>
notification:{
right: 70,
top:20
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 10,
borderRightWidth: 10,
borderBottomWidth: 20,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'red',
//position:'absolute',
zIndex: 1,
position: 'absolute'
},
Related
My goal is to render an image with a shadow, I usually generate my shadows using this website: https://ethercreative.github.io/react-native-shadow-generator/
I tried this and it works fine in iOS but I cannot see any shadow in android, this website automatically generates with the elevation property so I don't know what the issue is, here is my code:
Main js file
<View style={styles.coverImageContainer}>
<Image
source={{
uri: coverUrl,
}}
style={styles.coverImage}
/>
</View>
Styles
coverImageContainer: {
shadowColor: '#000',
backgroundColor: 'transparent',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.32,
shadowRadius: 5.46,
elevation: 9,
},
coverImage: {
height: 243,
width: 150,
marginTop: '5%',
alignSelf: 'center',
resizeMode: 'cover',
borderRadius: 4,
},
Any help would be appreciated,
Thanks
The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.
The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".
How can we blur a Text component in React Native?
Info: I just want to make an app where the user does not see the answer directly (via blurring).
If you don't want to install react-native-blur / expo-blur or it's not working for you, this is a workaround/hack that mimics the look of blurred text in a View. The values can be adjusted as necessary.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
Install react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...
You can simply use css to do it, feel free you change the amount of opacity, offset, color, radius as your requirement
<Text
style={{
color: "#fff0",
textShadowColor: "rgba(255,255,255,0.8)",
textShadowOffset: {
width: 0,
height: 0,
},
textShadowRadius: 10,
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
}}
>
Blurred
</Text>
Using react-navigations - createBottomTabNavigator, im trying to push the icons down a bit but its getting cut off and im not sure as to why.
Is there a way to fix this by any chance? or if you could direct me to some info about this.
The icon style is below:
<Icon
name="heart"
color={tintColor}
size={28}
style={{ marginTop: '20' }}
/>
And heres the tab bar options:
tabBarOptions: {
showLabel: false,
activeTintColor: '#e91e63',
indicatorStyle: {
height: 100
},
style: {
position: 'absolute',
backgroundColor: 'transparent',
height: 50,
width: DEVICE_WIDTH * 0.94,
borderTopColor: 'transparent',
borderBottomLeftRadius: 33,
borderBottomRightRadius: 33,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
bottom: 0,
margin: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0.3
},
shadowRadius: 5,
shadowOpacity: 0.1
},
tabStyle: {}
}
Many thanks in advance
Thanks for Samitha, had to set the icon height:
<Icon
name="heart"
color={tintColor}
size={28}
style={{ marginTop: 30 , height: 28 }}
/>
The bottom of the iPhone X is reserved for the home swipe bar
react-navigation like allot of other libraries implement the new SafeAreaView or add their own padding to the bottom of the iPhone X to stop you from putting content in that zone.
It's unlikely your buttons will work properly if placed that low so there's not much you can do here.
I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.
I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks
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.