Vikram Ganesan
Reputation: 53
React Navigation animation still showing when animationEnabled prop is set to false
I was creating a bottom tab bar without using the react-native-navigation built-in one and I wanted to disable the left and right slide animation. First I tried using the animationEnabled prop but it does not seem to do anything. I also tried to use timing and set the duration to 0 but it hasn't worked either. What am I doing wrong?
RootStack.js
// import react navigation
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// import screens
import Login from '../screens/Login';
import Signup from '../screens/Signup';
import Welcome from '../screens/Welcome';
import AccountScreen from '../screens/AccountScreen';
import NewsScreen from '../screens/NewsScreen';
import SearchScreen from '../screens/SearchScreen';
import TrendingScreen from '../screens/TrendingScreen';
import TabBarComponent from '../components/TabBarComponent';
// Colors
import {Colors} from '../components/styles';
const{brand, darkLight, primary, tertiary } = Colors;
import React, {useState} from 'react';
const Stack = createNativeStackNavigator();
const ArrowStack = () => {
return(
<NavigationContainer>
<Stack.Navigator
timingConfig={{
duration: 0,
}}
screenOptions={{
animationEnabled: false,
headerShown: true,
headerStyled: {
backgroundColor: 'transparent',
elevation: 0
},
headerShadowVisible: false,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle:{
paddingLeft:20
}
}}
initialRouteName="Login"
>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="Account" component={AccountScreen} />
<Stack.Screen name="Search" component={SearchScreen} />
<Stack.Screen name="Trending" component={TrendingScreen} />
<Stack.Screen name="News" component={NewsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default ArrowStack;
Welcome.js
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Pressable, TouchableOpacity } from 'react-native';
import TabBarComponent from '../components/TabBarComponent';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer
} from './../components/styles'
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
// Colors
const{brand, darkLight, primary} = Colors;
const Welcome = ({ navigation }) => {
return(
<>
<StatusBar style="light"/>
<InnerContainer>
<WelcomeContainer>
<PageTitle welcome={true}>Welcome! Buddy</PageTitle>
<SubTitle welcome={true}>Olga Simpson</SubTitle>
<SubTitle welcome={true}>[email protected]</SubTitle>
<StyledFormArea>
<Line />
<StyledButton onPress={() => {
navigation.navigate("Login");
}}>
<ButtonText>
Logout
</ButtonText>
</StyledButton>
</StyledFormArea>
<TabBarContainer>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
}}>
<News/>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
}}>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
}}>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
}}>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
}}>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainer>
</WelcomeContainer>
</InnerContainer>
</>
);
}
export default Welcome;
NewsScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const NewsScreen = ({navigation}) => {
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
News Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
}
export default NewsScreen;
AccountScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const AccountScreen = ({navigation}) => {
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
Account Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
}
export default AccountScreen;
SearchScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const SearchScreen = ({navigation}) => {
return(
<InnerContainer>
<WelcomeContainer>
<><View>
<Text>
Search Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</WelcomeContainer>
</InnerContainer>
);
}
export default SearchScreen;
TrendingScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const TrendingScreen = ({navigation}) => {
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
Trending Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
}
export default TrendingScreen;
package.json
{
"name": "frfr",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/datetimepicker": "3.5.2",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"expo": "~43.0.0",
"expo-status-bar": "~1.1.0",
"formik": "^2.2.9",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1",
"styled-components": "^5.3.3",
"react-native-svg": "12.1.1"
},
"devDependencies": {
"@babel/core": "^7.12.9"
},
"private": true
}
Upvotes: 1
Views: 3939
Answers (2)
AmerllicA
Reputation: 32522
I just updated the @react-navigation packages from 5.x to 6.x and the animationEnabled option key got disappeard everywhere. It means no matter if it's Stack.Navigator or Stack.Screen, to turn the animation off it should be written like the following:
<Stack.Screen
name={SCREEN.CONTACT_SEARCH_SCREEN}
component={ContactSearchScreen}
options={{
gestureEnabled: false,
animation: 'none' // <==== LIKE HERE
}}
/>
Upvotes: 0
Delorfindel
Reputation: 86
As you are using a NativeStackNavigator, you shouldn't use animationEnabled but animation instead.
List of supported values : https://reactnavigation.org/docs/native-stack-navigator#animation
options = {
{
animation: 'none',
}
}
Upvotes: 7
Related Questions
- react-navigation: disable modal animation
- Change the default animation of navigation in react native
- React Native Native-Stack: disable transition animation on iOS
- Disable animation for a custom header in React Navigation
- How do i skip the animation only replace with react-navigation
- How do I prevent react-navigation from showing a transition animation during StackAction.reset?
- react native animated not working when called from navigation header
- Turn off Push Animation When Use React Native Navigation V2
- React Navigation disables Animated API?
- React Native: Disabling scene transitions in NavigationExperimental