CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
vicky keshri
vicky keshri

Reputation: 447

How to pass navigation props to presentational component

For a Flatlist, I have created a presentational component and pass items as props to child component which is working fine. Now, I am using TouchableOpacity in presentational component and navigate it to different component. How can I achieve this.?

MyFlastList:

_renderItem({item, index}) {
        return(
            <View>
              {index == 0 && <MachineInformationCard {...item}/>}
              {index > 0 && <MachineFunctionality {...item} />}   
            </View>
        )
    }

MyPresentational layer:

import React from 'react';
import {View,Text, StyleSheet, TouchableOpacity} from 'react-native';
export default MachineFunctionality = (props) => {
    let acheivedPercentage = ((props.acheived_value/props.target_value)*100);
    let acheivedPercentageValue = acheivedPercentage;
    acheivedPercentage = acheivedPercentageValue + '%';
    return(
        <TouchableOpacity style={styles.CardItem} 
        onPress={()=> this.props.navigation.navigate('MachineFunctionalityDetail')}>
            <Text style={{fontSize:18, color:'black'}}>{props.level}</Text>
            <Text style={{marginTop: 5}}>{props.taget_label}</Text>
            <View style={[styles.barContainer, {width:'100%'}]}>
                {/* <Text style={{textAlign:'center', fontSize:12, padding:2}}>100%</Text> */}
            </View>
            <Text style={{marginTop: 5}}>{props.acheived_label} ({Math.ceil(acheivedPercentageValue)}%)</Text>
            <View style={[styles.barContainer,{width: acheivedPercentage}]}>
            </View>
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    CardItem: {
        flex: 1,
        height:120,
        padding:8,
        backgroundColor:'#e7e7e7',
        borderRadius: 5,
        overflow: 'hidden',
        margin: 5,
        shadowColor: 'black',
        shadowOpacity: 0.8,
        elevation: 8
    },
    barText: {
        justifyContent: 'center',
        fontSize: 13,
        margin: 10,
        fontWeight: 'bold',
    },
    barContainer: {
        height: 10,
        marginTop:5,
        backgroundColor:'lightskyblue',
        borderColor: 'blue',
        borderWidth: 1,
        borderRadius: 3,
        shadowOpacity: 0,
        elevation: 2,
    },

})

MyNavigator

const MachineStackNavigator = createStackNavigator({
  MachineHome: {screen: AllMachine, navigationOptions:{header: null}},
  MachineFunctionalityDetail: {screen:MachineFunctionalityDetail, navigationOptions:{header: null}},
  MachineProfile:{screen:MachineProfile, navigationOptions:{header: null}}
})

Upvotes: 0

Views: 92

Answers (2)

FreakyCoder
FreakyCoder

Reputation: 869

I have created a library for handling navigation problem and also prevent the usage of this.props.navigation prop.

React Navigation Helpers

Usage is very simple. On your App.js or your navigator simply set the global level navigator. 

import NavigationService from "react-navigation-helpers";


<MainNavigator
  ref={navigatorRef =>
    NavigationService.setGlobalLevelNavigator(navigatorRef)
  }
/>

Then you use ANYWHERE on your project with this simple code segment: 

NavigationService.navigate("home")

Of course, you still need to import the NavigationService :)

UPDATED:

How to pass prop with this library?

The usage does not change. Simply put your prop as the secondary prop as same as React Navigation itself.

Navigate 
NavigationService.navigate("home", {data: myData, myId: "d1f01df1" })
Push 
NavigationService.push("home", {data: myData, myId: "d1f01df1" })

How to receive the passed props from navigation or push functions?

const data = props.navigation.getParam("data", null) // Second one is default value
const myId = props.navigation.getParam("myId", "") // Second one is default value

You can find a more detailed document on the library's README. If you still have a question, feel free to ask, I will help you gladly.

The new release is here: Release 0.1.0

Upvotes: 1

Anwar Gul
Anwar Gul

Reputation: 683

First just use HOC provided by React Navigation such as withNavigation that injects the navigation prop.

Just Import withNavigation from react-navigation in your Presentational Component.

import {withNavigation} from 'react-navigation'; // Add this line

and Export Your Presentational Component like this:

export default withNavigation(MachineFunctionality);

This way you don't have to change anything else in your component.

Upvotes: 0

Related Questions