Is there any alternate to withNavigationFocus imported from #react-navigation/native? or can we write our own withNavigationFocus just like we can write our own withNavigation like this https://stackoverflow.com/a/63818841/14341861.
Related
I Am working on this to implement Dark Mode in React Native using React Navigation. but it changes only the bottom bar navigator not the screens inside that. can you help me with this
Snack Code
https://snack.expo.io/#belgin/news-app
You're responsible for styling inside your own components. You're styling background as light, setting navigation theme to dark is not gonna magically change the colors you have defined.
For changing themes to work for your components, you need to use the useTheme hook to set colors in your own components instead of hardcoding them.
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '#react-navigation/native';
function MyScreen() {
const { colors } = useTheme();
return (
<View style={{ flex: 1, backgroundColor: colors.background }}>
{/* screen content */}
</View>
);
}
https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components
Other method is that, you can also create a state which can store your current view-mode (light/dark mode). This is very simple to implement using react-redux. You can refer this video to get better understanding of react and redux.
This is far more simpler implementation of redux.
Note - dependencies such as thunk, react-redux, etc etc are not installed in this video. You can identify which dependencies you're gonna need step-by-step by following error that came in your way. Eg. if createStore gives error try to import createStore as legacy_createstore like done in this question
I want to add icons to my react native snack expo app.
I tried using this:
import MaterialIcons from '#expo/vector-icons'
And when I added the component <MaterialIcons name="delete" /> in my main functional component, it throws me an error.
I am using the online code editor called snack expo for building my app. Can someone help me how to use vector icons in the snack expo?
Many thanks for considering my request.
Import MaterialIcons like this:
import { MaterialIcons } from '#expo/vector-icons';
// then use it
<MaterialIcons name="delete" />
For more: MaterialIcons
I have an app that is being updated from react navigation 2 to react navigation 5 and was wondering how to access the navigation prop outside of a screen component. For example in RN2 we were given NavigationActions which allowed us to do:
import { StackActions, NavigationActions } from 'react-navigation';
NavigationActions.navigate({ routeName })
This was helpful when dealing with a file that used redux-saga or redux-form as we could navigate based on the logic.
Is there something similar in RN5 I can use to make this possible?
As I know about it, This checks and gives warnings for React-Native code and its lifecycles.
I read about it from What is StrictMode in react?
How can I use it in react native ?
Here is a simple example to use StrictMode in React Native
StrictMode can be directly imported from React and can used like wrapping up View inside it.
import React, {Component, StrictMode} from 'react';
import {View} from 'react-native';
class Example extends Component {
render() {
return (
<StrictMode>
<View />
</StrictMode>
);
}
}
export default Example;
Please check this expo snack.
I have a switch-navigator for logged-in and not-logged-in states.
When user is logged in, switcher loads a DrawerNavigator which loads Screen1 and loads the sidebar (SideBar.js) via contentComponent
Inside Screen1 I'm calling the this.props.navigation.navigate('DrawerOpen'); via the onPress event of the menu burger button. But it's not opening the drawer. What am I doing wroing
You call in a screen which isn't contained in DrawerNavigation, so it can't navigate. To open drawer in anywhere just use
import { DrawerActions } from 'react-navigation';
...
openDrawer = () => {
this.props.navigation.dispatch(DrawerActions.openDrawer());
}
...
use this:
this.props.navigation.openDrawer();
In React Navigation 3.x, you can use this.props.navigation.openDrawer(); to open the drawer in CreateDrawerNavigator. It is the same as using this.props.navigation.dispatch(DrawerActions.openDrawer());.You can checkout the official docs here : https://reactnavigation.org/docs/en/drawer-based-navigation.html