Develop Reference

How to navigate to a screen in parent navigation in React native

I am very new to React Navigation and am trying to implement the following functionality in react-native:
I have a stack navigator as a parent and a bottom navigation bar as its child. From the home screen, when the user clicks the logout option, they should return to the Sign In screen which is a part of the parent navigation.
There are already a lot of questions regarding this, but I am not able to implement the previous solutions in my code.
Someone please help me out, the code is given below (This is an Expo managed project):
Navigation Components
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import WelcomeScreen from "../screens/WelcomeScreen";
import Features from "../screens/Features";
import SignIn from "../screens/SignIn";
import Register from "../screens/Register";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { Icon } from "react-native-elements";
import Home from "../screens/Home";
import Reminders from "../screens/Reminders";
import Settings from "../screens/Settings";
const BottomNavbar = () => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused }) => {
let iconName;
let rn = route.name;
if (rn === "Home") {
iconName = focused ? "home" : "home-outline";
} else if (rn === "Reminders") {
iconName = focused ? "list" : "list-outline";
} else if (rn === "Settings") {
iconName = focused ? "settings" : "settings-outline";
}
return (
<Icon
name={iconName}
size={25}
color="black"
type="ionicon"
/>
);
},
})}
showLabel
>
<Tab.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Tab.Screen
name="Reminders"
component={Reminders}
options={{ headerShown: false }}
/>
<Tab.Screen
name="Settings"
component={Settings}
options={{ headerShown: false }}
/>
</Tab.Navigator>
);
};
const Navigator = () => {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Welcome"
>
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="Features" component={Features} />
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="BottomNavbar" component={BottomNavbar} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default Navigator;
Home Screen Components
import {
View,
Text,
SafeAreaView,
StyleSheet,
TouchableOpacity,
ScrollView,
} from "react-native";
import React from "react";
import { Header, Image, Icon } from "react-native-elements";
import { useFonts } from "expo-font";
import ServiceCard from "../components/ServiceCard";
import PetCard from "../components/PetCard";
const SignOut = ({ navigation }) => {
return (
<TouchableOpacity
onPress={() => {
navigation.navigate("SignIn");
}}
>
<Icon name="logout" color="black" size={20} />
</TouchableOpacity>
);
};
const Home = () => {
const [loaded, error] = useFonts({
Montserrat: require("../assets/fonts/Montserrat-Regular.ttf"),
});
if (!loaded) {
return null;
}
const url1 =
"https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80";
const url2 =
"https://images.unsplash.com/photo-1560807707-8cc77767d783?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80";
const url3 =
"https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80";
return (
<View style={styles.screen}>
<Header
leftComponent={{
icon: "menu",
color: "black",
}}
rightComponent={<SignOut />}
centerComponent={{
text: "PetPapa",
color: "black",
style: {
fontFamily: "Montserrat",
fontSize: 20,
},
}}
barStyle="dark-content"
backgroundColor="white"
containerStyle={styles.header}
/>
<View style={styles.community}>
<View style={styles.commOffer}>
<View>
<Text style={styles.commOfferTitle}>Join our</Text>
<Text style={styles.commOfferTitle}>
community today!
</Text>
</View>
<TouchableOpacity style={styles.btn}>
<Text style={styles.commOfferJoin}>Join Now</Text>
</TouchableOpacity>
</View>
<Image
source={{
uri: "https://imgur.com/nB4Xm1Z.png",
}}
style={styles.commDog}
/>
</View>
<View style={styles.listView}>
<View style={styles.topText}>
<Text style={styles.title}>Services</Text>
<TouchableOpacity>
<Text style={styles.option}>See more</Text>
</TouchableOpacity>
</View>
<ServiceCard />
</View>
<View style={styles.listView}>
<View style={styles.topText}>
<Text style={styles.title}>My Pets</Text>
<TouchableOpacity>
<Text style={styles.option}>See all</Text>
</TouchableOpacity>
</View>
<ScrollView
style={styles.petView}
horizontal={true}
showsHorizontalScrollIndicator={true}
persistentScrollbar={true}
>
<PetCard name="Miles" Img={url1} />
<PetCard name="Jack" Img={url2} />
<PetCard name="Ellie" Img={url3} />
</ScrollView>
</View>
</View>
);
};
const styles = StyleSheet.create({
screen: {
height: "100%",
backgroundColor: "white",
alignItems: "center",
},
header: {
backgroundColor: "white",
height: 80,
},
community: {
backgroundColor: "#1976D2",
height: "15%",
width: "80%",
borderRadius: 20,
marginTop: 50,
flexDirection: "row",
justifyContent: "space-around",
},
commDog: {
marginTop: 10,
marginRight: 15,
height: 105,
width: 75,
},
commOffer: {
marginTop: 10,
flexDirection: "column",
justifyContent: "space-around",
},
commOfferTitle: {
color: "white",
fontFamily: "Montserrat",
fontSize: 16,
},
btn: {
backgroundColor: "#FFC107",
width: "50%",
borderRadius: 10,
},
commOfferJoin: {
color: "white",
margin: 5,
},
listView: {
marginTop: 50,
width: "80%",
},
topText: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
title: {
fontFamily: "Montserrat",
fontWeight: "600",
},
option: {
fontFamily: "Montserrat",
opacity: 0.4,
},
block: {
backgroundColor: "#FF5677",
width: 75,
height: 100,
justifyContent: "center",
alignItems: "center",
marginTop: 25,
borderRadius: 20,
},
petView: {
width: "100%",
backgroundColor: "white",
height: 250,
},
});
export default Home;
My Directory Structure:

First you need to add navigation prop to Home screen component
const Home = ({navigation}) => {
const [loaded, error] = useFonts({
Montserrat: require("../assets/fonts/Montserrat-Regular.ttf"),
});
...
then You need to pass navigation prop to the signout component
<Header
leftComponent={{
icon: "menu",
color: "black",
}}
rightComponent={<SignOut navigation={navigation} />}
...
You can also use useNavigation hook from react navigation
import { useNavigation } from '#react-navigation/native';
const SignOut = ({}) => {
const navigation = useNavigation()
return (
<TouchableOpacity
onPress={() => {
navigation.navigate("SignIn");
}}
>
<Icon name="logout" color="black" size={20} />
</TouchableOpacity>
);
};
If You want to create login flow then you should use Authentication flow which I think best prectice and recommended way
The problem in current flow if you logout and navigate to sign-in page once then if you navigate back from you app then as behaviour of stack navigation it just pop current screen and it will again navigate to home screen which is not what supposed to be correct.
You can learn it from react-navigation offical doc
https://reactnavigation.org/docs/auth-flow/
if you want a video tutorial how to implement Authentication flow using redux(state management lib) then I have video tutorial you can learn this video -> https://youtu.be/cm1oJ7JmW6c

data size bigger than 1 has rendering issue

data that worked looks like this
(I used JSON.stringify function to see how the data looks like)
[{"_id":"612e60c4ce136a1f4454c938", "individualPurchasePrice":9800,"teamPurchasePrice":640, "eventDealCategory":"DysonHairDryer"}]
below is the data that didn't work
[{"_id":"612e60c4ce136a1f4454c938", "individualPurchasePrice":9800,"teamPurchasePrice":640, "eventDealCategory":"JMWHairDryer"}, {"_id":"612e60c4ce136a1f4454c938", "individualPurchasePrice":9800,"teamPurchasePrice":640, "eventDealCategory":"JMWHairDryer"},]
this is the error message
Element type is invalid:expected a string (for built-in components) or a class/function (for composite components) but got: object.
import React from 'react'
import { SafeAreaView, View, Dimensions, Text, ScrollView } from 'react-native'
import ItemStore from '../stores/ItemStore'
import ImageManager from '../images/ImageManager'
import ItemListWithoutCategory from '../components/item/ItemListWithoutCategory'
import TimeDealItemComponent from '../components/item/TimeDealItemComponent'
const dims = Dimensions.get('window')
const TimeDealItemScreen = ({ route, navigation }) => {
const { eventDealCategoryName } = route.params
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView style={{ height: 40, backgroundColor: 'red' }}>
<ImageManager
source='TimeDealGradientImage'
style={{
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
/>
<ItemListWithoutCategory
isFrom='TimeDealItemScreen'
ItemSeparatorComponent={<View style={{ height: 16 }} />}
ListFooterComponent={
<>
<View style={{ height: 16, backgroundColor: 'transparent' }} />
</>
}
data={ItemStore?.eventDealItems?.filter(
(item) => item.eventDealCategory === eventDealCategory,
)}
renderItem={({ item, index }) => (
<View style={{ paddingHorizontal: 8 }}>
<TimeDealItemComponent item={item} index={index} />
</View>
)}
ListFooterComponent={
<>
<View style={{ height: 16, backgroundColor: 'transparent' }} />
</>
}
/>
</ScrollView>
</SafeAreaView>
)
}
export default TimeDealItemScreen
import React, { useState, useRef, useEffect, useCallback } from 'react'
import { FlatList } from 'react-native'
import ItemStore from '../../stores/ItemStore'
import { observer } from 'mobx-react-lite'
import UserStore from '../../stores/UserStore'
import { useNavigation } from '#react-navigation/native'
import viewabilityConfig from '../config/viewabilityConfig'
const ItemListWithoutCategory = observer(
({
ListEmptyComponent,
ListFooterComponent,
ItemSeparatorComponent,
data,
renderItem,
ListHeaderComponent,
isFrom,
ref,
onEndReached,
numColumns,
}) => {
const navigation = useNavigation()
const onViewableItemsChanged = useCallback(
({ viewableItems, changed }) => {
changed.forEach((item) => {
if (item.isViewable) {
const addedImpressionItems = {
itemId: item.item?._id,
itemTitle: item.item?.itemTitle,
loggedAt: new Date(),
isFrom,
}
ItemStore.addImpressionItems(addedImpressionItems)
}
})
},
[ItemStore.screenOnFocusMyOrder],
)
const viewabilityConfigCallbackPairs = useRef([
{ viewabilityConfig, onViewableItemsChanged },
])
return (
<FlatList
ref={ref}
viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
data={data}
ListHeaderComponent={ListHeaderComponent}
renderItem={renderItem}
keyExtractor={(item, index) => item?._id + index.toString()}
ListEmptyComponent={ListEmptyComponent}
ListFooterComponent={ListFooterComponent}
ItemSeparatorComponent={ItemSeparatorComponent}
onEndReached={onEndReached}
numColumns={numColumns}
/>
)
},
)
export default ItemListWithoutCategory
import React, { useState, useEffect } from 'react'
import { View, TouchableOpacity, Dimensions } from 'react-native'
import BlackText from '../texts/BlackText'
import GrayText from '../texts/GrayText'
import BasicButton from '../buttons/BasicButton'
import { observer } from 'mobx-react-lite'
import UserStore from '../../stores/UserStore'
import OrderStore from '../../stores/OrderStore'
import ImageManager from '../../images/ImageManager'
import backendApis from '../../utils/backendApis'
import { useNavigation } from '#react-navigation/native'
import ItemStore from '../../stores/ItemStore'
import RedText from '../texts/RedText'
import FastImage from 'react-native-fast-image'
import ImageTextTimer from '../texts/ImageTextTimer'
import commaNumber from 'comma-number'
const dims = Dimensions.get('window')
const TimeDealItemComponent = observer(({ item, index }) => {
const FULL_GAGE_WIDTH = 70
const CURRENT_GAGE_WIDTH = item.stockSoldPercentage
const GAGE_HEIGHT = 16
const navigation = useNavigation()
const TRANSPARENT_GRAY_CIRCLE_SIZE = 80
const [eventDealStatusHere, setEventDealStatusHere] = useState(0)
const [orderRecord, setOrderRecord] = useState('unpurchased')
useEffect(() => {
const eventStartedDate = new Date(item.eventDealStartedAt) // x
const now = new Date().getTime() // y
const oneDayTerm = 1000 * 60 * 60 * 24 * 1 // 7일
const stockleft = item.eventDealStock - item.totalOrderQuantity
if (eventStartedDate > new Date(now)) {
setEventDealStatusHere('preOpened')
} else if (
eventStartedDate < new Date(now) &&
eventStartedDate > new Date(now - oneDayTerm) &&
stockleft > 0
) {
setEventDealStatusHere('opened')
} else if (
eventStartedDate < new Date(now) &&
eventStartedDate > new Date(now - oneDayTerm) &&
stockleft <= 0
) {
setEventDealStatusHere('temporarilyClosed')
} else setEventDealStatusHere('closed')
}, [])
useEffect(() => {
if (
OrderStore.loadedUserOrdersList.find(
(order) =>
[
'pre-shipping',
'shipping',
'exchanging',
'arrived',
'reviewed',
].includes(order.status) && item._id === order.itemInfo.itemId,
)
) {
setOrderRecord('purchased')
} else {
setOrderRecord('unpurchased')
}
}, [OrderStore.loadedUserOrdersList])
const StockInfoTextComponent = ({ text }) => {
return (
<View
style={{
flexDirection: 'row',
alignContent: 'center',
// backgroundColor: 'grey',
}}
>
<GrayText text={text} fontSize={14} dark numberOfLines={1} />
</View>
)
}
const StockInfoText = () => {
if (eventDealStatusHere === 'preOpened') {
return (
<StockInfoTextComponent
text={`${commaNumber(item.eventDealStock)}개 입고 예정`}
/>
)
}
if (eventDealStatusHere === 'temporarilyClosed') {
return <StockInfoTextComponent text='일시적 물량 소진' />
}
if (eventDealStatusHere === 'closed') {
return <StockInfoTextComponent text='재고 전량 소진' />
}
return <></>
}
return (
<View style={{ width: '100%' }}>
<View
style={{
flex: 1,
width: '100%',
}}
>
<TouchableOpacity
style={{
backgroundColor: 'white',
marginTop: 12,
padding: 8,
borderRadius: 8,
}}
activeOpacity={1.0}
onPress={() => {
if (ItemStore.isLoadingItemScreen) {
return
}
ItemStore.setIsLoadingItemScreen(true)
navigation.push('MainStackDItemScreen', {
itemId: item._id,
itemInfo: item.itemInfo,
enteringComponent: 'TimeDealItemComponent',
})
setTimeout(() => {
ItemStore.setIsLoadingItemScreen(false)
}, 1000)
}}
>
<View
style={{
flexDirection: 'row',
marginTop: 4,
borderRadius: 4,
}}
>
<View
style={{
flex: 2,
flexDirection: 'column',
paddingHorizontal: 8,
}}
>
<View
style={{
paddingBottom: 8,
flexDirection: 'row',
paddingRight: 16,
}}
>
<BlackText
text={item.itemTitle}
fontSize={16}
numberOfLines={2}
/>
</View>
{/* 1.아이템타이틀 끝 */}
{/* 7. 게이지 시작 */}
<View
style={{
alignContent: 'center',
justifyContent: 'center',
}}
>
{eventDealStatusHere === 'opened' && (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}
>
<View
style={{
backgroundColor: '#E89FA1',
height: GAGE_HEIGHT,
width: FULL_GAGE_WIDTH,
borderRadius: 12,
}}
>
<View
style={{
backgroundColor: '#EC4F48',
height: GAGE_HEIGHT,
width: FULL_GAGE_WIDTH * CURRENT_GAGE_WIDTH,
borderRadius: 12,
}}
/>
</View>
{/* opened */}
{eventDealStatusHere === 'opened' && (
<View
style={{
flexDirection: 'row',
alignContent: 'center',
paddingLeft: 8,
// backgroundColor: 'grey',
}}
>
<GrayText
text={item.stockLeft}
fontSize={12}
numberOfLines={1}
/>
<GrayText
text='개 남음'
fontSize={12}
numberOfLines={1}
/>
</View>
)}
</View>
)}
</View>
{/* 7. 게이지 끝 */}
{orderRecord === 'purchased' && (
<View
style={{
borderRadius: 4,
paddingTop: 10,
}}
>
<>
<BasicButton
width={30}
text='이미 구매하신 아이템입니다.'
eventDealClosed
backgroundColor='#B3B4B7'
/>
</>
</View>
)}
</TouchableOpacity>
</View>
</View>
)
})
export default TimeDealItemComponent

below is the data that didn't work
[{"_id":"612e60c4ce136a1f4454c938", "eventDealCategory":"JMWHairDryer"}, {"_id":"612e60c4ce136a1f4454c938", "eventDealCategory":"JMWHairDryer"},]
It does not work in second example because instead of one object you have array of objects. To render them you need to map throught array.

tabBarOptions not applied to project (React Native)

I am creating a small app that has a to-do list and a calendar. At the bottom is a bottom tab navigator. Everything works and is functional, however, when I try to add style: {} inside tabBarOptions it isn't being applied. Changing activeTintColor, inactiveTintColor and labelStyle works just fine.
I tried to create a stylesheet and replace everything inside tabBarOptions, but that didn't work. My main goal is to simply create a slightly larger bar along the bottom of the screen. I don't even want a crazy custom navigation bar, just slightly larger so I can make the items inside a little bigger.
MainContainer Class:
import React from 'react';
import {StyleSheet} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'
//screens
import Calendar from './screens/Calendar';
import ToDoList from './screens/ToDoList';
// Screen names
const calendarName = 'Calendar';
const ToDoListName = 'To Do List';
const Tab = createBottomTabNavigator();
export default function MainContainer() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'black',
labelStyle: {paddingBottom: 10, fontSize: 10},
style: {padding: 10, height: 70},
}}
initialRouteName={ToDoListName}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
let rn = route.name;
if (rn === ToDoListName) {
iconName = focused ? 'list' : 'list-outline'; //icons in package. Change later.
} else if (rn === calendarName) {
iconName = focused ? 'calendar' : 'calendar-outline'
}
return <Ionicons name={iconName} size={size} color={color}/>
},
})}>
<Tab.Screen name={ToDoListName} component={ToDoList}/>
<Tab.Screen name={calendarName} component={Calendar}/>
</Tab.Navigator>
</NavigationContainer>
)
}
For reference here is my ToDoList class
import { KeyboardAvoidingView, StyleSheet, Text, View, TextInput, TouchableOpacity, Platform, Keyboard } from 'react-native';
import Task from '../../components/Task';
import React, { useState } from 'react';
import { ScrollView } from 'react-native-web';
export default function ToDoList() {
const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);
const handleAddTask = () => {
Keyboard.dismiss();
setTaskItems([...taskItems, task])
setTask(null);
}
const completeTask = (index) => {
let itemsCopy = [...taskItems];
itemsCopy.splice(index, 1);
setTaskItems(itemsCopy)
}
return (
<View style={styles.container}>
{/* Scroll View when list gets longer than page */}
<ScrollView contentContainerStyle={{
flexGrow: 1
}} keyboardShouldPersistTaps='handled'>
{/*Today's Tasks */}
<View style={styles.tasksWrapper}>
<Text style={styles.sectionTitle}>Today's Tasks</Text>
<View style={styles.items}>
{/* This is where the tasks will go*/}
{
taskItems.map((item, index) => {
return (
<TouchableOpacity key={index} onPress={() => completeTask(index)}>
<Task text={item} />
</TouchableOpacity>
)
})
}
</View>
</View>
</ScrollView>
{/* Write a task section */}
{/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.writeTaskWrapper}>
<TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text => setTask(text)} />
<TouchableOpacity onPress={() => handleAddTask()}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
tasksWrapper: {
paddingTop: 20,
paddingHorizontal: 20,
},
sectionTitle: {
fontSize: 24,
fontWeight: 'bold',
},
items: {
marginTop: 30,
},
writeTaskWrapper: {
position: 'absolute',
bottom: 20,
paddingLeft: 10,
paddingRight: 10,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
input: {
paddingVertical: 15,
width: 250,
paddingHorizontal: 15,
backgroundColor: '#FFF',
borderRadius: 60,
borderColor: '#C0C0C0',
borderWidth: 1,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#FFF',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
borderWidth: 1,
},
addText: {
},
});
And my Calendar class
import * as React from 'react';
import { View, Text } from 'react-native';
export default function Calendar(){
return(
<View>
<Text>Calendar Will go here</Text>
</View>
)
}
I made a Task component for the ToDoList. Not sure if you need it to solve this but I'll paste it here anyway.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-web';
const Task = (props) => {
return (
<View style={styles.item}>
<View style={styles.itemLeft}>
<View style={styles.square}></View>
<Text style={styles.itemText}>{props.text}</Text>
</View>
<View style={styles.circular}></View>
</View>
)
}
const styles = StyleSheet.create({
item: {
backgroundColor: '#FFF',
padding: 15,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
},
itemLeft: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
},
square: {
width: 24,
height: 24,
backgroundColor: '#55BCF6',
opacity: .4,
borderRadius: 5,
marginRight: 15,
},
itemText: {
maxWidth: '80%',
},
circular: {
width: 12,
height: 12,
borderColor: '#55BCF6',
borderWidth: 2,
borderRadius: 5
},
});
export default Task;

