Attempting to hide/show the bottom navigation bar on React-Native app
When wrapping the navigation tab With <Animated.view> the navigation styling collapses and the bottom tab bar jumps to the top of the screen and requires much styling to put it back to to place.
Using React-Native-Reanimated is there a way to animate the bottom tab appearance?
Working example:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
...
const Tab = createBottomTabNavigator();
...
<Tab.Navigator tabBarStyle: {
display: tabBarVisability,>
...
</Tab.Navigator>
Desired:
<Animated.View>
<Tab.Navigator>
</Tab.Navigator>
</Animated.View>
As suggested by Abe, the solution was to add the tabBar prop, wrapping the BottomTabBar with Animated.View
This is a working example:
import Animated, { FadeInUp, FadeOutDown, Layout } from 'react-native-reanimated';
import { BottomTabBar, createBottomTabNavigator } from '#react-navigation/bottom-tabs';
...
<Tab.Navigator
...props
tabBar={(props) => (
<Animated.View
entering={FadeInUp}
exiting={FadeOutDown}
layout={Layout.duration(100)}
style={{
height: tabBarVisible ? 80 : 0,
}}
>
<BottomTabBar {...props} />
</Animated.View>
)}
...Screens
</Tab.Navigator>
Related
I have a question about a card stack inside a modal stack as illustrated in the attached image.
So, just to repeat what I wanted to do. I have a screen with the option presentation: 'modal' that opens the green modal.
Inside that green modal, I have a button that should invoke a navigation call that should show the blue screen with option presentation: 'card' and the ability to go back to the green screen.
I have done something similar with the react-native-navigation library from WIX but I have no idea if that can be done with react-navigation.
Any help is much appreciated.
Cheers
I found the solution with Nesting navigators as described here
Basically, I created a ModalStack and used this stack in Screen component as shown below.
import React from 'react'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import { TransitionPresets } from '#react-navigation/stack'
import HomeView from '../screens/HomeView'
import ModalView from '../screens/ModalView'
import CardView from '../screens/CardView'
const RootStack = createNativeStackNavigator()
const ModalStack = createNativeStackNavigator()
const ModalStackView = () => (
<ModalStack.Navigator
screenOptions={{
headerShown: true,
}}>
<ModalStack.Screen
name="modalCard1"
component={ModalView}
options={{
presentation: 'modal'
}}
/>
<ModalStack.Screen
name="modalCard2"
component={CardView}
options={{
presentation: 'card'
}}
/>
</ModalStack.Navigator>
)
const Stacks = () => (
<RootStack.Navigator
screenOptions={{
headerShown: false,
}}>
<RootStack.Screen name="home" component={HomeView} />
<RootStack.Screen
name="modal"
component={ModalStackView}
options={{
presentation: 'modal'
}}
/>
</RootStack.Navigator>
)
export default Stacks
Here the Snack with the full code
My HomeHeader component is like this:
import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";
export default function HomeHeader({ navigation }) {
return (
<View style={styles.home_header}>
<Icon
style={styles.menu}
name="bars"
size={30}
color="white"
onPress={navigation.toggleDrawer()}
/>
<Image
style={styles.header_logo}
source={require("../assets/logo.png")}
/>
<Text>Hello</Text>
</View>
);
}
And am using it in my Home screen like this:
return (
<View>
<HomeHeader navigation={navigation} />
</View>
)
But am receiving this error message:
Warning: Cannot update a component from inside the function body of a
different component.
What am trying to do is, I have separated out the header section of my HOME screen into a separate component called HomeHeader. And in this component, am attaching the event handler to toggle the opening/closing of the DrawerNavigation (left side drawer menu)
If I create a Button in my HOME screen and add the event handler to toggle the drawer, it works fine. But the issue happens only if I try this from inside my HomeHeader component.
Btw, am using ReactNavigation v5 and I even tried this method: https://reactnavigation.org/docs/connecting-navigation-prop/
No luck so far.
Change onPress={ navigation.toggleDrawer() } to onPress={ ()=> navigation.toggleDrawer() }
You can read more about this in here
I have been researching this for days after days and still didn't get what I want.
I don't even know why this has not been raised yet..
For example, if you use
const Tab = createMaterialTopTabNavigator();
from #react-navigation/material-top-tabs
export class TopTab extends React.Component {
render() {
return (
<Tab.Navigator
swipeEnabled={false}
tabBar={(props) => <CustomTabBar {...props} />}
>
<Tab.Screen name="First" component={FirstView} />
<Tab.Screen name="Second" component={SecondView} />
<Tab.Screen name="Third" component={ThirdView} />
</Tab.Navigator>
);
}
export class FirstView extends React.Component {
render() {
return (
<ScrollView horizontal>
.... contents
</ScrollView>
);
}
then ScrollView horizontal swipe won't work within these Views.
what I've tried:
swipeEnabled=true
nestedScrollViewEnabled=true
Is there any known solution to this?
I've tried pager option to customize ViewPaging with react-native-community/viewpager, still no luck.
Please help!
Ah, feels stupid now. The problem wasn't actually neither ScrollView nor Navigator.
It was Touchable components masking scrolling behaviour.
I am using react navigation v5 to create my modal.
I want my modal to show in the beginning of 50% height, and when I press a button I want my modal to have 100% height. And toggle 50% to 100% to 50% back and forth.
However, I am unsure how to do this.
My code looks something like this.
Navigation
render(){
return (
<NavigationContainer>
<RootStack.Navigator mode="modal" headerMode = "none">
<RootStack.Screen name="home" component = {Home} />
<RootStack.Screen name="modala" component={ModalA}
options={{cardStyle: {backgroundColor: "transparent"}}}/>
</RootStack.Navigator>
</NavigationContainer>
);
}
As you can see I want my modalA to overlap Home component in the beginning as 50% width and if i press a button inside ModalA, I want my modal to be 100%. Is this possible?
Yes, its possible. To show the modal on the initial screen you must create this Modal Component on that screen
e.g
import React, { Component, useState } from 'react';
import {View, Text} from 'react-native';
import Modal from "react-native-modal";
const Home = (props) => {
const [height, setHeight] = useState('50%');
return (
<View>
<Modal isVisible={true}>
<View style={{ height, width: "80%", justifyContent: 'center', alignItems: 'center'}}>
<Text>I am the modal content!</Text>
<TouchableOpacity onPress={() => setHeight("50%")}>
<Text>Set 50% Height</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setHeight("100%")}>
<Text>Set 100% Height</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
);
}
Current Behavior
My code:
class App extends Component {
render() {
return <Drawer /> {/* rigid scrolling effect */}
return <Stack /> {/* smooth scrolling effect if I comment above return statement */}
}
}
const Drawer = DrawerNavigator({
Feed: { screen: Feed }
})
const Stack = StackNavigator({
Feed: { screen: Feed }
})
And Feed component's render is just a bunch of lines:
render() {
return <View style={{flex:1}}>
<ScrollView>
<Text>random line...</Text>
// .. more lines to make it scrollable
</ScrollView>
</View>
}
Expected Behavior
The expected behavior is to get smooth scrolling effect in both cases. However, DrawerNavigator screen's scrolling effect is extremely rigid. When I swipe my finger quickly from up to down, it doesn't keep scrolling smoothly automatically like it should in Stacknavigator example.
How to reproduce
Create App.js file above and create a simple Feed.js component which has a bunch of lines to make ScrollView work.
Can anybody help?
Update: Live demonstration: https://snack.expo.io/Hk8Np7nPG
Try this
render() {
return (
<View style={{flex:1}}>
<ScrollView>
<View>
{Your Contnet}
</View>
</ScrollView>
</View>
)}
it is worked for me...
hope it'll also worked for you
You can Use NativeBase with standard tabs Container and Contet (like ScrollView ) Header and...
first try :
npm install native-base --save
then:
npm i
react-native link
and here is your full example code:
import React, { Component } from 'react';
import { Content , View , Text } from 'native-base'; //don't need import 'react-native' components
export default class GeneralExample extends Component {
render() {
return (
<Content >
<View>
{Your Contnet}
</View>
</Content>
)}
}
and if you wanna change the speed just ScrollView try:
<ScrollView decelerationRate={0.5}>
<View/>
</ScrollView>
in NativeBase Use THIS LINK