Search code examples
react-nativereact-navigationreact-navigation-v5

React navigation 5 : Pass arguments with Navigation


I am using class components with react navigation5 and I have two classes :

Class DrawerComponent.js

export default class DrawerContent extends Component{   
constructor(props){
 super(props);    
}
render(){
 return(
    <View style={{flex:1}}>
        <DrawerContentScrollView {...this.props}>            
                <Drawer.Section style={styles.drawerSection}>
                    {
                          <DrawerItem 
                                icon={({color,size}) => (
                                 <Icon 
                                 name=""
                                 color={color}
                                 size={size}
                                 />
                                )}
                                label={menu.localizedTitle}
                                onPress = {() =>**{this.props.navigation.navigate("RecordList",{body :'abc' }**)}}/>)
        </Drawer.Section>             
            </View>
        </DrawerContentScrollView>         
    </View>
)}}

Now if I have to access value of body in another class, how can I do so?


Solution

  • in your RecordList component, you can access the params with route

    const RecordList = ({navigation, route})=>{
      const {body} = route.params;
      console.log(body)
    }
    

    in class based component:

    class RecordList extends Component{
      
      render(){
        const {body} = this.props.route.params;
        console.log(body)
        return <View><Text>{body}</Text></View>
      }
    }