I am trying to learn React native but am failing at even returning a simple function. I either get unexpected token error or "not returning a valid react element" error in my IOS sim when deploying.

I am trying to get a grip on how different functions are returned but the tutorials seem to have different syntax than the original Getting Started page on Facebook's tutorial:

.20/

This is what I have:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

//import AwesomeComponent from "./awesome.js";

export default class SkysReact extends Component {
  render() {
    return this.test();
      // return (<View style={styles.container}>
      //   <Text style={styles.wele}>
      //     Wele to Skylars React Native!
      //   </Text>
      //   <Text style={styles.instructions}>
      //     This is a sandbox.
      //   </Text>
      // </View>);
  }
  var test = function() {
    console.log("hello world");
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  wele: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#333333'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SkysReact', () => SkysReact);

How can I define different funcs in my file to manipulate?

I am trying to learn React native but am failing at even returning a simple function. I either get unexpected token error or "not returning a valid react element" error in my IOS sim when deploying.

I am trying to get a grip on how different functions are returned but the tutorials seem to have different syntax than the original Getting Started page on Facebook's tutorial:

http://facebook.github.io/react-native/releases/0.20/

This is what I have:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

//import AwesomeComponent from "./awesome.js";

export default class SkysReact extends Component {
  render() {
    return this.test();
      // return (<View style={styles.container}>
      //   <Text style={styles.wele}>
      //     Wele to Skylars React Native!
      //   </Text>
      //   <Text style={styles.instructions}>
      //     This is a sandbox.
      //   </Text>
      // </View>);
  }
  var test = function() {
    console.log("hello world");
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  wele: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#333333'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SkysReact', () => SkysReact);

How can I define different funcs in my file to manipulate?

• javascript
• ios
• facebook
• reactjs
• react-native

Share Improve this question Follow asked Jul 10, 2017 at 20:17 blueblue 7,3951818 gold badges9090 silver badges198198 bronze badges 1

• If you are learning react or react-native you should start with an up-to-date version and an up-to-date tutorial. Your link refers to a two years old version which is ages for bleeding edge tech like this. The "different syntax" is probably ES2015 (also known as ES6)? It's definitely worth learning this, too. – trixn Commented Jul 10, 2017 at 21:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Another possible way to define a method inside the ES6 function:

export default class SkysReact extends Component {
  render () {
    var test = () => {
      console.log("Hello World")
    }

    const test2 = () => {
      return <h1>Hello from the other side</h1>
    }

    return(
      <div>
        {/*// execute test()*/}
        {test()}

        {/*// execute test2()*/}
        {test2()}
        <h1>Hello World</h1>
      </div>
    )
  }
}

React Component Should Return or Render React Element. In ReactNative valid React Element at least have one element For example <Text> Hello World </Text>

If you have want to return multiple element, than you have wrapped it inside View. For Example :

<View>
  <Text> Hello World1 </Text>
  <Text> Hello World2 </Text>
<View>

so for your code example, you can try something like this

render() {
  return (
   <View>
     {this.test()}
   </View>
}

test() {
  console.log("Hello World")
}

The problem is your class.

export default class SkysReact extends Component {
  render() {
    return this.test();
      // return (<View style={styles.container}>
      //   <Text style={styles.wele}>
      //     Wele to Skylars React Native!
      //   </Text>
      //   <Text style={styles.instructions}>
      //     This is a sandbox.
      //   </Text>
      // </View>);
  }
  var test = function() {
    console.log("hello world");
  }
}

That's not how you define methods within it. Instead you should define test method this way:

export default class SkysReact extends Component {

  constructor() {
    this.test = this.test.bind(this);
  }

  render() {
    return this.test();
  }

  test() {
    return (
      /* your jsx here */
    );  
  }

}