Navigation simply doesn't work

[syntaxiom]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.28 (v3 is not supported)
• react-native v0.52.0

I am testing this on an Android phone.

Expected behaviour

A simple navigation from one scene to another. I've looked at the example app and I've followed tutorials similar to this one: https://www.tutorialspoint.com/react_native/react_native_router.htm.

Actual behaviour

Steps to reproduce

Here's my code in App.js:

import React from 'react';
import { Dimensions } from 'react-native';
import { Router, Scene } from 'react-native-router-flux';

import Example1 from './components/Example1';
import Example2 from './components/Example2';

const App = () => (
  <Router>
    <Scene key="root">
      <Scene key="example1" component={Example1}/>
      <Scene key="example2" component={Example2}/>
    </Scene>
  </Router>
);

export default App;

Here's my code in Example1.js:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  StatusBar
} from 'react-native';

import { Actions } from 'react-native-router-flux'

export default class Example1 extends React.Component {
  render() {
    return(
      <View style={styles.container}>
        <StatusBar hidden={true}/>
        <Text>Example 1!</Text>
        <TouchableOpacity onPress={() => Actions.example2()} color="blue">
          Go to example 2
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here's my code in Example2.js (Only difference is going to the other example):

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  StatusBar
} from 'react-native';

import { Actions } from 'react-native-router-flux'

export default class Example1 extends React.Component {
  render() {
    return(
      <View style={styles.container}>
        <StatusBar hidden={true}/>
        <Text>Example 2!</Text>
        <TouchableOpacity onPress={() => Actions.example1()} color="blue">
          Go to example 1
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

###Other notes
I've tried several iterations of using the Actions keyword. I've done Actions.example1 as per the RNRF Example App, and Actions["example1"].call() as per the API documentation. If anyone could guide me as to what I'm doing wrong, that would be appreciated 😄

[ylkhayat]

Have you tried putting ‘initial’ to any of the example scenes' props? Might be irrelevant but worth a try.
Such as:
<Scene key="example1" component={Example1} initial />
<Scene key="example2" component={Example2}/>
It mainly tells the router which screen to render first.

[syntaxiom]

Unfortunately, I still have the same error. My App function now looks like this:

const App = () => (
  <Router>
    <Scene key="root">
      <Scene key="example1" component={Example1} initial/>
      <Scene key="example2" component={Example2}/>
    </Scene>
  </Router>
);

I even tried explicitly typing initial={true}, but that doesn't work either.

[asciifaceman]

This is an android-specific issue and there is usually something wrong with your syntax (technically ios is extremely lenient and lets you get away with shit that doesn't work). This is because Android's Yoga is much more strict than IOS when it comes to formatting/syntax - sometimes you will get this error just for having extra whitespace and it can be horrendous to track down.

In the original code you pasted above @syntaxiom , you may have to wrap the text inside your TouchableOpacity in <Text> because Yoga gets very upset about raw text inside a render. Also stray commas, comments inside render, etc all can piss it off as well.

Thats the only thing I can spot that should offer up a yoga node error.

[syntaxiom]

Just as an update (sorry to anyone viewing this from Google), I don't use React Native anymore. I'll leave this issue open in case someone properly solves it later on however. It wouldn't be fair to close it if someone could benefit from this. Thanks everyone so far for the suggestions.