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}>johndoe@email.com</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
}
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',
}
}