Qfyilyi

CMD:

react-native init Test && react-native run-android

App.js:

export default class App extends Component {

    render() {

            new Function("person", "const { firstname } = person; alert(firstname);")({ firstname: "Test" });

    }

}

Whenever the new function gets constructed and invoked, the app crashes stating: "SyntaxError: Unexpected token '{'. Expected an identifier name in const declaration" Only happens on Android.

Any help would be appreciated. Thanks!

React Native: v0.55.7

The react native documentation indicates that JavaScriptCore is generally used at runtime (V8 during debugging), but it's light on specifics as to how it is configured. One thing it does mention is that the native JavaScriptCore is used on iOS, while a different version is bundled with the app for user on Android.

Because Babel is used at compile time with react native to support ES5/ES6 features, it may be that the runtime is configured at a lower level of support. So when attempting to create code from a string at runtime, you may actually be running with a JavaScript interpreter that doesn't understand e.g., destructuring syntax.

You could try using Babel's transform at runtime to transpile your code:

import {transform} from 'babel-core';



export default class App extends Component {

  render() {

    const f = 'const { firstname } = person; alert(firstname);';



    const result = transform(f, {

        presets: ['es2015']

    });



    new Function("person", result.code)({ firstname: "Test" });

  }

}

Can you create a const with a dynamic name? If it's possible, sorry about my lack of knowledge about that subject.
The error message said that a name to variable const is expected.
I hope it has been useful.
Best regards.

Try to change the style you create that function. In React Native is common to see arrow functions, that must be created outside your render method.
Note that your render method will be trigger every single time that your state changes. and it would be a waste of memory resources and unnecessary computing time

import React, { 

  Component 

} from 'react';



import { 

  Text, 

  View, 

  StyleSheet 

} from 'react-native';





export default class App extends Component {      



  //your custom function

  myFunc = (param) => {

    console.log(param)

    return param

  }



  //your render method

  render() {

    const param = "Im a text"



    //you could do this... i would never do that..

    const myFuncInRender = () => { console.log('Im a stupid func')}

    const myStupidFunc2 = new Function("person", "const { firstname } = person; alert(firstname);")({ firstname: "Test" });



    return (

      <View style={styles.container}>

        <Text style={styles.paragraph}>

          {this.myFunc(param)/* HERE is where you call the func*/}

        </Text>

      </View>

    );

  }

} // end from Class



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    backgroundColor: '#ecf0f1',

    padding: 8,

    alignItems:'center',

  },

  paragraph: {

    margin: 24,

    fontSize: 18,

    fontWeight: 'bold',

    textAlign: 'center',

  },

});