Invalid prop `onPress` of type `boolean`

Question

I am making react native expo app and i have a question. I have 2 pages. In page1.js i set title of the page2.js and i have some problems with this. I have TouchableOpacity where i navigate to another page and there i set title of the createStackNavigator options. In createStackNavigator options i get the title that have been sent. It gives me error: Warning: Failed prop type: Invalid prop onPress of type boolean supplied to TouchableOpacity, expected function. And one more: this.props.onPress is not a function

What have i done wrong? Code:

// page1.js
import React, { Component } from 'react';
import { StyleSheet, View, Button, Image, Text, TouchableOpacity, ScrollView, SafeAreaView, ActivityIndicator } from 'react-native';
import { Header } from 'react-navigation';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import CoursesPlan from '../components/CoursesPlan'

const title = "a";

setTitle = (data) => {
title = data;
}

getTitle = () => {
return title;
}

class Page1 extends Component {
render() {
    return (
        <ScrollView>
            <View style={styles.MainContainer}>
                <TouchableOpacity
                    activeOpacity={.7}
                    onPress={() =>
                        setTitle("title"),
                        this.props.navigation.navigate('CourseOne', {
                        id: 1,
                    })}>
                    <CoursesPlan
                        number="1"
                        title="Что такое HTML?"/>
                </TouchableOpacity>
            </View>
        </ScrollView>
    );
}
}

export default createStackNavigator({
Main: {
    screen: Main,
    navigationOptions: {
        header: null,
    },
},
Page1: {
    screen: Page1,
    navigationOptions: ({ navigation }) => ({
        headerTitle: getTitle(),
        headerStyle: {
            elevation: 0,
            borderBottomWidth:1,
            borderBottomColor: "#dddddd",
        },
    }),
},},{
    initialRouteName: 'Main',
}
);

score 6 · Answer 1 · answered Jul 12 '19 at 23:07

6

You didn't supply a function to onPress because you didn't wrap it around braces.

Try this for your onPress function:

onPress={() => {
    setTitle("title");
    this.props.navigation.navigate('CourseOne', { id: 1,});
}}>

answered Jul 12 '19 at 23:07

brandonwang

1,603
10
17

Jonathan Meslien · Answer 2 · 2019-07-12T23:20:33.003

first why are you trying to modify a constant?

you cannot change headerTitle like that.

please refer to the react-navigation documentation

https://facebook.github.io/react-native/docs/navigation

https://reactnavigation.org/docs/en/headers.html

you do not use this.state, getTitle() will not re-render the view

https://facebook.github.io/react-native/docs/state

you use this.props but you have not written a constructor.

What's the difference between "super()" and "super(props)" in React when using es6 classes?


class Test extends Component {

   constructor(props) { 
      super(props)
   }

   render() {
      return(<View />)
   }
 }

Invalid prop `onPress` of type `boolean`

2 Answers2