Programmatically add a component in React Native

Question

Suppose I have a simple React Native app like so:

\'use strict\';

var React = require(\'react-native\');
var {
  AppRegistry,
  Text,
  TouchableHighlight,
         


        

Answer 1

ECMA6 Syntax

import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,    
TextInput,
TouchableOpacity,
TouchableHighlight
} from 'react-native';    

export default class fourD extends Component {

  constructor(props) {
    super(props);
    let ele1 = (
      
        Element {1}
         this._add()  }>
         Add
        
      
     );

    this.state = {
      ele: [],
      key: 1
    }

    this.state.ele.push(ele1);

   }

  _add(){

    let key = this.state.key + 1;

    let ele2 = (
      
        Element {key}
         this._add()  }>
         Add
        
      
    );

    let ele = this.state.ele;
    ele.push(ele2);
    this.setState({ ele: ele,key : key})

  }
  render() {

    return (
      
       This text should be before
        { this.state.ele }
       This text should be after
        this._add()  }>
          Tap Me
        
      
    )
  }
}



const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "white",
    }
})