We Keep Coding

Navigation inside TabBar React Native

I'm pretty new to React Native, I have the following tab bar navigation page:
const TabBar = () => {
return (
<BottomTab.Navigator
screenOptions={{
showIcon: true,
tabBarShowLabel: false,
tabBarStyle: {
position: "absolute",
bottom: 25,
left: 20,
right: 20,
elevation: 0,
backgroundColor: global.GUI.WHITE,
borderRadius: 15,
height: 90,
...styles.shadow,
},
header: ({ navigation, route, options }) => {
return (
<View
style={{
justifyContent: "space-between",
height: 110,
backgroundColor: global.GUI.WHITE,
alignItems: "center",
width: "100%",
flexDirection: "row",
...styles.shadow,
}}
>
<Image
source={ctsLogo}
style={{
resizeMode: "contain",
width: 100,
height: 70,
marginTop: 40,
marginLeft: 10,
}}
/>
<Button title="test" onPress={()=>{
}}>
<FontAwesomeIcon
icon={faCog}
style={{
color: global.GUI.ORANGE,
marginTop: 40,
marginRight: 20,
}}
size={30}
/>
</Button>
</View>
);
},
}}
>
<BottomTab.Screen
name="Home"
component={Main}
options={{
...
}}
/>
<BottomTab.Screen
name="Flyers"
component={Flyers}
options={{
...
}}
/>
<BottomTab.Screen
name="OnlineShop"
component={OnlineShop}
options={{
...
}}
/>
<BottomTab.Screen
name="Cards"
component={Cards}
options={{...}}
/>
<BottomTab.Screen
name="Shops"
component={Shops}
options={{
....
}}
/>
</BottomTab.Navigator>
);
};
I want to add navigate to another page while remaining in the context of the tab bar (let's says I want to go to another component called "Settings") programmatically by triggering the test button:
<Button title="test" onPress={()=>{...}}>
Inside the custom header, is it possible to do that? Thanks
EDIT:
I've changed my App.js code to this:
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import TabBar from "./navigation/TabBar";
import Settings from "./page/Settings";
const Stack = createNativeStackNavigator();
export default function App() {
function Tabs() {
return <TabBar />;
}
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Tabs" component={Tabs}
options={{ headerShown: false }}/>
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
And now I'm able to navigate, thanks!

inside your SCREEN call navigation hook
const navigation = useNavigation();
then u can use NAVIGATION functions anywhere you want :) even inside Button
Button
<Button title="test" onPress={()=>{
navigation.navigate('Settings') // param here is "name" prop from your navigator
// navigation.goBack()
}}>

Try using this
props.navigation.navigate('Settings')

React Native: View not covering parent height

Issue
There are 2 tabs stacked horizontally and in the first tab, the view in green color isn’t able to fill the parent's height when the content is different in both the Tabs.
Reproducible in Expo
https://snack.expo.dev/#vinay-sharma/92706e
Code
import React from "react";
import { Text, View } from "react-native";
const Tab = ({ textNodes }) => {
return (
<View style={{ flex: 1, backgroundColor: "red" }}>
<View style={{ flexDirection: "row" }}>
<View style={{ backgroundColor: "blue", width: 10 }}></View>
{/* the green view isn’t able to fill parent's height*/}
<View style={{ backgroundColor: "green", flex: 1 }}>
{textNodes.map((node) => (
<Text>{node}</Text>
))}
</View>
</View>
<View style={{ height: 10, backgroundColor: "black" }} />
</View>
);
};
export default function App() {
return (
<View style={{ flexDirection: "row", marginTop: 25 }}>
<Tab textNodes={[1, 2, 3]} />
<Tab textNodes={[1, 2, 3, 4]} />
</View>
);
}

Just add style property height: '100%' in the row view in your Tab() function
The first element is not taking 100% of the height because it has less Childs (default behaviour of a View, doc)
import React from 'react';
import { Text, View } from 'react-native';
const Tab = ({ textNodes }) => {
return (
<View style={{ flex: 1, backgroundColor: 'red' }}>
<View style={{ flexDirection: 'row', height: '100%' }}> //here add height 100%
<View style={{ backgroundColor: 'blue', width: 10 }}></View>
{/* the green view isn’t able to fill parent's height*/}
<View style={{ backgroundColor: 'green', flex: 1 }}>
{textNodes.map((node)=><Text>{node}</Text>)}
</View>
</View>
<View style={{ height: 10, backgroundColor: "black" }} />
</View>
)
}
export default function App() {
return (
<View style={{ flexDirection: 'row', marginTop: 25 }}>
<Tab textNodes={[1, 2, 3]} />
<Tab textNodes={[1, 2, 3, 4]} />
</View>
);
}

React native expo: Tab navigator set initial screen

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { NavigationContainer } from '#react-navigation/native';
function LoginScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Login</Text>
</View>
);
}
function VideoScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Video</Text>
</View>
);
}
function PodcastScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Podcast</Text>
</View>
);
}
function TravelScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Travel</Text>
</View>
);
}
function InfoScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Info</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Video" component={VideoScreen} />
<Tab.Screen name="Podcast" component={PodcastScreen} />
<Tab.Screen name="Travel" component={TravelScreen} />
<Tab.Screen name="Info" component={InfoScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
The code is from App.js. I will add the icons later
I want to have the login screen as the first screen to show up when the user opens the app. And when the user presses the login button then it should open like it is now. Also the loginScreen should not show up on the tab navigator.
Thank you for your help

This might help
const MainTabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Video" component={VideoScreen} />
<Tab.Screen name="Podcast" component={PodcastScreen} />
<Tab.Screen name="Travel" component={TravelScreen} />
<Tab.Screen name="Info" component={InfoScreen} />
</Tab.Navigator>
);
}
<NavigationContainer>
<Stack.Navigator>
{Store.userToken == null ? (
<Stack.Screen name="Login" component={LoginStackScreen} options={{ headerShown: false }} />
) : (
<Stack.Screen name="MainTabNavigator" component={MainTabNavigator} options={{ headerShown: false }} />)}
</Stack.Navigator>
</NavigationContainer>

