Button and TouchableOpacity don't react on onPress events

Question

I have the following code:

import React, {Component} from 'react';
import {Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View,} from 'react-native';
import {Alert} from "react-native-web";


export default class HomeScreen extends Component {

    state = {text: ''};

    _onPressSearch() {
        Alert.alert("Button pressed!")
    }

    render() {
        return (<View style={styles.container}>
            <ScrollView style={styles.scrollViewContainer} contentContainerStyle={styles.contentContainer}>
                <View style={styles.searchContainer}>

                    <TextInput placeHolder="Type something!" onChangeText={(text) => this.setState({text})}
                               value={this.state.text}/>

                </View>

                <TouchableOpacity
                    onPress={this._onPressSearch}>
                    <View>

                        <Text>Search</Text>

                    </View>
                </TouchableOpacity>

                <View style={styles.listContainer}>

                    <Text>{this.state.text}</Text>

                </View>



            </ScrollView>


        </View>

And my problem is that when I click on TouchableOpacity no action happens (in my case showing alert). I tried to change ToachableOpacity and View combination to usual button but nothing happened again. So, what's the problem and how can I solve it?

Answer 1

Looking at the docs looks like Alert is not completed yet (https://github.com/necolas/react-native-web) inside react-native-web. This is the issue about the react-native-web alert: https://github.com/necolas/react-native-web/issues/1026

Try using default javascript alert doing alert("Button pressed!") or importing Alert from react-native

The code looks fine