Why does tabBarIcon not navigate to my component in my Tab.Screen? - react-native

When building a custom Tab.Screen I've tried to pass a custom tabBarIcon. While the icon renders it will not navigate to the component TestScreen. In the docs for tabBarIcon my understanding the Tab.Screen should be written as:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableOpacity>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
}}
/>
When I omit the options:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
/>
the onClick renders the component when clicked. When I read the docs for Options for screens it mentions screenOptions should be passed on the Navigator or Group. I tried to see if I could find a similar Q&A:
React native react-navigation tabBarIcon does not display
Why Is My Component not Rendering Within my Tab.Screen?
but I was unable to see where my error is.
My current dependencies:
"dependencies": {
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/native": "^6.0.2",
"expo": "~42.0.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
How can I get my custom icon to render and navigate to the correct component?

Leaving this as an answer hoping it helps someone else down the road. After sleeping on this I examined my Tab.Screen again and I remembered for a TouchableOpacity to work it needed an onPress even though I was thinking the parent would take care of the navigation but this wasn't the case.
While this answer is somewhat accurate, with removing the TouchableOpacity, it would make the icon work, code:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
),
}}
/>
but it defeats the purpose of a custom button and the opacity change. After looking closer at options I wondered what if I passed down the navigation to onPress and used navigate?
Well it worked and I was left with:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={({ navigation }) => ({
tabBarIcon: () => (
<TouchableOpacity onPress={() => navigation.navigate(routes.FOO)}>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
})}
/>

Your TouchableOpacity is overlap with react navigation internal press handler, just wrap your icon with View
If you want customize press behavior of tab icon pass the listener object to listener props https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

Related

React native bottom tabs tabBardBadge does not work

I am trying to put a badge head on a tab bar in React Native but it is not working.
Below is an example of my code:
These are my module versions :
"#react-navigation/native": "^6.0.14",
"#react-navigation/bottom-tabs": "^6.4.1",
This is my code :
<Tab.Screen
name={'ApprovalTab'}
component={ApprovalScreen}
options={{tabBarBadge:3,
tabBarBadgeStyle:{color:'red'}}}
/>
try this code
import { Ionicons } from '#expo/vector-icons';
<Tab.Screen
name={'ApprovalTab'}
component={ApprovalScreen}
options={{
tabBarBadge: 0,
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" color="red" size={30} />
),
}}
/>
hope this will help you!!

Style does not work stably when using Expo and NativeBase

I developing my app with Expo and NativeBase.
Now this time, I would like you to help me with this weird Style problem.
Environment
"dependencies": {
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"babel-plugin-dotenv-import": "^2.2.0",
"expo": "~44.0.0",
"expo-location": "~14.0.1",
"expo-permissions": "~13.1.0",
"expo-status-bar": "~1.2.0",
"native-base": "^3.3.11",
"prettier": "^2.6.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-maps": "0.29.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0",
"tailwindcss": "^3.0.23"
},
Example
As I wrote above, Style dose not work stably for any reasons and it's the problem.
I will show you my example.
Expected Style
This picture is my expected view in this case.
What I want do is placing the white box that has texts and buttons inside on the center of the MapView.
Actual Style
This picture is the weird problem.
Style works well and is displayed like the above picture sometimes, but the other times, like the below picture, it does not work.
The weird thing is that every time I reload the app without editing my code, Style's appearance sometimes changes. This is the meaning of "Style does not work stably".
NOTE: This picture looks different a bit from the above picture like the button color. Please don't care about details because this is just a developing view.
What I did for fixing the problem
Clear cache and reload the app
Stop using my custom theme
These does not fix the problem.
code
Here is my code.
WordBox is called by HomePresenter.
When onPress is emitted, WordBox shows.
I'm not familiar with React Native and Expo very much, so I first faced this problem and am really troubled.
My explanation must be complex because I am not used to use English, but if it is alright with you, please tell me how to fix it.
Thank you.
export const WordBox = (isShow: boolean): JSX.Element | null => {
if (!isShow) {
return null
} else {
return (
<View width="full" height="full">
<Center width="full" height="full">
<Box
width={sizes.Box.width}
height={sizes.Box.height}
backgroundColor={colors.Base.White}
borderRadius="3xl"
shadow="7"
>
<Text mt="4" fontSize="3xl" fontWeight="bold" textAlign="center">
Set a new marker here?
</Text>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
Yes
</Button>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
No
</Button>
</Box>
</Center>
</View>
)
}
}
Additional Information(Without NativeBase code)
I styled my app again without NativeBase following great Abe's advise.
This issue still happens.
The minor appearance is different from above pictures a bit, but the view changes when reloading my app or rerunning it like these two pictures because Style doesn't work well.
Here is my code without using NativeBase but using tailwind-rn instead.
export const WordBox = (isShow: boolean): JSX.Element | null => {
const tailwind = useTailwind()
return (
<View style={tailwind('m-auto bg-white rounded-3xl h-1/6 w-10/12')}>
<Text style={tailwind('mt-2 text-2xl font-bold text-center')}>
Set a marker here?
</Text>
<View style={tailwind('mt-4 gap-x-2 flex-row justify-center')}>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>Yes</Text>
</Pressable>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>No</Text>
</Pressable>
</View>
</View>
)
}
Additional Information(Where WordBox is called)
WordBox is called inside MapView component which is wrapped by HomePresenter.
newmarker is called when I press on the screen, so new marker is not related to this problem, I think.
export const HomePresenter: FC<HomeProps> = ({
loading,
location,
newMarker,
showAddModal,
onPress,
}) => {
const tailwind = useTailwind()
return (
<View>
{loading ? (
<View style={tailwind('text-center justify-center')}>
<Text style={tailwind('font-bold text-2xl')}>Loading</Text>
</View>
) : (
<>
<MapView
key="mapview"
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={tailwind('h-full w-full')}
region={location}
onPress={(e: MapEvent) => {
onPress(e)
}}
>
{newMarker && newMarker}
<WordBox /> // WordBox is called HERE
</MapView>
</>
)}
</View>
)
// }
}
I resolved this problem thanks to #Abe.
The source of this issue is placing Modal inside MapView component.
I should've placed my modal underneath MapView. In fact, this is written in the react-native-maps Docs
I hope those who use react-native-maps do not make the same mistakes.