How do I pass a Prop to a Navigation Screen Component - React Native

I'm fairly new to React native . I have created a Drawer Navigator in my App.js file.
One of my navigation Components is a component named LoginScreen.
I am trying to to pass a prop to LoginScreen to display when the user navigates to it.
App.js (Navigator)
const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
isAdmin: 'false',
checked: false,
}
}
async componentDidMount() {
try {
const adm = await AsyncStorage.getItem('is_admin')
if (adm == null) {
adm = await AsyncStorage.setItem('is_admin', 'false')
}
this.setState({ isAdmin: adm, checked: true })
} catch (error) {
console.log(error)
}
}
render() {
const { isAdmin } = this.state
console.log(isAdmin)
//is admin
return isAdmin == 'true' ? (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MyStack} />
<Drawer.Screen
name="Admin Panel"
component={props => {
return <LoginScreen props={props} propName = {'Hello'} />
}}
/>
</Drawer.Navigator>
</NavigationContainer>
) : (
//ISNOT ADMIN
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MyStack} />
<Drawer.Screen name="Login" component={LoginScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
}
LginScreen.js
const LoginScreen = ({ navigation, propName }) => {
// const [bridge, setB] = useState(false)
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<TopHeader
onRefresh={() => fetch_crossings}
onMenuToggle={() => navigation.toggleDrawer()}
/>
<View style={{ flex: 1 }}>
<View
style={{
backgroundColor: '#fff',
margin: 10,
borderRadius: 5,
alignItems: 'center',
padding: 10,
paddingBottom: scale(20),
}}
>
<Avatar
rounded
size={'xlarge'}
overlayContainerStyle={{
backgroundColor: '#185a9d',
}}
icon={{
color: 'orange',
type: 'ionicon',
name: 'ios-log-in',
}}
/>
<Input
placeholder=" Email"
placeholderTextColor={'#292b2c'}
style={{ margin: 5 }}
errorStyle={{ color: '#d9534f' }}
leftIcon={<Icon name="mail" color="#292b2c" />}
errorMessage="Enter a valid Email"
/>
<Divider
style={{
backgroundColor: 'orange',
height: 3,
margin: scale(20),
borderRadius: 3,
}}
/>
<Input
placeholder=" Password"
placeholderTextColor={'#292b2c'}
secureTextEntry={true}
style={{ margin: 5 }}
errorStyle={{ color: '#d9534f' }}
leftIcon={<Icon name={'lock'} color="#292b2c" />}
errorMessage="Enter a valid Email"
/>
</View>
<View
style={{
backgroundColor: '#fff',
margin: 10,
marginTop: 0,
borderRadius: 5,
padding: 10,
}}
>
<Button
buttonStyle={{
margin: 10,
backgroundColor: '#5cb85c',
borderRadius: 4,
alignSelf: 'stretch',
}}
onPress={async () => {
try {
await AsyncStorage.setItem('is_admin', 'false')
**console.log(propName);** //<--Right HERE
navigation.navigate('Home')
} catch (error) {
console.log(error)
}
}}
icon={<Icon name="send" size={15} color="white" />}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title="Submit "
/>
<Button
buttonStyle={{
margin: 10,
backgroundColor: '#d9534f',
borderRadius: 4,
alignSelf: 'stretch',
}}
onPress={() => {
navigation.navigate('Home')
}}
icon={<Icon name="close" size={15} color="white" />}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title={'Close '}
/>
</View>
</View>
</SafeAreaView>
)
}
export default LoginScreen
Whenever I console.log(propName), it says that its undefined.

