Specifically for writing a callback from within a child component of a TabBarIOS.item that is triggered when a Tab is selected. (TabBarIOS in React Native)
There is no callbacks for ViewDidAppear and ViewWillAppear for tabs. You can pass a prop like isTabAcitve in TabIOSItem child component. And implement your child component depending upon isTabActive value. Your code TabBarIOSItem can look something like this:
<TabBarIOS.Item
title=""
selected={this.isTabActive("my-account-tab")}
icon={require("./img/user-tab.png")}
onPress={() => {
this.setState({activeTab:"my-account-tab"});
}}>
<MyAccountTabisTabActive={this.isTabActive("my-account-tab")} />
</TabBarIOS.Item>
isTabActive can be a method in your component containing TabIOS:
isTabActive(tabName)
{
return this.state.activeTab == tabName;
}
Also TabBarIOS don't render all tabs at once, A TabBarIOS child component is initialised and mounted for first time only when that tab is pressed for first time. So componentWillMount and componentDidMount can also be used as alternative of viewDidAppear and viewWillAppear.
Related
If I create custom drawer:
<DrawerStack.Navigator
drawerContent={props => <SideMenu {...props} />}>
It requires to pass props in order to get navigation object inside it.
And if I have following:
<ClientsStack.Navigator>
<ClientsStack.Screen name="Clients" component={ClientsScreen} />
<ClientsStack.Screen
name="ClientDetails"
component={ClientDetailsScreen}
/>
</ClientsStack.Navigator>
And inside ClientsScreen I have FlatList which has:
renderItem={({ item }) => <ClientCard id={item.id} />}
inside ClientCard component which is not screen it's just dummy component
I can use useNavigation hook there.
Why it can be used there but not in custom drawer component?
You can't use useNavigation inside your drawerContent cause the hook is only available from your screens and their childs.
At the origin the only way to get navigation was to pass it from your screen to their childs. But since the useContext hook exist, the library provides a useNavigation to easily get the navigation in deep nested components. (and simplify the code a lot)
A drawer custom component is not a screen or wrapped into a screen. So there is just no reason to get the navigation from it with useNavigation. And I easily guess there is no usecase where we have deep nested components inside it cause it is usually just a menu.
I am creating a custom dropdown component in React Native. I want to close it contents, when user presses screen outside of the component on any other part of the application.
However, I cannot know if user pressed outside the component. Is there a global OnPress event that can accessed or some other way, kindly let me know.
Edited:
add a logic when you click dropdown it should create a transparent view covering wholescreen in a absolute position.
Do it Like this:
// inside render
<Fragment>
<Nested>
<DropDown/>
</Nested>
{isDrop &&
<View style={styles.container} // height:'100%', width:'100%', backgroundColor:transparent , position: 'absolute'
//Trigger for pressing outside DropDown
onResponderStart={() => { condition for dropdown}}
//Required to start interacting with touches
onStartShouldSetResponder={(e) => {return true}}/>}
</Fragment>
DropDown component and view with touch must be the same level
I have an openDrawer method via React Navigation 2 working great in my View. However, when I create a child component and place my openDrawer button in it, I can no longer access this.props.navigation. How do I pass that down into the child component? I looked at state but that doesn't seem to be the correct way to address this? I am new to React/Native. Here is my button inside the main view and it works fine this way.
<View style={styles.menuBar}>
<TouchableOpacity style={styles.menuButton}
onPress={() => this.props.navigation.openDrawer()}>
<Text>☰</Text>
</TouchableOpacity>
// Other Stuff inside menuBar.
</View>
This menu button has a few other items as well and I am wanting to group together in a class component as a child that I can just import into various screens.
import { topMenuBar } from '../components/menuBar';
<topMenuBar />
However, the menu button no longer works now. I know it's because this.props is now referring to class topMenuBar and not the original class which is part of the nav structure. But I don't know the proper procedure for this step, whether it's using state or calling NavigationActions from react-navigation in the child method somehow.
Thanks for the help!
Every component opened using react-navigation has "this.props.navigation".
If you need it in child components you should pass to them as a prop:
export default class Home extends Component{
render(){
<View>
<OtherComponent navigation = {this.props.navigation}/>
</View>
}
}
Note: if you want a better help you should always provide code creating a fiddle and organize better your answers..
My code is Here
I'm using react-navigation TabNavigator, StackNavigator
I want a component to be re-rendered EVERY TIME I navigate to it.
But it was rendered only ONCE when I navigate to it.
How can I force TabNavigator's child to re-render in TabNavigator?
You can set new parameters when navigating to the screen. This causes react-navigation to invoke a render.
Here's an example from the react-navigation docs:
<Button
onPress={() => navigate('Profile', {name: 'Brent'})}
title="Go to Brent's profile"
/>
the second parameter to navigate is a params object. If you put something random there, it will cause a render every time you call it.
I want to make navigation drawer list item clickable, in that scenario i want navigator object to navigate another scene. How can i pass navigator reference there from main component to child component? My child components of Main components are ListView and ListItems. Any suggestion will be helpful.
You are able to pass it down just like any other prop. I'm assuming you're passing navigator down to the routed component...
<Navigator
ref='Navigator'
renderScene={(route, navigator) => {
let RoutedComponent = route.component
return (
<RoutedComponent navigator={navigator} {...route.props}/>
)
}}
/>
If so, in the RoutedComponent just pass the navigator down to it's child components through props.
<MyChildComponent navigator={this.props.navigator}/>