React Navigation Utils
Utility functions for react-navigation
library
Usage
Install:
npm install --save react-navigation-utils
or
yarn add react-navigation-utils
Integration Guide:
1. withHeader(Screen, renderHeader) : renders custom header for StackNavigator
Params | Type | Description |
---|---|---|
Screen |
Component | The screen to have header |
renderHeader(props) |
Callback | Callback that accepts props returns header .props : {navigation: {…}, screenProps: {…}, navigationOptions: {…}} header : Valid ReactComponent |
;;;; const FirstScreen = <View style=stylessContainer> <Text>This is FirstScreen</Text> <TouchableOpacity onPress= propsnavigation > <Text>Open SecondScreen</Text> </TouchableOpacity> </View>; let FirstScreenWithHeader = ; { return <View style=stylessContainer> <Text>This is SecondScreen</Text> </View> ; } let SecondScreenWithHeader = ; const App = ; ; const styles = StyleSheet;
2. withHeaderAndClassProps(Screen, renderHeader) : renders custom header for StackNavigator
Params | Type | Description |
---|---|---|
Screen |
Component | The screen to have header (** must be a class** ) |
renderHeader(props) |
Callback | Callback that accepts props returns header .props : {navigation: {…}, screenProps: {…}, navigationOptions: {…}} props.navigation.state.params will have classProps & classMethods classProps : All props passed to the Screen ComponentclassMethods : All binded methods from Screen Component header : Valid ReactComponent |
;;; ; const FirstScreen = <View style=stylessContainer> <Text>`I'm FirstScreen`</Text> <TouchableOpacity onPress= propsnavigation> <Text style= margin: 10 >Open Second</Text> </TouchableOpacity> </View>; let FirstWithHeader = ; { super; thishandleBackClick = thishandleBackClick; } { /* arrowFunctionBindedMethod */ ToastAndroid; thispropsnavigation; }; { /* constructorBindedMethod */ ToastAndroid; thispropsnavigation; } { return <View style=stylessContainer> <Text>`I'm SecondScreen`</Text> </View> ; } let SecondWithHeader = ; const App = ; ; const styles = StyleSheet;
3. LazyLoading : To implement LazyLoading on TabNavigator
following steps should be followed
- withLazyLoading(Screen) : implements lazy loading on
TabNavigator
screen
Params | Type | Description |
---|---|---|
ScreenComponent |
Component | The component to be lazy loaded |
- handleLazyLoading(navigation,props) : handles
tabBarOnPress
events to enable LazyLoading
Params | Type | Description |
---|---|---|
navigation |
NavigationProp | Navigation property obtained from Navigator via navigationOptions |
props |
Props | Props obtained from tabBarOnPress on Navigator |
NOTE:
-
firstRoute
(the first screen on TabNavigator) orinitialRoute
should not have lazy loading. They should be rendered normally. -
If first screen has
LazyLoading
, nothing will be rendered.
;;;; const TabScreen1 = { /* uncomment below line to check lazy loading */ // console.log("rendered 1"); return <View style=stylessContainer> <Text>Im first tab</Text> </View> ;}; const TabScreen2 = { /* uncomment below line to check lazy loading */ // console.log("rendered 2"); return <View style=stylessContainer> <Text>Im second tab</Text> </View> ;}; const LazyTabScreen2 = ; const MyTabs = ; ; const styles = StyleSheet;
4. resetNavigationToFirst(routeName, navigationProp) : resets the stack to start with passed route
Params | Type | Description |
---|---|---|
routeName |
String | The route to be reset as first |
navigationProp |
Navigation Property | Navigation property obtained from Navigator |
;;;; const FirstScreen = <View style=stylessContainer> <Text>This is FirstScreen</Text> <TouchableOpacity onPress= > <Text>Open SecondScreen</Text> </TouchableOpacity> </View>; { return <View style=stylessContainer> <Text>This is SecondScreen</Text> </View> ; } const App = ; ; const styles = StyleSheet;