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>
)
}
Related
I have a FlatList that receives (immutable) data of max. 50 elements and it renders in each list item Svg using react-native-svg.
Parts of the graphics are wrapped with a Pressable component for selecting the element.
Now the problem is, that I can't select any of the elements, until the FlatList went through all 50 items.
What I don't get is, that the offscreen items aren't even rendered, it's just the containers. Once it's all rendered, I can click the elements, the ripple effect shows and the event is fired.
Specs:
Expo # 46.0.0
React Native # 0.69.6
React # 18.0.0
Running with android via expo start --no-dev --minify then open in Expo Go
Reproduction:
import React, { useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import { Foo } from '/path/to/Foo'
import { Bar } from '/path/to/Bar'
export const Overview = props => {
const [data, setData] = useState(null)
// 1. fetching data
useEffect(() => {
// load data from api
const loaded = [{ id: 0, type: 'foo' }, { id: 1, type: 'bar' }] // make a list of ~50 here
setData(loaded)
}, [])
if (!data?.length) {
return null
}
// 2. render list item
const onPressed = () => console.debug('pressed')
const renderListItem = ({ index, item }) => {
if (item.type === 'foo') {
return (<Foo key={`foo-${index}`} onPressed={onPressed} />)
}
if (item.type === 'bar') {
return (<Foo key={`bar-${index}`} onPressed={onPressed} />)
}
return null
}
// at this point data exists but will not be changed anymore
// so theoretically there should be no re-render
return (
<FlatList
data={data}
renderItem={renderListItem}
inverted={true}
decelerationRate="fast"
disableIntervalMomentum={true}
removeClippedSubviews={true}
persistentScrollbar={true}
keyExtractor={flatListKeyExtractor}
initialNumToRender={10}
maxToRenderPerBatch={10}
updateCellsBatchingPeriod={100}
getItemLayout={flatListGetItemLayout}
/>
)
}
}
// optimized functions
const flatListKeyExtractor = (item) => item.id
const flatListGetItemLayout = (data, index) => {
const entry = data[index]
const length = entry && ['foo', 'bar'].includes(entry.type)
? 110
: 59
return { length, offset: length * index, index }
}
Svg component, only Foo is shown, since Bar is structurally similar and the issue affects both:
import React from 'react'
import Svg, { G, Circle } from 'react-native-svg'
const radius = 25
const size = radius * 2
// this is a very simplified example,
// rendering a pressable circle
const FooSvg = props => {
return (
<Pressable
android_ripple={rippleConfig}
pressRetentionOffset={0}
hitSlop={0}
onPress={props.onPress}
>
<Svg
style={props.style}
width={size}
height={size}
viewBox={`0 0 ${radius * 2} ${radius * 2}`}
>
<G>
<Circle
cx='50%'
cy='50%'
stroke='black'
strokeWidth='2'
r={radius}
fill='red'
/>
</G>
</Svg>
</Pressable>
)
}
const rippleConfig = {
radius: 50,
borderless: true,
color: '#00ff00'
}
// pure component
export const Foo = React.memo(FooSvg)
The rendering performance itself is quite good, however I can't understand, why I need to wait up to two seconds, until I can press the circles, allthough they have already been rendered.
Any help is greatly appreciated.
Edit
When scrolling the list very fast, I get:
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 4740, "dt": 4156, "prevDt": 5142}
However, the Components are already memoized (PureComponent) and not very complex. There must be another issue.
Hardware
I cross tested with an iPad and there is none if the issues described. It seems to only occur on Android.
Please ignore grammatical mistakes.
This is the issue with FlatList. Flat list is not good for rendering a larger list at one like contact list. Flatlist is only good for getting data from API in church's like Facebook do. get 10 element from API and. then in the next call get 10 more.
To render. a larger number of items like contact list (more than 1000) or something like this please use https://bolan9999.github.io/react-native-largelist/#/en/
import React, {useRef, useState} from 'react';
import {
Image,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {LargeList} from 'react-native-largelist-v3';
import Modal from 'react-native-modal';
import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import fonts from '../constants/fonts';
import {moderateScale} from '../constants/scaling';
import colors from '../constants/theme';
import countries from '../Data/larger_countries.json';
const CountrySelectionModal = ({visible, setDefaultCountry, setVisible}) => {
const pressable = useRef(true);
const [country_data, setCountryData] = useState(countries);
const [search_text, setSearchText] = useState('');
const onScrollStart = () => {
if (pressable.current) {
pressable.current = false;
}
};
const onScrollEnd = () => {
if (!pressable.current) {
setTimeout(() => {
pressable.current = true;
}, 100);
}
};
const _renderHeader = () => {
return (
<View style={styles.headermainView}>
<View style={styles.headerTextBg}>
<Text style={styles.headerTitle}>Select your country</Text>
</View>
<View style={styles.headerInputBg}>
<TouchableOpacity
onPress={() => searchcountry(search_text)}
style={styles.headericonBg}>
<FontAwesome
name="search"
size={moderateScale(20)}
color={colors.textColor}
/>
</TouchableOpacity>
<TextInput
placeholder="Select country by name"
value={search_text}
placeholderTextColor={colors.textColor}
style={styles.headerTextInput}
onChangeText={text => searchcountry(text)}
/>
</View>
</View>
);
};
const _renderEmpty = () => {
return (
<View
style={{
height: moderateScale(50),
backgroundColor: colors.white,
flex: 1,
justifyContent: 'center',
}}>
<Text style={styles.notFoundText}>No Result Found</Text>
</View>
);
};
const _renderItem = ({section: section, row: row}) => {
const country = country_data[section].items[row];
return (
<TouchableOpacity
activeOpacity={0.95}
onPress={() => {
setDefaultCountry(country),
setSearchText(''),
setCountryData(countries),
setVisible(false);
}}
style={styles.renderItemMainView}>
<View style={styles.FlagNameView}>
<Image
source={{
uri: `https://zoobiapps.com/country_flags/${country.code.toLowerCase()}.png`,
}}
style={styles.imgView}
/>
<Text numberOfLines={1} ellipsizeMode="tail" style={styles.text}>
{country.name}
</Text>
</View>
<Text style={{...styles.text, marginRight: wp(5), textAlign: 'right'}}>
(+{country.callingCode})
</Text>
</TouchableOpacity>
);
};
const searchcountry = text => {
setSearchText(text);
const items = countries[0].items.filter(row => {
const result = `${row.code}${row.name.toUpperCase()}`;
const txt = text.toUpperCase();
return result.indexOf(txt) > -1;
});
setCountryData([{header: 'countries', items: items}]);
};
return (
<Modal
style={styles.modalStyle}
animationIn={'slideInUp'}
animationOut={'slideOutDown'}
animationInTiming={1000}
backdropOpacity={0.3}
animationOutTiming={700}
hideModalContentWhileAnimating={true}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={700}
useNativeDriver={true}
isVisible={visible}
onBackdropPress={() => {
setVisible(false);
}}
onBackButtonPress={() => {
setVisible(false);
}}>
<LargeList
showsHorizontalScrollIndicator={false}
style={{flex: 1, padding: moderateScale(10)}}
onMomentumScrollBegin={onScrollStart}
onMomentumScrollEnd={onScrollEnd}
contentStyle={{backgroundColor: '#fff'}}
showsVerticalScrollIndicator={false}
heightForIndexPath={() => moderateScale(49)}
renderIndexPath={_renderItem}
data={country_data}
bounces={false}
renderEmpty={_renderEmpty}
renderHeader={_renderHeader}
headerStickyEnabled={true}
initialContentOffset={{x: 0, y: 600}}
/>
</Modal>
);
};
export default CountrySelectionModal;
const styles = StyleSheet.create({
modalStyle: {
margin: moderateScale(15),
borderRadius: moderateScale(10),
overflow: 'hidden',
backgroundColor: '#fff',
marginVertical: moderateScale(60),
justifyContent: 'center',
},
headermainView: {
height: moderateScale(105),
backgroundColor: '#fff',
},
headerTextBg: {
height: moderateScale(50),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
headerTitle: {
textAlign: 'center',
fontFamily: fonts.Bold,
fontSize: moderateScale(16),
color: colors.textColor,
textAlignVertical: 'center',
},
headerInputBg: {
height: moderateScale(40),
borderRadius: moderateScale(30),
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: moderateScale(10),
backgroundColor: colors.inputbgColor,
flexDirection: 'row',
},
headericonBg: {
backgroundColor: colors.inputbgColor,
alignItems: 'center',
justifyContent: 'center',
width: moderateScale(40),
height: moderateScale(40),
},
headerTextInput: {
backgroundColor: colors.inputbgColor,
height: moderateScale(30),
flex: 1,
paddingTop: 0,
includeFontPadding: false,
fontFamily: fonts.Medium,
color: colors.textColor,
paddingBottom: 0,
paddingHorizontal: 0,
},
notFoundText: {
fontFamily: fonts.Medium,
textAlign: 'center',
fontSize: moderateScale(14),
textAlignVertical: 'center',
color: colors.textColor,
},
renderItemMainView: {
backgroundColor: colors.white,
flexDirection: 'row',
alignSelf: 'center',
height: moderateScale(43),
alignItems: 'center',
justifyContent: 'space-between',
width: wp(100) - moderateScale(30),
},
FlagNameView: {
flexDirection: 'row',
justifyContent: 'center',
paddingLeft: moderateScale(12),
alignItems: 'center',
},
imgView: {
height: moderateScale(30),
width: moderateScale(30),
marginRight: moderateScale(10),
borderRadius: moderateScale(30),
},
text: {
fontSize: moderateScale(13),
color: colors.textColor,
marginLeft: 1,
fontFamily: fonts.Medium,
},
});
I want to achieve something like this in React Native:
I have a TextInput component and I want to put an icon to the right side. The user can click it, then I can display some text in a modal or in a another component.
Is this possible in react native?
return(
<View style={styles.container}>
<TextInput
placeholder="Állat neve"
value={AllatNev}
style={styles.textBox}
onChangeText={(text) => setAllatNev(text)}
/>
</View>
);
}
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: color_theme_light.bodyBackground
justifyContent: 'center',
alignItems:'center'
},
textBox:{
borderWidth:2,
borderColor: color_theme_light.textBoxBorder,
margin:15,
borderRadius:10,
padding: 10,
fontFamily:'Quicksand-Medium'
},
});
Yes -- you can position your info button over the TextInput using absolute positioning and a zIndex, for example:
import * as React from 'react';
import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.textBoxParent}>
<TextInput style={styles.textBox} placeholder="Állat neve"/>
<TouchableOpacity style={styles.textBoxButton} onPress={() => {
//launch your modal
}}>
<Text>i</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
textBoxParent: {
justifyContent: 'center'
},
textBox:{
borderWidth:2,
borderColor: 'gray',
margin:15,
borderRadius:10,
padding: 10,
},
textBoxButton: {
position: 'absolute',
right: 20,
zIndex: 100,
width: 20,
height: 20,
borderWidth: 1,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center'
}
});
Working example: https://snack.expo.dev/OFMTc8GHE
Heres a full example of what you want (https://snack.expo.dev/bjzBFuE4W). And below I explain the code.
Fist I made a Modal from react native that takes in modalVisible, setModalVisible, and appears when modalVisible is true.
import * as React from 'react';
import { Text, View, StyleSheet,TextInput ,TouchableOpacity,Modal} from 'react-native';
import { AntDesign } from '#expo/vector-icons';
import { MaterialIcons } from '#expo/vector-icons';
const ModalInfo = ({modalVisible, setModalVisible})=>{
return (
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<View
style={{
width:200,height:200,backgroundColor:"gray",borderWidth:2,
justifyContent:"center",alignItems:"center"
}}
>
<TouchableOpacity onPress={()=>{setModalVisible(false)}}>
<MaterialIcons name="cancel" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
</Modal>
)
}
Next I made a View to wrap around the textInput so I can also add an svg of the info icon. And then set the outside view to have flexDirection:"row", so everything would be ordered the way you wan't.
const TextInputWithModal = ()=>{
const [modalVisible, setModalVisible] = React.useState(false);
const [AllatNev,setAllatNev]= React.useState("");
return (
<View style={styles.textInputContainer}>
<TextInput
placeholder="Állat neve"
value={AllatNev}
style={styles.textBox}
onChangeText={(text) => setAllatNev(text)}
/>
<TouchableOpacity onPress={()=>{setModalVisible(true)}}>
<AntDesign name="infocirlceo" size={24} color="black" />
</TouchableOpacity>
<ModalInfo modalVisible={modalVisible} setModalVisible={setModalVisible}/>
</View>
)
}
export default function App() {
return (
<View style={styles.container}>
<TextInputWithModal/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems:"center",
},
textInputContainer:{
borderRadius:10,
padding: 10,
flexDirection:"row",
margin:15,
borderWidth:2,
},
textBox:{
fontFamily:'Quicksand-Medium',
marginRight:20,
},
});
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>
I added a button in tabBarIcon and it is not completely hidden when using tabBarVisible,my code:
file: App.js
i'm just added a different icon in AddScreen.
import HomeStack from './stacks/Home';
import UserStack from './stacks/User';
import AddStack from './stacks/Add';
import AddIcon from './AddIcon';
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeStack}
options={{
tabBarIcon: () => <IconAnt name={'home'} style={styles.icon} />,
}}
/>
<Tab.Screen
name="Add"
component={AddStack}
options={{
tabBarIcon: () => <AddIcon />, // icon add
title: '',
}}
/>
<Tab.Screen
name="User"
component={UserStack}
options={{
tabBarIcon: () => <IconAnt name={'user'} style={styles.icon} />,
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
file: stacks/Home.js
when press 'go to detail', I'm hide the tabbar
function HomeScreen({navigation}) {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Home!</Text>
<TouchableOpacity onPress={() => navigation.navigate('Detail')}>
<Text>go to detail/Text>
</TouchableOpacity>
</View>
);
}
function DetailScreen() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Detail!</Text>
</View>
);
}
const HomeStack = createStackNavigator();
export default function ({navigation, route}) {
var tabBarVisible = true;
if (typeof route.state !== 'undefined') {
const {routes} = route.state;
if (routes.length > 1) {
tabBarVisible = false;
}
}
navigation.setOptions({tabBarVisible});
// tabbar will hide when moving to Detail screen
return (
<HomeStack.Navigator>
<HomeStack.Screen name={'Home'} component={HomeScreen} />
<HomeStack.Screen name={'Detail'} component={DetailScreen} />
</HomeStack.Navigator>
);
}
AddIcon.js
file icon of AddScreen
export default function () {
return (
<View style={styles.container}>
<View style={styles.button}>
<IconAnt name={'plus'} style={{fontSize: 30, color: '#fff'}} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
alignItems: 'center',
zIndex: 99,
},
button: {
alignItems: 'center',
justifyContent: 'center',
width: 72,
height: 72,
borderRadius: 72 / 2,
backgroundColor: 'red',
position: 'absolute',
marginTop: -45,
shadowColor: 'red',
shadowRadius: 5,
shadowOffset: {height: 10},
shadowOpacity: 0.3,
borderWidth: 2,
borderColor: '#FFFFFF',
zIndex: 99,
},
});
Screenshot:
Home screen
Detail screen
How do I hide it completely? Thanks!
Actually your tab bar is hiding but as you place this on above of the tabs that's why you still able to see after making tabBarVisible = false you also have to hide it manually with styles while making tabBarVisible = false, Check the route and apply styles dynamically.
pass style object to tabBarOptions
tabBarOptions: {
style: {
opacity: 0
}
}
Or this may also work
tabBarOptions: {
style: {
top: 50
}
}
Edit: By looking into your code I had to change some structure of your navigator and now it's working in the snack, You were rendering stack inside the tabs but it should be tabs inside a stack.
Link to snack
I just faced the same issue when I used the custom image.
Here is my solution.
You have to find the index of the Tab you want to hide. Then you can handle the opacity of the tab bar by checking the index.
tabBarOptions={{
style: {...styles.navigator, opacity: routeIndex === 2 ? 0 : 1},
}}
const HomeTab = createBottomTabNavigator();
export const HomeTabScreens = ({route}) => {
const routeIndex = route.state.index; // 2 is the screen that I want to hide.
...
}
you can add focused prop in tabBarIcon and apply style accordingly :
tabBarIcon: ({focused) => {
<Image
source={InstaCircleIcon}
style={[
{width: 87, height: 87},
focused && {width: 0, height: 87},
]}
/>
}
Complete example
<Tab.Screen
name="Addpost"
component={Addpost}
options={{
tabBarLabel: '',
tabBarIcon: ({focused}) => (
<TouchableOpacity style={[{top: -30, borderRadius: 50}]}>
<Image
source={InstaCircleIcon}
style={[
{width: 87, height: 87},
focused && {width: 0, height: 87},
]}
/>
</TouchableOpacity>
),
tabBarVisible: false,
}}
/>
I have React navigation setup to return my component, everything so far seems to be setup properly from what I've read and watched, when I load up the app through expo I get "Invariant Violation: _default(...): Nothing was returned from render." I'm not sure if there's something wrong with my Navigator itself or how I'm calling my Navigator maybe? Not sure exactly how it knows to call that specific component in the HomeStack.Navigator, I would figure it needed some sort of like route to call to load that specific component by it's name? Might be missing a whole file, not sure.
Navigation file
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../Home";
const HomeStack = createStackNavigator();
const HomeStackScreen = () => {
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
</HomeStack.Navigator>;
};
export default () => {
<NavigationContainer>
<HomeStackScreen />
</NavigationContainer>;
};
App.js file
import React from "react";
import Navigation from "./config/navigation";
export default () => <Navigation />;
Home component file
import React from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
bannerText: "PNW Plants",
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.banner}>
<Text style={styles.bannerText}>{this.state.bannerText}</Text>
</View>
<Text
style={{
color: "darkgreen",
marginTop: 40,
fontSize: 22,
textDecorationLine: "underline",
textDecorationColor: "lightgrey",
}}
>
Discovered Plants
</Text>
<ScrollView
style={styles.grid}
contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap" }}
>
<Text style={styles.gridUnit1}></Text>
<Text style={styles.gridUnit}></Text>
<Text style={styles.gridUnit}></Text>
<Text style={styles.gridUnit}></Text>
<Text style={styles.gridUnit1}></Text>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
alignItems: "center",
overflow: "scroll",
},
banner: {
backgroundColor: "darkgreen",
height: 55,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
bannerText: {
color: "white",
fontSize: 30,
fontWeight: "bold",
},
gridBanner: {
fontSize: 26,
marginTop: 40,
color: "darkgreen",
},
grid: {
display: "flex",
padding: 10,
width: "90%",
borderTopWidth: 1,
borderBottomWidth: 1,
height: "60%",
borderStyle: "solid",
borderColor: "lightgrey",
marginTop: 40,
overflow: "hidden",
},
gridUnit: {
backgroundColor: "lightgrey",
height: 80,
width: 80,
margin: 10,
overflow: "scroll",
},
gridUnit1: {
backgroundColor: "orange",
height: 80,
width: 80,
margin: 10,
},
});
Add return if you are using curly braces in an arrow function
const HomeStackScreen = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
</HomeStack.Navigator>
)
};
or simply do like this
const HomeStackScreen = () => (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
</HomeStack.Navigator>
)
};
In your code, HomeStackScreen is returning undefined, that's why you are getting the error.
Also, modify
export default () => (
<NavigationContainer>
<HomeStackScreen />
</NavigationContainer>;
})