Issue
Folks I am following a design that have:
image and the bottom navbar have that unique background, I am wondering how to make it in react native or what exactly is that background name?
The difficulties are: getting the background to be like the design
what I accomplished are: getting design right until bottom navbar
my question: how to make it in RN or where can I search for a solution?
Thanks in advance !
<Tab.Navigator
initialRouteName="home"
screenOptions={{
tabBarShowLabel: false,
headerShown: false,
tabBarStyle: {
backgroundColor:
"radial-gradient(circle, rgba(6,12,28,1) 0%, rgba(121,164,193,1) 53%, rgba(177,207,240,1) 100%)",
position: "absolute",
elevation: 0,
opacity: 0.9,
height: heightscale(70),
alignItems: "center",
borderRadius: 20,
shadowColor: "#000",
bottom: heightscale(20),
padding: moderateScale(10),
justifyContent: "center",
marginHorizontal: moderateScale(20),
},
}}
>
<Tab.Screen
name="home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ alignItems: "center", justifyContent: "center" }}>
{focused ? (
<Homeiconsolid size={30} color={"#2683f1"} />
) : (
<HomeIcon size={30} color={focused ? "#2683f1" : "#748c94"} />
)}
</View>
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ alignItems: "center", justifyContent: "center" }}>
{focused ? (
<Searchiconsolid size={30} color={"#2683f1"} />
) : (
<MagnifyingGlassIcon
size={30}
color={focused ? "#2683f1" : "#748c94"}
/>
)}
</View>
),
}}
/>
<Tab.Screen
name="Favorite"
component={Bookmark}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ alignItems: "center", justifyContent: "center" }}>
{focused ? (
<Bookmarkiconsolid
size={30}
color={focused ? "#2683f1" : "#748c94"}
/>
) : (
<BookmarkIcon size={30} color={focused ? "#2683f1" : "#748c94"} />
)}
</View>
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ alignItems: "center", justifyContent: "center" }}>
{focused ? (
<Usericonsolid size={30} color={"#2683f1"} />
) : (
<UserIcon size={30} color={focused ? "#2683f1" : "#748c94"} />
)}
</View>
),
}}
/>
</Tab.Navigator>;
Solution
The blurry effect in the bottom navigation bar can be achieved by using a package @react-native-community/blur
.
https://www.npmjs.com/package/@react-native-community/blur
I was able to achieve it in one of my projects and it looks like this in action.
Note: This package can not be applied directly to your Tab navigation.
To be able to use this package, you need to create a main screen which will render other screens on state change and hide them if the state returns false.
<View>
{screenSelection?.home === true ? <Home /> : null}
{screenSelection?.goal === true ? <Goals /> : null}
{screenSelection?.account === true ? <Account /> : null}
{screenSelection?.notification === true ? <Notifications /> : null}
</View>
To add the blur effect to your screen, use BlurView
like this,
<View style={styles.bottomBarStyle}>
<BlurView
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
}}
blurType="light"
blurAmount={6}
reducedTransparencyFallbackColor="white"
/>
<TouchableOpacity
style={styles?.bottomTabStyle}
onPress={() => handleScreenSelection("home")}
>
<Image
resizeMode={"contain"}
source={
screenSelection?.home === true
? require("../../images/home_selected.png")
: require("../../images/home_faded.png")
}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles?.bottomTabStyle}
onPress={() => handleScreenSelection("target")}
>
<Image
resizeMode={"contain"}
source={
screenSelection?.goal === true
? require("../../images/target_selected.png")
: require("../../images/target_faded.png")
}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles?.bottomTabStyle}
onPress={() => handleScreenSelection("notification")}
>
<Image
resizeMode={"contain"}
source={
screenSelection?.notification === true
? require("../../images/bell_selected.png")
: require("../../images/bell_faded.png")
}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles?.bottomTabStyle}
onPress={() => handleScreenSelection("account")}
>
<Image
resizeMode={"contain"}
source={
screenSelection?.account === true
? require("../../images/profile_selected.png")
: require("../../images/profile_faded.png")
}
/>
</TouchableOpacity>
</View>;
Everything above the BlurView
will be blurred, so we will create a view and provide styling to it according to the UI design. Components below the BlurView
will be rendered correctly over the blurred component.
Answered By - Vibhor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.