gestureResponseDistance does not work in React Navigation

I'm trying to create a Sheets type modal in ReactNative, but I can't close the screen with a swipe gesture because gestureResponseDistance doesn't work.
The code looks like the following, but what is causing it to not work?
Example of not responding to any part of the screen
const Stack = createStackNavigator();
<NavigationContainer>
<Stack.Navigator screenOptions={globalScreenOptions}>
<Stack.Screen name="TestPage" component={TestPage} />
<Stack.Screen
name="Setting"
component={Setting}
options={{
...TransitionPresets.ModalPresentationIOS,
cardOverlayEnabled: true,
gestureEnabled: true,
gestureResponseDistance: {
vertical: 800,
},
}}
/>
</Stack.Navigator>
</NavigationContainer>;
Example of only one part of the upper part of the screen responding
const Stack = createStackNavigator();
<NavigationContainer>
<Stack.Navigator screenOptions={globalScreenOptions}>
<Stack.Screen name="TestPage" component={TestPage} />
<Stack.Screen
name="Setting"
component={Setting}
options={{
...TransitionPresets.ModalPresentationIOS,
cardOverlayEnabled: true,
gestureEnabled: true,
}}
/>
</Stack.Navigator>
</NavigationContainer>;
The code is somewhat abbreviated.
After trying various things, it seems that adding gestureResponseDistance makes it unresponsive, but how can I make it so that the modal closes no matter where I swipe on the screen?
I'm a foreigner and I'm using a translation, so the language may be a little strange, but I would appreciate it if you could tell me more about it.
vartion
"react": "17.0.1",
"#react-navigation/native": "^6.0.0",
"#react-navigation/stack": "^6.0.0",
The value of gestureResponseDistance is a number not an object
In your case it should be
gestureResponseDistance: 800

Navigate to subsequent screen React Navigation 6 / React Native

Can anyone tell me what I’m doing wrong with the below:
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
I’ve got this in App.js (trimmed down of course):
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Groups"
component={Groups}
/>
<Stack.Screen
name="Group Detail"
component={GroupDetail}
/>
</Stack.Navigator>
</NavigationContainer>
}
Now, when I go from Home to Groups and then try to call navigation.navigate("GroupDetail");
I get this error:
The action 'NAVIGATE' with payload {"name":"GroupDetail"} was not handled by any navigator.
Do you have a screen named 'GroupDetail'?
Of course, I do have that screen and have checked the imports.
What am I missing here? I need to just push from Home, to Groups then to Group Detail.
I’ve tried the Nested Navigator documentation, but I think think it applies here (didn’t work anyway).
I had the name wrong.
Instead of Group Detail, it needed to be GroupDetail.

React Native 0.65 Navigation with stack screen and drawer very slow

When you navigated to the previous screen the previous screen is locked.
It doesn't work for me on android. On ios it works perfectly. I am using rn 0.65 I do not understand why it does not work. Navigating forwards fine but backwards does not work.
"react-native": "0.65.1"
"#react-native-community/cli": "^6.0.0",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/drawer": "^6.1.4",
"#react-navigation/native": "^6.0.2",
"#react-navigation/stack": "^6.0.7",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.3.0-alpha.3",
"react-native-screens": "^3.7.2",
Code
<NavigationContainer>
<Stack.Navigator
screenOptions={{
gestureEnabled: false,
}}>
{NoAuth.map(drawer =>
drawer.name === 'login' ? (
<Stack.Screen
name={drawer.name}
options={{
headerShown: false,
}}
key={drawer.name}
component={LoginScreen}
/>
) : (
<Stack.Screen
name={drawer.name}
options={{title: drawer.title}}
key={drawer.name}
component={
drawer.name === 'reset'
? ResetPassword
: drawer.name === 'config'
? ConfigConnect
: drawer.name === 'finalConfig'
? FinalConfigConnect
: null
}
/>
),
)}
</Stack.Navigator>
</NavigationContainer>
app.js
import 'react-native-gesture-handler';
Android - The solution:
animationEnabled: false
Example:
<Stack.Screen
name={drawer.name}
options={{
headerShown: false,
animationEnabled: false,
}}
key={drawer.name}
component={LoginScreen}
/>
You found the problem. In android, the animations make the navigation go very slow and it may seem that it is blocked.
The solution is to add in the animationEnabled option: false