I am want to float my home icon above the tab bar but it gets cut can someone suggest how to do that.. aim also attaching the screenshot and navigation stack structure
stack navigation
-1. drawer nav
-a. Tab nav
position: 'absolute',
bottom: 20,
height: 58,
width: 58,
borderRadius: 58,
backgroundColor: colors.primaryColor,
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
flex: 1,
Did you try to play with the zIndex property of each of the component ?
or maybe the overflow property ?
... hard to say without having a look at the code structure.
Another solution would be to build a component for the button you want to overlap.
Related
I need to add a blur effect on a text.
If I were using React, I would use the filter css property.
But I can't find the equivalent syntax to use it in a React native stylesheet.
How do i need to write it ?
you can install react-native-blur / expo-blur
If it's not working for you, this is a workaround/hack that clones the look of blurry text. You can adjust the values to your liking.
<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)"
}}
/>
tabbarnavigator
I want to create a tab bar navigator like the one in the image, but everything I've seen online does not accomplish this task. Any advice is appreciated
You can build it custom using the tabBar property, which allows passing in a component to use for the entire tab bar:
https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar
The docs above provide a good example of an entirely custom tab bar.
I figured out a way to do it using this example example
I had to add a few extra lines (below) to make it look like the image
<Tab.Navigator
screenOptions={{
tabBarActiveBackgroundColor: "#ECECEB",
tabBarInactiveBackgroundColor: "#ECECEB",
tabBarActiveTintColor: "#B6A158",
tabBarInactiveTintColor: "#6880D7",
tabBarStyle: {
backgroundColor: '#ECECEB',
borderRadius: 16,
overflow: 'hidden',
bottom: 5,
height: 64,
borderTopColor: "#ECECEB",
width: 333,
position: "absolute",
left: "10%",
},
tabBarItemStyle: {
height: 54,
backgroundColor: '#ECECEB',
borderRadius: 16,
top: 4,
marginHorizontal: 3,
borderTopColor: "#ECECEB",
width: 117,
}
}}
>
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>
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'
},
I use react-native-elements, and they make it easy to make an actual button appear "raised", or shadowed. I want to duplicate this look for TouchableOpacity.
Here's an example of the "raised buttons" with react-native-elements.
It is subtle, but noticeably makes a nice impact.
How would you go about mimicking this effect with TouchableOpacity?
And yes, I've gone through the docs. If I missed anything, please point it out... but I don't think anything is there to accomplish this. Thanks.
You can add the following styles to your TouchableOpacity to make it raised.
<TouchableOpacity style={styles.button} />
button: {
shadowColor: 'rgba(0,0,0, .4)', // IOS
shadowOffset: { height: 1, width: 1 }, // IOS
shadowOpacity: 1, // IOS
shadowRadius: 1, //IOS
backgroundColor: '#fff',
elevation: 2, // Android
height: 50,
width: 100,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
You can read more about them here.
IOS Specific Props
Android Specific Props