Skip to content

React Native only supports JSX #144

Closed
Closed
React Native only supports JSX#144
Labels
Resolution: LockedThis issue was locked by the bot.

Description

@ColinEberhardt
ColinEberhardt
opened on Mar 12, 2015

Unless I am mistake, I should be able to substitute this:

return <Text style={styles.text}>Hello World!</Text>;

With this:

return React.createElement('Text', { style: styles.text }, 'Hello World!');

However, the above causes the application to fail as follows:

[native code]
global code
 URL: http://localhost:8081/Examples/PropertyFinder/PropertyFinderApp.includeRequire.runModule.bundle
 line: 5745
 message: null is not a function (evaluating 'autoGenerateWrapperClass(tag)')"

Activity

  1. vjeux commented on Mar 12, 2015

    @vjeux
    vjeux
    on Mar 12, 2015
    Contributor

    Can you try

    var Text = React.createFactory(React.Text);
return React.createElement(Text, 'Hello World');

    cc @balpert

  2. ColinEberhardt commented on Mar 12, 2015

    @ColinEberhardt
    ColinEberhardt
    on Mar 12, 2015
    Author

    Arggh .. ignore me, I'm being an idiot. This fails:

    return React.createElement('Text', { style: styles.text }, 'Hello World!');

    Where Text is passed as a string, but this works:

    return React.createElement(Text, { style: styles.text }, 'Hello World!');
  3. ColinEberhardt
    closed this as completedon Mar 12, 2015

  4. vjeux commented on Mar 12, 2015

    @vjeux
    vjeux
    on Mar 12, 2015
    Contributor

    The error message is still really bad. Would be nice to throw an exception along the lines of 'You tried to render the element 'Text' but it doesn't exist. You can only use string notation for lowercase components'. Want to submit a pull request that warns against this? It would prevent other people from failing into the same mistake

  5. sophiebits commented on Mar 12, 2015

    @sophiebits
    sophiebits
    on Mar 12, 2015
    Contributor

    We actually don't use or support string-typed components in React native at all. Would be nice to add a warning for non-lowercase components in React core though.

  6. ColinEberhardt commented on Mar 13, 2015

    @ColinEberhardt
    ColinEberhardt
    on Mar 13, 2015
    Author

    I agree, the error message isn't great. As the react-native behaviour differs from react in this case, one option is to adapt the createElement function, and add the extra parameter type checking here:

    https://github.com/facebook/react-native/blob/master/Libraries/ReactIOS/ReactIOS.js#L32

    What do you think?

  7. sophiebits commented on Mar 13, 2015

    @sophiebits
    sophiebits
    on Mar 13, 2015
    Contributor

    In neither case do uppercase tag names make sense, so we can add a warning in React core. We might also want to add some sort of warning for using any string type in React Native.

  8. react
    locked as resolved and limited conversation to collaborators on May 29, 2018
  9. react-native-bot
    added
    Resolution: LockedThis issue was locked by the bot.
    on Jul 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions