CODEWITHSUNDEEP
androidreact-nativereact-navigationtouchableopacity
N Sharma
N Sharma

Reputation: 34497

React native navigation is not working on TouchableOpacity

I tried react-native on Button which is working fine. I want to customize Button so this made me to go for TouchableOpacity. I am trying to setup react native navigation like below which is not working now.

I am using this for navigation https://reactnavigation.org/

index.android.js

/**
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet,
  TouchableOpacity
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotificationScreen";
import styles from "./Styles";
import * as strings from "./Strings";

class SplashScreen extends Component {
  render() {
    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require("./img/talk_people.png")} />
        <Text style={styles.textStyle}> {strings.talk_people} </Text>

        <TouchableOpacity>
          <View
            style={{
              backgroundColor: "#FE434C",
              alignItems: "center",
              justifyContent: "center",
              borderRadius: 10,
              width: 240,
              marginTop: 30,
              height: 40
            }}
            onPress={() => {
              this.navigate("EnableNotifcation");
            }}
          >
            <Text style={{ color: "white" }}>CONTINUE</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const ScheduledApp = StackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    EnableNotification: {
      screen: EnableNotificationScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    }
  },
  {
    initialRouteName: "Splash"
  }
);

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

Upvotes: 0

Views: 10429

Answers (3)

Ajaypal Gangwar
Ajaypal Gangwar

Reputation: 1

Using following worked for me. using react native 0.62.2. See TouchableOpacity is inside KeyboardAvoidingView and ScrollView keyboardShouldPersistTaps.

 <ScrollView keyboardShouldPersistTaps="handled">
    <KeyboardAvoidingView enabled>
      <View>
        <TouchableOpacity
          onPress={() => functionNameToNavigate('ScreenToMoveOn')}> <Text>Click me</text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  </ScrollView>

Upvotes: 0

N Sharma
N Sharma

Reputation: 34497

It was a tpyo error at this line this.navigate("EnableNotifcation");

I corrected it and it is working now. this.navigate("EnableNotification");

Upvotes: 1

Ryan Turnbull
Ryan Turnbull

Reputation: 3934

The onPress prop should be inside TouchableOpacity, not inside of the View props like you have it. See the pseudo code below

<TouchableOpacity onPress = {...}>
    <View style = {{}}>
    //Rest of the code

This should fix it. On a sidenote, i would recommend adding a new style for your view component, theres a lot of elements in there :P

Edit:

            <TouchableOpacity onPress = {/*do this*/}>
                <View style={{ backgroundColor: "#FE434C",
                               alignItems: "center",
                               justifyContent: "center",
                               borderRadius: 10,
                               width: 240, marginTop: 30,
                               height: 40 }}>
                    <Text style={{ color: "white" }}>
                        {"CONTINUE"}
                    </Text>
                </View>
            </TouchableOpacity>

Upvotes: 0

Related Questions