Asad's Answer actually helped me get to this :
App.js (Navigation)
Here, we can add the 'initialParams' parameter to <Drawer.Screen/> :
<Drawer.Screen
name="Login"
component={LoginScreen}
initialParams={{ post: this.state.isAdmin }} //<-- Right here
/>
Then we can receive as such in LoginScreen.js as such :
const LoginScreen = ({ navigation, route }) => {
console.log(route.params.post)
return (
<Text>{route.params.post}</Text>
)
}

Another way:
<Drawer.Navigator
initialRouteName="Updates"
drawerContentOptions={{ style: { paddingVertical: 50 } }}>
<Drawer.Screen name="Updates" options={screenOptions}>
{props => (
<UpdatesScreen myProp={this.state.someProp} />
)}
</Drawer.Screen>
...
</Drawer.Navigator>

Change initial route after Validation - react-native

I'm struggling to find a solution to my problem, but no success yet.
My idea is: when the user receives the 6 digits code from the API and hits confirm the page will reload and send him to the main app. I have looked around if there is any function that can help me resolve my problem, but the only idea that seems to be working for now is to link the button from the ValidationPage to the rooting stack and give the function onPress to send the user to the MainPage.js.
But my opinion is that this is not the right way to do this. So does anyone have an idea how to tackle this problem? I'll be glad if someone can help me. Thank you! The outlook of the page looks like this :
LoginPage.js
import React, { Component } from 'react';
import { Linking, Image, View, AsyncStorage, Dimensions } from "react-native";
import { Container, Icon, Text, Content, Button, Input, Item } from "native-base";
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {}
}
state = {
fontLoaded: false,
}
async componentWillMount() {
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("#expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ fontLoaded: true });
}
render() {
return (
this.state.fontLoaded ? (
<Container>
<Content>
<View style={{ alignContent: 'center', alignItems: 'center' }}>
<Image
style={{
width: '60%',
height: 200,
}}
source={require('../../assets/images/Shootlog.png')} />
</View>
<Text style={{ textAlign: 'center', lineHeight: 30, fontWeight: 'bold', fontSize: 20, color: 'grey' }}> Welcome to myShootLog</Text>
<Text style={{ textAlign: 'center', color: '#be0202' }}>Smart Shooting Solution for shooting ranges.</Text>
<Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}> To continue , please fill in your email adress :</Text>
<View style={{ alignContent: 'center', alignItems: 'center', margin: 20 }}>
<Item style={{ marginBottom: 10 }}>
<Input
placeholder='example#mail.com'
onChangeText={(text) => this.validate(text)}
value={this.state.email}
keyboardType='email-address'
/>
<Icon name={this.state.emailCheck} />
</Item>
<Button full onPress={() => this.props.navigation.navigate('Validation')} style={{ backgroundColor: '#e72a2e'}}>
<Text style={{ textTransform: 'uppercase', }}>{'send'.toUpperCase()}</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Content>
<View style={{ width: '100%', alignContent: 'center', position: 'absolute', top: footerTopPosition }}>
<Text style={{ color: 'grey', fontSize: 11, textAlign: 'center' }} >All Rights Reserved.® 2018 by CanDoIt </Text>
<Text style={{ color: 'grey', fontSize: 10, textAlign: 'center' }} onPress={() => Linking.openURL('http://candoit.be')}>www.candoit.be</Text>
</View>
</Container>
) : null
);
}
validate = (text) => {
let reg = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (reg.test(text) === false) {
console.log('email is incorrect')
this.setState({ emailCheck: 'close-circle' });
return false;
}
else {
this.setState({ emailCheck: 'checkmark-circle' })
console.log('email is correct')
}
}
}
ValidationPage.js
import React, { Component } from 'react';
import { Linking, Image, View, AsyncStorage, Dimensions } from "react-native";
import { Container, Icon, Text, Content, Button, Input, Item } from "native-base";
export default class ValidationScreen extends Component {
constructor(props) {
super(props);
this.state = {}
}
state = {
fontLoaded: false,
}
async componentWillMount() {
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("#expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ fontLoaded: true });
}
render() {
const { navigate } = this.props.navigation;
return (
this.state.fontLoaded ? (
<Container>
<Content>
<View style={{ alignContent: 'center', alignItems: 'center' }}>
<Image
style={{
width: '60%',
height: 200,
}}
source={require('../../assets/images/Shootlog.png')} />
</View>
<Text style={{ textAlign: 'center', lineHeight: 30, fontWeight: 'bold', fontSize: 20, color: 'grey' }}> Welcome to NicoLog</Text>
<Text style={{ textAlign: 'center', color: '#be0202' }}>Smart Shooting Solution for shooting ranges.</Text>
<Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}> Please fill in the 6 digits code from the email that you have recieved :</Text>
<View style={{ alignContent: 'center', alignItems: 'center', margin: 20 }}>
<Item style={{ marginBottom: 10 }}>
<Input
placeholder='Ex. 910-519'
onChangeText={(text) => this.validate(text)}
value={this.state.email}
keyboardType='number-pad'
/>
<Icon name={this.state.emailCheck} />
</Item>
<Button full onPress={() => this.props.navigation.navigate('Main')} style={{ backgroundColor: '#e72a2e' }}>
<Icon name='checkmark-circle' />
<Text style={{ textTransform: 'uppercase' }}>{'confirm'.toUpperCase()}</Text>
</Button>
<Text style={{ padding: 20, textAlign: 'center', color: 'grey' }}>If you didn't recieved anything please click the button bellow.</Text>
<Button full style={{ backgroundColor: '#e72a2e' }}>
<Icon name='refresh' />
<Text style={{ textTransform: 'uppercase' }}>{'re-send'.toUpperCase()}</Text>
</Button>
</View>
</Content>
<View style={{ width: '100%', alignContent: 'center', position: 'absolute', top: footerTopPosition }}>
<Text style={{ color: 'grey', fontSize: 11, textAlign: 'center' }} >All Rights Reserved.® 2018 by CanDoIt </Text>
<Text style={{ color: 'grey', fontSize: 10, textAlign: 'center' }} onPress={() => Linking.openURL('http://candoit.be')}>www.candoit.be</Text>
</View>
</Container>
) : null
);
}
validate = (text) => {
let reg = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (reg.test(text) === false) {
console.log('email is incorrect')
this.setState({ emailCheck: 'close-circle' });
return false;
}
else {
this.setState({ emailCheck: 'checkmark-circle' })
console.log('email is correct')
}
}
callMain = () => {
this.props.callParent(); // accsessing the function from the parent App.js
}
}
Navigation.js
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import ValidationScreen from './screens/ValidationScreen';
export default createAppContainer( createStackNavigator (
{
Login: { screen: LoginScreen},
Validation: { screen: ValidationScreen},
},
{
headerMode: 'none'
}
));