How can I use react navigation props in class component?

Question

I have created a Share icon which on click share's pdf or image file on social accounts like facebook, whatsapp, gmail, etc. I want to pass URL link of shareable file inside class component but getting error. If I hardcode the URL then it works fine but how can I pass URL which I receive from react navigation ?

Working code:

 import React, { Component } from 'react'; import { Share, View, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; const shareOptions = { title: 'Download Brochure', url: 'https://cpbook.propstory.com/upload/project/brochure/5bc58ae6ca1cc858191327.pdf' } export default class Screen extends Component { onSharePress = () => Share.share(shareOptions); render() { return ( <View> <Text style={styles.infoTitle}>Share: </Text> <TouchableOpacity onPress={this.onSharePress}> <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/> </TouchableOpacity> </View> } }

Above code works fine but below code gives error saying shareOptions is undefined. How can I overcome this problem ? I want to pass file URL inside shareOptions. I am getting file url from react navigation props i.e brochure.

Code:

import React, { Component } from 'react'; import { Share, View, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; export default class Screen extends Component { onSharePress = () => Share.share(shareOptions); <---Getting error here shareOptions undefined render() { const project = this.props.navigation.getParam('project', null); let { brochure } = project; const shareOptions = { title: 'Download Brochure', url: brochure } return ( <View> <Text style={styles.infoTitle}>Share: </Text> <TouchableOpacity onPress={this.onSharePress}> <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/> </TouchableOpacity> </View> ) }

How can I overcome above problem and how can I pass props i.e file URL in above case URL is in brochure props.

Hemadri Dasari · Accepted Answer · 2018-10-18 16:49:42Z

Just pass shareOptions object to onSharePress function as param and get shareOptions in onSharePress event handler function

import React, { Component } from 'react'; import { Share, View, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; export default class Screen extends Component { onSharePress = (shareOptions) => { Share.share(shareOptions); } render() { const { navigation } = this.props; const project = navigation.getParam('project', null); const { brochure } = project; const shareOptions = { title: 'Download Brochure', url: brochure } return ( <View> <Text style={styles.infoTitle}>Share: </Text> <TouchableOpacity onPress={() => this.onSharePress(shareOptions)}> <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/> </TouchableOpacity> </View> ) } }

What is the difference between onPress={() => this.onSharePress(shareOptions)} and onPress={this.onSharePress(shareOptions)}
If you use this onPress={this.onSharePress(shareOptions)} then the function gets called when the component renders but onPress={() => this.onSharePress(shareOptions)} this gets called only when you press
Ok learned something new today. Can you please tell me what terminology is this ? Is this handling events or arrow functions ? Can you please tell me what is it exactly ? so that I can study more about this
When you pass arguments to the event handler function you should do () => this.handle(arg1, arg2); if you don't pass parameters to the function then this.handle is what you would do
Can you please help me here -> stackoverflow.com/questions/53045415/…

Lee Brindley · Accepted Answer · 2018-10-18 17:42:22Z

You're not passing shareOptions to your share method, thus it is undefined.

There are many ways you could refactor your code, below you can see a more viable approach.

Since your render function used none of the logic above your return statement, I have simply migrated all of that into the onSharePress function, naturally if these differ, then you would want to pass it in via a parameter.

export default class Screen extends Component { onSharePress = () => { const project = this.props.navigation.getParam('project', null); let { brochure } = project; const shareOptions = { title: 'Download Brochure', url: brochure } Share.share(shareOptions); } render() { return ( <View> <Text style={styles.infoTitle}>Share: </Text> <TouchableOpacity onPress={this.onSharePress> <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/> </TouchableOpacity> </View> ) } }

Collectives™ on Stack Overflow

How can I use react navigation props in class component?

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related