conorhastings / react-native-syntax-highlighter

a syntax highlighter for react native using https://github.com/conorhastings/react-syntax-highlighter under the hood
MIT License
167 stars 25 forks source link

"Expected a component class, got [Object object]" when adding extra props #7

Closed AdultLink closed 6 years ago

AdultLink commented 6 years ago

First of all, sorry if this is not the place to discuss this problems, but I can't find any other better place. Also, I'm not the best at React-native, so in the case I'm making a terribly stupid mistake, please forgive me.

I'm getting the Expected a component class, got [Object object] error whenever I try to pass any props other than language, style and children. This is my code:

import React from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import SyntaxHighlighter from 'react-native-syntax-highlighter';
import { tomorrowNightEighties } from 'react-syntax-highlighter/dist/styles';

export default class App extends React.Component {

  render() {
    const codeString = `const var1 = ASD => ASD + 1;
                        const var2 = var1(2) + 3;`;
    return (
      <View style={styles.container}>
        <StatusBar hidden={true}/>
        <View style={styles.code}>
          <SyntaxHighlighter
            language='javascript'
            style={tomorrowNightEighties}
            children={codeString}
            showLineNumbers={true}>
          </SyntaxHighlighter>
        </View>
        <View style={styles.sidebar}>
          <Text style={styles.sidebarText}>Sidebar!</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  code: {
    flex: 9,
    backgroundColor: '#fff',
  },
  sidebar: {
    flex: 1,
    flexDirection: 'column',
    padding: 5,
    backgroundColor: '#404040',
  },
  sidebarText: {
    color: 'white',
  },
  container: {
    flexDirection: 'row',
    flex: 1,
    backgroundColor: '#fff',
  },
});

In this case, the showLineNumbers prop causes the error, when I take it out, it works properly. Could anyone point me in the right direction? It seems like such a silly thing that it's driving me crazy.

conorhastings commented 6 years ago

@AdultLink unfortunately that prop is not currently supported in the native version of the module, i've updated the readme -- https://github.com/conorhastings/react-native-syntax-highlighter/blob/master/README.md#unsupported-props

It would require some work in react-syntax-highlighter core to support this feature -- https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/highlight.js#L10-L40 -- and i'm not sure when I might be able to get to it

AdultLink commented 6 years ago

I see, it made no sense at all!

I guess it's not the most critical feature, although it would've been a nice feature for my little project.

Thank you for your answer!

conorhastings commented 6 years ago

@AdultLink closing for now, will contact you when implemented