It sounds like you are looking for the tabBarStyle property. You should be able to rename style (which is not a supported prop of the tab navigator) to tabBarStyle.
Here's the spot in the docs that mentions this. https://reactnavigation.org/docs/bottom-tab-navigator#tabbarstyle

What I ended up doing to solve this was to put the styling inside the screenOptions. I didn't want to do this because I wanted to separate the styling from the logic, but it solved the problem for me. See code below:
export default function MainContainer() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={ToDoListName}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
let rn = route.name;
if (rn === ToDoListName) {
iconName = focused ? 'list' : 'list-outline'; //icons in package. Change later.
} else if (rn === calendarName) {
iconName = focused ? 'calendar' : 'calendar-outline'
}
return <Ionicons name={iconName} size={size} color={color}/>
},
activeTintColor: 'tomato',
inactiveTintColor: 'black',
tabBarShowLabel: false,
tabBarStyle: {padding: 10, height: 100, backgroundColor: 'black'},
})}>
<Tab.Screen name={ToDoListName} component={ToDoList}/>
<Tab.Screen name={calendarName} component={Calendar}/>
</Tab.Navigator>
</NavigationContainer>
)
}

React native - z-index in dropdown doesnt work

I am trying to create a basic dropdown in React Native.
I have created a dropdown component:
//Dropdown
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Platform,
} from "react-native";
import { Feather } from "#expo/vector-icons";
import Responsive from "../responsive";
export default function DropDown({ options }) {
const [isOpen, setIsOpen] = useState(false);
const toggleDropdown = () => {
setIsOpen((prev) => !prev);
};
return (
<TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>
<Text style={styles.selectedText}>Round</Text>
<Feather name="chevron-down" size={24} />
{isOpen && (
<View style={styles.menu}>
{options.map((item) => (
<Text style={styles.option} key={item}>
{item}
</Text>
))}
</View>
)}
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
dropdownBox: {
backgroundColor: "#FDCD3C",
width: Responsive.width(364),
alignSelf: "center",
flexDirection: "row",
height: Responsive.height(50),
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: Responsive.width(15),
// position: "absolute",
borderRadius: 6,
elevation: Platform.OS === "android" ? 50 : 0,
marginVertical: Responsive.height(10),
zIndex: 0,
},
selectedText: {
fontFamily: "airbnb-bold",
// color: "#fff",
fontSize: Responsive.font(15),
},
menu: {
position: "absolute",
backgroundColor: "#fff",
width: Responsive.width(364),
paddingHorizontal: Responsive.width(15),
paddingVertical: Responsive.height(10),
// height: Responsive.height(20),
// bottom: 0,
top: Responsive.height(55),
zIndex: 2,
elevation: 2,
},
option: {
height: Responsive.height(20),
},
});
DropDown.defaultProps = {
options: [],
additionalStyles: {},
};
but I have a problem with the zIndex
the first dropdown is hiding under the second dropdown
I tried to play with the z-index in both places but it has not worked
Does anyone have an idea how I can solve this issue?
//Dropdowns container
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import GradientBackground from "../../../shared/GradientBackground";
import ListTable from "../components/ListTable";
import DropDown from "../../../shared/DropDown";
import Responsive from "../../../responsive";
export default function PriceList() {
return (
<GradientBackground>
<View>
<DropDown
options={[
"BR",
"PS",
"OV",
"PR",
"RAD",
"AC",
"EM",
"MQ",
"BAG",
"HS",
"CU",
"TRI",
]}
/>
<DropDown options={["1.50 - 1.99 carat"]} />
{/* <ListTable /> */}
</View>
</GradientBackground>
);
}
const styles = StyleSheet.create({});

