title: calling functions that return a JSX element in render function
body: <p>I am trying to reduce the length of the <code>render()</code>method to improve readability by calling class methods that contains isolated JSX elements. </p>
  
  <p>The problem is that this technique won't work for more than one JSX element. </p>
  
  <p>I embedded each element inside a <code>&lt;View&gt;</code> but it doesn't prevent this error</p>
  
  <pre><code>Invariant Violation : Text strings must be rendered within a &lt;Text&gt; component.
  </code></pre>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View,StyleSheet } from 'react-native';
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
      }})
  
  export default class HelloWorldApp extends Component {
      header() {
          return  (
              &lt;Text&gt;header&lt;/Text&gt;
          );
  
      }
      firstElement() {
          return (
                  &lt;Text&gt;first element&lt;/Text&gt;
          );
  
      }
      secondElement() {
          return (
              &lt;Text&gt;second element&lt;/Text&gt;
          );
  
      }
  
      footer(){
          return (
              &lt;Text&gt;footer&lt;/Text&gt;
          );
      }
  
      render() {
  
       let header  = this.header();
       let firstElement = this.firstElement();
       let secondElement= this.secondElement();
       let footer = this.footer();
  
          return (
              &lt;View style={styles.container}&gt;
                  header,
                  firstElement,
                  secondElement,
                  footer,
              &lt;/View&gt;
  
          );
  
      }
  
  
  }
  
  </code></pre>
  
  <p>I am aware that the syntax in <code>render()</code>is not correct, it is to show you what i want the code to look like.</p>