CODEWITHSUNDEEP
react-native
Shashika Virajh
Shashika Virajh

Reputation: 9457

function is not a function - react-native

In my project, I used stack navigator as the navigator. Inside navigationOptions, at headerRight, I used a custom button. When I try to call the onPress, it says the function is not a function.

this is the function

  sharePost() {
    // this.props.doShare();
    console.log("DONE");
  }

I have put the full code here. I want to use sharePost function inside the rightHeader of navigationOptions. 

     import React, { Component } from "react";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Animated,
  ScrollView,
  StyleSheet,
  Dimensions
} from "react-native";

import { PostProfileBar, WritePost } from "../../components";
import { ButtonWithoutBackground } from "../../mixing/UI";

const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height / 3;

class SharePostScreen extends Component {
  constructor(props) {
    super(props);

  sharePost() {
    // this.props.doShare();
    console.log("DONE");
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <WritePost profile={this.state.loggedUserProfile} />

          <View style={styles.sharePostWrapper}>
            <PostProfileBar profile={this.state.postedUserProfile} />

            <Image
              source={{
                uri: "https://pbs.twimg.com/media/DWvRLbBVoAA4CCM.jpg"
              }}
              resizeMode={"stretch"}
              style={styles.image}
            />
          </View>
        </ScrollView>
      </View>
    );
  }

  static navigationOptions = ({ navigation }) => ({
    headerTitle: "Share To Feed",
    headerTitleStyle: {
      paddingLeft: "20%",
      paddingRight: "20%"
    },
    headerStyle: {
      paddingRight: 10,
      paddingLeft: 10
    },
    headerLeft: (
      <Icon
        name={"close"}
        size={30}
        onPress={() => {
          navigation.goBack();
        }}
      />
    ),
    headerRight: (
      <ButtonWithoutBackground
        buttonText={styles.buttonText}
        onPress={this.sharePost()}
      >
        Post
      </ButtonWithoutBackground>
    )
  });
}

Upvotes: 1

Views: 3673

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

In order to call the class level methods inside the static method navigationOptions, you can do the following,

// Bind function using setParams

componentDidMount() {
  const { navigation } = this.props;
  navigation.setParams({
    referencedSharePost: this.sharePost,
  });
}

sharePost = (parameters) => {
    // this.props.doShare();
    console.log("DONE" + parameters);
  }

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;
  return {
     //... Other Options
     headerRight: (
      <ButtonWithoutBackground
        buttonText={styles.buttonText}
        onPress={() => params.referencedSharePost("I'm passing something")}
      >
        Post
      </ButtonWithoutBackground>
    )
  }
}

Upvotes: 3

Related Questions