(please forgive me if I don't speak English correctly)
I am a beginner and have developed an android application on react native with the use of expo.
type hereimport React, { useState, useEffect, useLayoutEffect } from 'react';
import * as firebase from 'firebase';
import { View, Text, FlatList, StyleSheet, Modal } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { auth, db } from '../firebase';
import { AntDesign, Ionicons } from '#expo/vector-icons';
import { Input, Button, Avatar } from 'react-native-elements';
const FeedScreen = ({ navigation }) => {
const [posts, setPosts] = useState([]);
const [addpost, setAdd] = useState(false);
const [postText, setPostText] = useState('');
const likes = 0;
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity>
<AntDesign
onPress={() => setAdd(true)}
name="pluscircleo"
size={27}
color="black"
/>
</TouchableOpacity>
),
});
}, []);
useEffect(() => {
const unsubscribe = db
.collection('posts')
.orderBy('createdAt', 'desc')
.onSnapshot((querySnapshot) => {
const newPosts = [];
querySnapshot.forEach((doc) => {
newPosts.push({
id: doc.data().id,
createdAt: doc.data().createdAt,
text: doc.data().text,
author: doc.data().author,
});
});
setPosts(newPosts);
});
}, []);
const onAddButtonPress = () => {
const timestamp=firestore.FieldValue.serverTimestamp();
setAdd(false);
const data = {
createdAt: timestamp,
text: postText,
id: auth?.currentUser?.email,
author: auth?.currentUser?.displayName,
};
const unsubscribe = db
.collection('posts')
.add(data)
.then((_doc) => {
setPostText('');
Keyboard.dismiss();
});
};
const postItem = ({ item, index }) => {
return (
<View style={styles.postview}>
<View
style={{
borderBottomWidth: 2,
borderBottomColor: '#E2E2E2',
flex: 1,
flexDirection: 'row',
}}>
<Avatar
size={40}
rounded
title={item.author.substr(0, 1)}
containerStyle={{ backgroundColor: '#6733b9' }}
/>
<Text style={styles.autor}>{item.author}</Text>
</View>
<View>
<Text style={styles.txt}>{item.text}</Text>
</View>
</View>
);
};
return (
<View>
<Modal visible={addpost}>
<View>
<Ionicons name="close" size={40} onPress={() => setAdd(false)} />
<Text style={styles.txt2}>Add Post</Text>
<View style={styles.form}>
<Input
placeholder="Enter post text"
value={postText}
onChangeText={(text) => setPostText(text)}
/>
<Button title="Add" onPress={onAddButtonPress} />
</View>
</View>
</Modal>
<FlatList
data={posts}
renderItem={postItem}
keyExtractor={(item) => item.id}
/>
</View>
);
};
const styles = StyleSheet.create({
postview: {
marginBottom: 10,
paddingVertical: 'auto',
backgroundColor: 'white',
borderRadius: 30,
},
autor: {
fontSize: 18,
//marginHorizontal: 40,
marginTop: 7,
},
txt: {
marginTop: 20,
fontSize: 17,
marginHorizontal: 40,
marginBottom: 20,
},
txt2: {
marginHorizontal: 'auto',
fontSize: 40,
marginTop: 20,
},
form: {
paddingTop: 80,
},
ava: {
marginHorizontal: 40,
marginTop: 20,
},
});
export default FeedScreen;
This is the code of the page where the app crashes. Posts are displayed here, and there is also a button to add them.Clicking on the button brings up a modal window with the form.When I click the add button, the attachment crashes, that is, when I call onAddButtonPress
please forgive me if I don't know how to ask a question
Here's the package.json and app.js code:
"dependencies": {
"#expo/vector-icons": "^13.0.0",
"#firebase/auth": "^0.21.0",
"#react-navigation/bottom-tabs": "^6.5.3",
"#react-navigation/native": "^6.1.2",
"#react-navigation/stack": "^6.3.11",
"eas-cli": "^3.3.2",
"expo": "~47.0.12",
"expo-cli": "^6.1.0",
"expo-status-bar": "~1.4.2",
"expo-updates": "^0.15.6",
"firebase": "^8.9.1",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.8.0",
"react-native-paper": "^5.1.3",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "~3.18.0",
"react-native-web": "~0.18.7"
},
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ProfileScreen from './screens/ProfileScreen';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer, DarkTheme } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import {
Feather,
AntDesign,
Ionicons,
MaterialIcons,
} from '#expo/vector-icons';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import FeedScreen from './screens/FeedScreen';
import SettingsScreen from './screens/SettingsScreen';
import { Provider as PaperProvider, DarkTheme as Dark} from 'react-native-paper'
export default function App() {
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function Home() {
return (
<Tab.Navigator screenOptions={{contentStyle:{ backgroundColor:'#E5E7E6'}}}>
<Tab.Screen
name="Feeds"
component={FeedScreen}
options={{
tabBarLabel: 'Feeds',
tabBarIcon: ({ color }) => (
<MaterialIcons name="dynamic-feed" size={24} color="grey" />
),
//headerStyle:{backgroundColor: '#f4511e'}
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={24} color="grey" />
),
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarLabel: 'Settings',
tabBarIcon: ({ color }) => (
<Feather name="settings" size={24} color="grey" />
),
}}
/>
</Tab.Navigator>
);
}
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I read articles about crashes, ran on different devices
Related
Since i've made the update of the expo SDK to the sdk 47 and update of all the modules, i've lost all my TV navigation. In fact the focus doesn't work anymore.
I've checked all the code, I don't see any problem. There is no problem on the debugger. I'm quite lost.
Can you help me please.
This is my App.js
import React, {useContext, useEffect} from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import {Context as AuthContext, Provider as AuthProvider} from './context/authContext';
import {Context as UserContext, Provider as UserProvider} from './context/userContext';
import {GlobalizeProvider, loadCldr, loadMessages} from 'react-native-globalize';
import { globalizeRef } from './services/Globalize';
import * as fr from './locales/fr.json';
import * as en from './locales/en.json';
import LoginScreen from "./screens/LoginScreen";
import BroadcastScreen from "./screens/BroadcastScreen";
import AnimatorListScreen from "./screens/AnimatorListScreen";
import SettingsScreen from "./screens/SettingsScreen";
import EntrantScreen from "./screens/EntrantScreen";
import SplashScreen from "./screens/SplashScreen";
loadCldr(
require('react-native-globalize/locale-data/fr'),
require('react-native-globalize/locale-data/en'),
);
loadMessages({fr, en});
const Stack = createStackNavigator();
const Animator = createStackNavigator();
const AnimatorStack = () => {
return (
<Animator.Navigator initialRouteName="List" screenOptions={{headerShown: false}}>
<Animator.Screen name="List" component={AnimatorListScreen} />
<Animator.Screen name="Broadcast" component={BroadcastScreen} options={{ headerShown: false }} />
<Animator.Screen name="Settings" component={SettingsScreen} />
</Animator.Navigator>
)
}
const Entrant = createStackNavigator();
const EntrantStack = () => {
return (
<Entrant.Navigator initialRouteName="Enter" screenOptions={{headerShown: false}}>
<Entrant.Screen name="Enter" component={EntrantScreen} options={{ headerShown: false }} />
<Entrant.Screen name="Settings" component={SettingsScreen} />
</Entrant.Navigator>
)
}
const App = () => {
const {state: authState, restoreInfos} = useContext(AuthContext);
const {state: userState, restoreLanguage} = useContext(UserContext);
useEffect(() => {
restoreInfos();
restoreLanguage();
}, []);
return (
(authState.loading || !userState.language) ?
// We haven't finished checking for the token yet
<Stack.Screen name="Splash" component={SplashScreen} /> :
<GlobalizeProvider ref={globalizeRef} locale={userState.language}>
<NavigationContainer>
<Stack.Navigator>
{(authState.token == null || authState.userType == null) ?
<Stack.Screen name="SignIn" component={LoginScreen} options={{ headerShown: false }} /> :
authState.userType === 'showman' ?
<Stack.Screen name="Showman" component={AnimatorStack} options={{ headerShown: false }} /> :
<Stack.Screen name="Entrant" component={AnimatorStack} options={{ headerShown: false }} />
}
</Stack.Navigator>
</NavigationContainer>
</GlobalizeProvider>
);
}
export default () => {
return (
<AuthProvider>
<UserProvider>
<App />
</UserProvider>
</AuthProvider>
)
}
And one of my screen :
import React, {useContext, useEffect, useRef, useState} from 'react';
import {Animated, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {Context as UserContext} from "../context/userContext";
import WebView from "react-native-webview";
import {LongPressGestureHandler, State as gestureState} from 'react-native-gesture-handler';
import {useGlobalize} from "react-native-globalize";
import {Ionicons} from '#expo/vector-icons';
import {useNavigation} from "#react-navigation/native";
import Colours from "../constants/Colours";
import Loader from "../components/Loader";
const EntrantScreen = () => {
const navigation = useNavigation();
const {formatMessage} = useGlobalize();
const {state: userState, getChosenAnimation} = useContext(UserContext);
const [reload, setReload] = useState(0);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
getChosenAnimation().finally(() => {
setLoading(false);
});
}, [reload]);
const reloadNow = () => {
setReload(reload + 1);
}
const goToSettings = () => {
navigation.navigate('Settings');
}
const opacityHandler = useRef(new Animated.Value(0)).current;
const fadeIn = () => {
// Will change fadeAnim value to 1 in 5 seconds
Animated.timing(opacityHandler, {
toValue: 1,
duration: 500,
useNativeDriver: true
}).start();
setTimeout(() => {
Animated.timing(opacityHandler, {
toValue: 0,
duration: 500,
useNativeDriver: true
}).start();
}, 3000);
};
const runFirst = "window.oncontextmenu = function(event) {\n" +
" event.preventDefault();\n" +
" event.stopPropagation();\n" +
" return false;\n" +
"};" +
"document.onselectstart = new Function (\"return false\");" +
"document.documentElement.style.property = 'user-select:none;';" +
"document.getElementsByClassName('aha-footer')[0].remove();";
return (
<View style={styles.mainView}>
{loading && <Loader />}
{ userState.chosenAnimation &&
<View style={styles.mainView}>
<LongPressGestureHandler
minDurationMs={5000}
onHandlerStateChange={({nativeEvent}) => {
if (nativeEvent.state === gestureState.ACTIVE) {
fadeIn();
}
}}>
<View style={styles.actionCaller}><></></View>
</LongPressGestureHandler>
<Animated.View style={{...styles.actionButtonHandler, opacity: (opacityHandler || 0)}}>
<TouchableOpacity onPress={() => reloadNow()}>
<Ionicons style={{color: Colours.bleu}} name="reload" size={48} />
</TouchableOpacity>
<TouchableOpacity onPress={() => goToSettings()}>
<Ionicons style={{color: Colours.bleu}} name="settings-outline" size={48} />
</TouchableOpacity>
</Animated.View>
<WebView
style={styles.container}
source={{uri: userState.chosenAnimation.entrant_link}}
injectedJavaScript={runFirst}
/>
</View>
}
{!loading && !userState.chosenAnimation &&
<View style={styles.viewNoAnim}>
<Text style={styles.textNoAnim}>{formatMessage('noChosenAnim')}</Text>
<View style={styles.viewIconsNoAnim}>
<TouchableOpacity style={styles.iconsNoAnim} onPress={() => reloadNow()}>
<Ionicons style={{color: Colours.bleu}} name="reload" size={48} />
</TouchableOpacity>
<TouchableOpacity style={styles.iconsNoAnim} onPress={() => goToSettings()}>
<Ionicons style={{color: Colours.bleu}} name="settings-outline" size={48} />
</TouchableOpacity>
</View>
</View>
}
</View>
)
}
const styles = StyleSheet.create({
mainView: {
flex: 1
},
actionCaller: {
width: 50,
height: 80,
position: 'absolute',
left: 0,
top: 0,
backgroundColor: 'transparent',
zIndex: 2,
opacity: 0.1
},
actionButtonHandler: {
width: 80,
height: '100%',
position: 'absolute',
left: 0,
top: 0,
justifyContent: 'space-evenly',
alignItems: 'center',
zIndex: 2
},
viewNoAnim: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
viewIconsNoAnim: {
flexDirection: 'row',
},
iconsNoAnim: {
margin: 10
},
textNoAnim: {
fontSize: 24
}
});
export default EntrantScreen;
Thanks a lot for your help.
I'm using the React NavigationV6 to create a static app for now.
After setting up my Navigation process like this Im having an issue moving to the Home Screen from the Login and Register Screen. And also the Home screen is not rendering the Bottom Tab which is meant to show icons.
I did it this way
package.json
"#react-native-community/masked-view": "^0.1.11",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-bottom-tabs": "^6.0.9",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-confirmation-code-field": "^7.2.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-paper": "^4.11.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~3.10.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6"
App.js
import React from "react";
import RootNavigation from './src/navigation/RootNavigation';
export default function App() {
return (
<RootNavigation/>
);
}
RootNavigation.js
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import AuthNavigation from "./AuthNavigation";
const RootNavigation = () => {
return (
<SafeAreaProvider>
<NavigationContainer>
<AuthNavigation />
</NavigationContainer>
</SafeAreaProvider>
);
};
export default RootNavigation;
AuthNavigation.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
// Screens
import Onboarding from "../screens/Auth/Onboarding";
import Login from "../screens/Auth/Login";
import Register from "../screens/Auth/Register";
import VerifyCode from "../screens/Auth/VerifyCode";
import ForgotPassword from "../screens/Auth/ForgotPassword";
import MainTabNavigation from "../navigation/MainTabNavigation";
const Stack = createStackNavigator();
const AuthNavigation = () => {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Onboarding"
>
<Stack.Screen name="Onboarding" component={Onboarding} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="VerifyCode" component={VerifyCode} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
</Stack.Navigator>
);
};
export default AuthNavigation;
MainTabNavigation.js
import React from "react";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
import HomeStackNavigation from "../navigation/HomeStackNavigation";
import WalletStackNavigation from "../navigation/WalletStackNavigation";
import HistoryStackNavigation from "../navigation/HistoryStackNavigation";
import ProfileStackNavigation from "../navigation/ProfileStackNavigation";
const Tab = createMaterialBottomTabNavigator();
const MainTabNavigation = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#e91e63"
barStyle={{ backgroundColor: "tomato" }}
>
<Tab.Screen
name="Home"
component={HomeStackNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={24} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletStackNavigation}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={black} size={24} />
),
}}
/>
<Tab.Screen
name="History"
component={HistoryStackNavigation}
options={{
tabBarLabel: "History",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell" color={color} size={24} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileStackNavigation}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={24} />
),
}}
/>
</Tab.Navigator>
);
};
export default MainTabNavigation;
HomeStackNavigation.js
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/Home/Home";
import Wallet from "../screens/Home/Wallet/Wallet";
import History from "../screens/Home/History/History";
import Profile from "../screens/Home/Profile/Profile";
const HomeStack = createStackNavigator();
const HomeStackNavigation = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
<HomeStack.Screen name="Wallet" component={Wallet} />
</HomeStack.Navigator>
);
};
export default HomeStackNavigation;
WalletStackNavigation.js
import React from "react";
import { createStackNavigator } from '#react-navigation/stack';
import Wallet from "../screens/Home/Wallet/Wallet";
const WalletStack = createStackNavigator();
const WalletStackNavigation = () => {
return (
<WalletStack.Navigator>
<WalletStack.Screen name="Wallet" component={Wallet} />
</WalletStack.Navigator>
);
};
export default WalletStackNavigation;
Login.js
import React, { useState } from "react";
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
TextInput,
} from "react-native";
const Login = (props) => {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<View style={styles.backButtonContainer}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image
source={require("../../../assets/images/back-arrow.png")}
style={styles.backButton}
/>
</TouchableOpacity>
</View>
<Text style={styles.text}>Let's sign you in!</Text>
<Text style={styles.textTwo}>Welcome back. You've been missed!</Text>
</View>
<View style={styles.registerFormContainer}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={setEmail}
value={email}
placeholder="Email"
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={setPassword}
value={password}
placeholder="Password"
/>
</View>
<TouchableOpacity style={styles.forgotPasswordButton} onPress={() => navigation.navigate("ForgotPassword")}>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</TouchableOpacity>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => props.navigation.navigate("Home")}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.haveAnAccount}>
<Text>
Dont Have an Account?
<Text
style={styles.haveAnAccountText}
onPress={() => props.navigation.navigate("Register")}
>
{" "}
Create One
</Text>
</Text>
</View>
</View>
</View>
);
};
export default Login;
first install Root naviagtion : https://reactnavigation.org/docs/navigating-without-navigation-prop/
import { navigationRef } from './RootNavigation'; // <-- add this
const RootNavigation = () => {
return (
<SafeAreaProvider>
<NavigationContainer
ref={navigationRef} // <-- add this >
<AuthNavigation />
</NavigationContainer>
</SafeAreaProvider>
);
};
In the next step, we define RootNavigation, which is a simple module with functions that dispatch user-defined navigation actions.
// RootNavigation.js
import { createNavigationContainerRef } from '#react-navigation/native';
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
// add other navigation functions that you need and export them
add the screen you want in first stack loaded for example do you want to move in Home screen with root Navigation
add the screen in AuthNavigation
const AuthNavigation = () => {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Onboarding"
>
<Stack.Screen name="Onboarding" component={Onboarding} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="VerifyCode" component={VerifyCode} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
<HomeStack.Screen name="Home" component={Home} /> // <-- add this line
</Stack.Navigator>
);
};
navigate in any js model with example below:
// any js module
import * as RootNavigation from './path/to/RootNavigation.js';
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });
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',
}
}
How to remove the Header from my App? Why is the Header displayed?
I want to remove the title from the Header, since each page has its own title, and that title takes up space from the screens.
I do not understand why it is displayed. I'm following a tutorial and as many times as I go through, I don't see a way to remove this.
I have followed the official documentation, but I cannot get rid of this nonsensical Header.
The navigation is handled from the AppStack.js file and the Header titles displayed are handled from the <Tab.Navigator> <Tab.Screen /> </Tab.Navigator>, but this is really the bottom tabs, and however, they are also displayed in the Header.
I show some image of what I cannot remove
How do I remove this Header which is unnecessary?
I have the correct dependencies:
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-gesture-handler": "^ 1.10.3",
"react-native-onboarding-swiper": "^ 1.1.4",
"react-native-reanimated": "^ 2.2.3",
"react-native-safe-area-context": "^ 3.3.2",
"react-native-screens": "^ 3.8.0",
"react-native-vector-icons": "^ 8.1.0",
"react-native-webview": "^ 11.14.1",
"styled-components": "^ 5.3.3"
AppStack.js
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { createStackNavigator } from '#react-navigation/stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import HomeScreen from '../screens/HomeSreen'
import ChatScreen from '../screens/ChatScreen'
import ProfileScreen from '../screens/ProfileScreen'
import AddPostScreen from '../screens/AddPostScreen'
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const FeedStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Social React Native"
component={HomeScreen}
options={{
headerTitleAlign: 'center',
headerTitleStyle: {
color: '#2e64e5',
fontFamily: 'Kufam-SemiBoldItalic',
fontSize: 18,
},
headerStyle: {
shadowColor: '#fff',
elevation: 0,
},
headerRight: () => (
<View style={{ marginRight: 10 }}>
<FontAwesome5.Button
name="plus"
size={22}
backgroundColor="#fff"
color="#2e64e5"
onPress={() => navigation.navigate('AddPost')}
/>
</View>
),
}}
/>
<Stack.Screen
name="AddPost"
component={AddPostScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#2e64e515',
shadowColor: '#2e64e515',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
<Stack.Screen
name="HomeProfile"
component={ProfileScreen}
options={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#fff',
shadowColor: '#fff',
elevation: 0,
},
headerBackTitleVisible: false,
headerBackImage: () => (
<View style={{ marginLeft: 15 }}>
<Ionicons name="arrow-back" size={25} color="#2e64e5" />
</View>
),
}}
/>
</Stack.Navigator>
)
const ProfileStack = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
const AppStack = () => {
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Chat') {
return false;
}
return true;
}
return (
<Tab.Navigator
screenOptions={{
activeTintColor: '#2e64e5'
}}>
<Tab.Screen
name="Home"
component={FeedStack}
options={({ route }) => ({
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
<Tab.Screen
name="Profile"
component={ProfileStack}
options={{
// tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
)
}
export default AppStack
IMAGES:
you can add options={{ headerShown: false }}
<Tab.Screen
name="Messages"
component={ChatScreen}
options={({ route }) => ({
headerShown: false,
tabBarVisible: getTabBarVisibility(route),
tabBarIcon: ({ color, size }) => (
<Ionicons
name="chatbox-ellipses-outline"
color={color}
size={size}
/>
),
})}
/>
I need to use navigation when pressing the bag icon in the header. When I press it, I get the following error:
undefined is not an object (evaluating '_this.props.navigation')
The thing is I need to use it inside a Stack.Screen component, but props.navigation always return undefined.
App.js file:
import React, { Component } from 'react';
import {
Button,
Text,
TextInput,
View,
StyleSheet,
TouchableOpacity,
Image,
} from 'react-native';
import { Header } from 'react-navigation-stack';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import TelaInicial from './components/telaInicial';
import TelaCarrinho from './components/telaCarrinho';
const Stack = createStackNavigator();
export default function AppContainer() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Inicial">
<Stack.Screen
name="Inicial"
component={TelaInicial}
options={{
title: '',
headerTintColor: 'white',
headerStyle: { backgroundColor: '#6b39b6', height: 100 },
height: Header.height,
headerLeft: null,
headerTitle: (
<View>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate('Carrinho');
}}>
<Image
style={{
width: 29,
height: 29,
marginTop: 0,
marginLeft: 170,
}}
source={require('./assets/shopping bag.png')}
/>
</TouchableOpacity>
</View>
),
}}
/>
<Stack.Screen
name="Carrinho"
component={TelaCarrinho}
options={{
title: '',
headerTintColor: 'white',
headerStyle: { backgroundColor: '#6b39b6', height: 100 },
height: Header.height,
headerBackTitle: 'Voltar',
headerTitle: 'Carrinho'.toUpperCase(),
headerTitleStyle: {
fontSize: 17,
fontWeight: 600,
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Do you guys have any idea how I can fix it?
I have a link to Expo: https://snack.expo.io/#rapolasls/eager-crackers
Thank you!
Per React Navigation v5 documentation on createStackNavigator, the header property can be either an object or function.
We use it as a function below to gain access to navigation property. 👍
import React from "react";
import { View, Text, TouchableOpacity, } from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const Placeholder = (props) => {
const {
name,
backgroundColor,
} = props;
return (
<View style={{ flex: 1, backgroundColor, justifyContent: "center", alignItems: "center", }}>
<Text style={{ fontSize: 20, color: "white", }}>{ name }</Text>
</View>
)
}
const ScreenA = (props) => {
return <Placeholder name="Screen A" backgroundColor="steelblue" />
}
const ScreenB = (props) => {
return <Placeholder name="Screen B" backgroundColor="tomato" />
}
const RootNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen component={ScreenA} name="a" options={({ navigation }) => {
// navigation object available
const navigateToB = () => { navigation.navigate("b") };
return {
headerTitle: () => {
return (
<TouchableOpacity onPress={navigateToB} style={{ backgroundColor: "green", justifyContent: "flex-end", alignItems: "center", }}>
<Text style={{ fontSize: 20, color: "white", }}>{ "Screen A" }</Text>
</TouchableOpacity>
)
}
}
}} />
<Stack.Screen component={ScreenB} name="b" options={{ headerTitle: "Screen B" }} />
</Stack.Navigator>
);
}
export default function() {
return (
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
);
}