I think zIndex only applies to siblings... so the nested menu won't pop "out" over its parent's siblings using it. You could probably apply descending zIndex's on the DropDown elements, so that each element can overlay the fields below it.
<DropDown style={{zIndex: 10}} />
<DropDown style={{zIndex: 9}} />
Also, if you add a style prop to your custom component, you'll need to use it for it to take effect:
So instead of:
export default function DropDown({ options }) {
...
<TouchableOpacity onPress={toggleDropdown} style={styles.dropdownBox}>
You'd have:
export default function DropDown({ options, style }) {
...
<TouchableOpacity onPress={toggleDropdown} style={[styles.dropdownBox, style]}>

Try this way it works for me
<View style={{zIndex: 1}}>
<Text style={styles.inputTitle}>Tags</Text>
<DropDownPicker
style={{
width: dynamicSize(340),
alignSelf: 'center',
marginVertical: dynamicSize(10),
borderColor: colors.GRAY_E0,
}}
dropDownContainerStyle={{
width: dynamicSize(340),
alignSelf: 'center',
borderColor: colors.GRAY_E0,
}}
placeholder="Select your tag"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
multiple={true}
mode="BADGE"
/>
</View>

Component out of sync in React Native

I'm working with my React Native project where I have like a "form" in which the user selects what day and between what hours they're available. There are two components involved:
The parent one: It has two time selectors and the day selector component
The child one: This is the day selector component. It displays the days in the week so the user can select whatever days they want.
This is the DaySelector:
import * as React from "react";
import { View, Text, StyleSheet, Button, Alert } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import colors from "../assets/constants/style-variables";
interface Item {
selected: Boolean;
day: String;
}
function Day(props) {
return (
<TouchableOpacity
onPress={props.onPress}
style={props.selected ? styles.buttonActive : styles.button}
>
<Text>{props.day}</Text>
</TouchableOpacity>
);
}
export default class DaySelector extends React.Component<
{ onChange },
{ selectedItems: undefined | Item[]; items: Item[] }
> {
constructor(props) {
super(props);
this.state = {
selectedItems: [],
items: [
{
selected: false,
day: "Lu",
},
{
selected: false,
day: "Ma",
},
{
selected: false,
day: "Mi",
},
{
selected: false,
day: "Ju",
},
{
selected: false,
day: "Vi",
},
{
selected: false,
day: "Sa",
},
{
selected: false,
day: "Do",
},
],
};
}
onPress = (index) => {
let items = [...this.state.items];
let item = { ...items[index] };
item.selected = !item.selected;
items[index] = item;
this.setState({ items });
this.setState((prevState) => ({
selectedItems: prevState.items.filter((i) => i.selected),
}));
this.props.onChange(this.state.selectedItems);
};
render() {
return (
<View>
<View style={styles.container}>
{this.state.items.map((item, index) => {
return (
<Day
key={index}
selected={item.selected}
day={item.day}
onPress={this.onPress.bind(this, index)}
/>
);
})}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
},
button: {
margin: 5,
borderColor: colors.lightGray,
borderWidth: 2,
borderRadius: 40,
padding: 7,
},
buttonActive: {
margin: 5,
borderColor: colors.primary,
borderWidth: 2,
backgroundColor: colors.primary,
borderRadius: 50,
padding: 7,
},
});
As you can see, it collects all the days selected and passes them into the onChange prop. That way I can access the results in my parent component, which is this one:
import React, { useState, useCallback, useReducer } from "react";
import { useMutation } from "#apollo/react-hooks";
import { REGISTER } from "../Queries";
import Loader from "../components/Loader";
import DateTimePicker from "#react-native-community/datetimepicker";
import { View, StyleSheet } from "react-native";
import colors from "../assets/constants/style-variables";
import { TouchableOpacity } from "react-native-gesture-handler";
import PrimaryText from "../assets/constants/PrimaryText";
import DaySelector from "../components/DaySelector";
function reducer(state, action) {
switch (action.type) {
case "refresh-days":
return {
dayList: action.value,
};
default:
return state;
}
}
export default function ScheduleSelect({ navigation, route }) {
const [loadingRegistration, setLoadingRegistration] = useState(null);
const [showTimePicker1, setShowTimePicker1] = useState(false);
const [showTimePicker2, setShowTimePicker2] = useState(false);
const [time1, setTime1] = useState(null);
const [time2, setTime2] = useState(null);
const [{ dayList }, dispatch] = useReducer(reducer, { dayList: [] });
const show1 = () => {
setShowTimePicker1(true);
};
const show2 = () => {
setShowTimePicker2(true);
};
const handleTimePick1 = (_event, selectedTime) => {
setShowTimePicker1(false);
if (selectedTime !== undefined) {
setTime1(selectedTime);
}
};
const handleTimePick2 = (_event, selectedTime) => {
setShowTimePicker2(false);
if (selectedTime !== undefined) {
setTime2(selectedTime);
}
};
return (
<View>
<View style={styles.container}>
<PrimaryText fontSize={20} margin={22} textAlign={"center"}>
Recibirás turnos en estos horarios:
</PrimaryText>
<View style={styles.cardHolder}>
<View style={styles.card}>
<View style={styles.timeHelper}>
<PrimaryText textAlign={"center"}>Desde</PrimaryText>
</View>
{time1 && (
<TouchableOpacity onPress={show1}>
<View style={styles.timeSelected}>
<PrimaryText textAlign={"center"} fontSize={36}>
{`${time1?.getHours()}:${
time1.getMinutes() < 10
? "0" + time1.getMinutes()
: time1.getMinutes()
}`}
</PrimaryText>
</View>
</TouchableOpacity>
)}
{!time1 && (
<TouchableOpacity style={styles.clockEdit} onPress={show1}>
<PrimaryText
fontSize={36}
letterSpacing={2}
textAlign={"center"}
>
--:--
</PrimaryText>
</TouchableOpacity>
)}
{showTimePicker1 && (
<DateTimePicker
value={new Date()}
testID="dateTimePicker"
mode={"time"}
is24Hour={true}
display="default"
onChange={handleTimePick1}
/>
)}
</View>
<PrimaryText fontSize={36} margin={7}>
-
</PrimaryText>
<View style={styles.card}>
<View style={styles.timeHelper}>
<PrimaryText textAlign={"center"}>Hasta</PrimaryText>
</View>
{time2 && (
<TouchableOpacity onPress={show2}>
<View style={styles.timeSelected}>
<PrimaryText textAlign={"center"} fontSize={36}>
{`${time2?.getHours()}:${
time2.getMinutes() < 10
? "0" + time2.getMinutes()
: time2.getMinutes()
}`}
</PrimaryText>
</View>
</TouchableOpacity>
)}
{!time2 && (
<TouchableOpacity style={styles.clockEdit} onPress={show2}>
<PrimaryText
fontSize={36}
letterSpacing={2}
textAlign={"center"}
>
--:--
</PrimaryText>
</TouchableOpacity>
)}
{showTimePicker2 && (
<DateTimePicker
value={new Date()}
testID="dateTimePicker"
mode={"time"}
is24Hour={true}
display="default"
onChange={handleTimePick2}
/>
)}
</View>
</View>
{time2?.getTime() < time1?.getTime() && (
<PrimaryText color={colors.warning}>
Por favor, seleccioná horarios válidos
</PrimaryText>
)}
<PrimaryText margin={5}> Los días: </PrimaryText>
<View style={styles.card}>
<DaySelector
onChange={(value) => dispatch({ type: "refresh-days", value })}
/>
</View>
</View>
<View style={styles.buttonWrapper}>
<TouchableOpacity
style={styles.button}
onPress={() => {
console.log(dayList);
}}
>
<PrimaryText color={colors.iceWhite}>SIGUIENTE</PrimaryText>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
height: "88%",
justifyContent: "center",
paddingTop: 15,
alignItems: "center",
},
clockEdit: {
padding: 7,
},
button: {
alignSelf: "flex-end",
backgroundColor: colors.primary,
padding: 7,
margin: 15,
borderRadius: 15,
},
buttonWrapper: {
justifyContent: "flex-end",
alignItems: "flex-end",
paddingRight: 15,
},
card: {
flexDirection: "row",
justifyContent: "center",
minWidth: "35%",
backgroundColor: colors.iceWhite,
borderRadius: 10,
padding: 20,
marginBottom: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
cardHolder: {
flexDirection: "row",
alignItems: "center",
},
timeHelper: {
justifyContent: "center",
position: "absolute",
marginTop: 5,
},
timeSelected: {
alignItems: "center",
justifyContent: "center",
},
editIcon: {
right: 3,
top: 3,
position: "absolute",
},
});
The problem is that when I console.log the value of the onChange prop, I get the items out of sync. To try and solve this, you see that I used a reducer, since the task is dependent of the result of the action. However, it does not change anything and still returns "outdated" information.
How can I sync both of the components?

This problems might come from your setState in your first component. you are calling the setState and then use the state straight after. But setState is asynchronous. So when you call your onChange, the state is still the previous one.
The prototype of setState is
setState(callback: (currentState) => newState | newState, afterSetState: (newState) => void)
So you can use the afterSetState callback to receive the new state and call your props.onChange
Also you are calling setState twice, but you could call it once and manipulate the state to return all in one.
However, if I could give you an advice, it'd be better controlling the state from the parent instead of the child. It avoids you calling a setState in the child and call the onChange in the parent which will set the state somewhere else again.