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.

Answer 1

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>
   )
  }
} 

Answer 2

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>
        )

    }
}