React Navigation is not working on TouchableOpacity

[ajaysaini-sgvu]

I tried react navigation 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 with TouchableOpacity.

/**
 * 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={() => {
			  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); 

[grabbou]

onPress should be set on TouchableOpacity, not View.

[ajaysaini-sgvu]

I have tried however it is still not working.

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

Did you try with TouchableOpacity ? It is working with Button for me

[grabbou]

I didn't can you verify that onPress is called at all (put console.log) and that the route exists?

[ajaysaini-sgvu]

Trust me, Simply change it to Button and it is working fine. This seems bug in this library

[jesshunter]

Try taking out the extra set of {} in onPress. It should look like: onPress= { () => navigate("EnableNotification")} You don't need the extra set of {} around the navigate fcn

[ajaysaini-sgvu]

I tried that also, made too much attempts on same problem before posting. It is not working :(

[jesshunter]

What is your debugger saying? Is 'navigate' being logged in the console when you press the 'continue' text?

[ajaysaini-sgvu]

Have a look this https://www.dropbox.com/s/5msljl727wa7241/db.png?dl=0

[smontlouis]

@ajaysaini-sgvu Same thing here:

import React, { Component, PropTypes } from 'react'
import {
  TouchableOpacity,
} from 'react-native'
import { withNavigation } from 'react-navigation'

class Link extends Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    params: PropTypes.object,
    route: PropTypes.string.isRequired,
  }

  constructor(props) {
    super(props)

    this.handlePress = ::this.handlePress
  }

  handlePress() {
    const { navigation, route, params } = this.props
    console.log(route, params)
    navigation.navigate(route, params)
  }

  render() {
    return (
      <TouchableOpacity {...this.props} onPress={this.handlePress} />
    )
  }
}

export default withNavigation(Link)

And I'm using it like this:

<Link
        route={'topic'}
        params={{ topicId: id }}
>
        <View>
          ...
        </View>
</Link>

Doesn't work. Console.log is ok, but the navigation action doesn't trigger.

[koenpunt]

You have a typo in your call to navigate;

navigate("EnableNotifcation");

should be

navigate("EnableNotification");

[ajaysaini-sgvu]

@koenpunt Ahh Seriously it worked! Thanks. This typo wasted my a lot of time..