CODEWITHSUNDEEP
react-native
Kay
Kay

Reputation: 19660

React Native - OnPress button not working

I have a button with a onPress event i am trying to simply console log that the button was successfully pressed.

The button is within my template file i have extracted this portion of code to a separate file, ive done the same for my tyles.

The add() function associated with the press does not fire when i press the add button, so the console.log does not show.

But the console.log does does show on initial load of the screen ( i dont know why this is )

items.screen.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import style from './items.style'
import template from './items.template';

export default class ItemsScreen extends Component {

    static navigationOptions = {
        title: "Items"
    }

    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    add() {
        console.log("pressed add button");
    }


    render() {
        return template(this, style);
    }

}

items.template.js

import React, { Component } from 'react';
import { Text, View, TextInput, Button } from 'react-native';
import { style } from './items.style'

export default (template, style) => {
    return (
        <View style={style.container}>
            <TextInput
                style={{ width: 300 }}
                value={template.state.text}
                onChangeText={(text) => template.setState({ text })}
            />

            <Button
                onPress={template.add()}
                title="Add"
            />
        </View>
    );
}

Upvotes: 1

Views: 3507

Answers (2)

Johan
Johan

Reputation: 8256

You are not assigning template.add to the on press event, instead your code is executing the add function and attempting to assign the result of that to the onPress event.

I find the following two options to be cleaner than the other suggestions:

Create a local onPress Handler (in items.template)

onPress = () => {
  template.add();
}

and then 

onPress={this.onPress} //note the lack of parentheses `()`

or

create an inline function

onPress={() => template.add()}

Upvotes: 1

Yuri Stiopin
Yuri Stiopin

Reputation: 105

You should pass function in attribute,not function call, so it should be

        <Button
            onPress={template.add.bind(template)}
            title="Add"
        />

Upvotes: 0

Related Questions