Integrating code from builder app into React

General
1

I generated some code from the Builder.io Figma plugin and I want to integrate it into a React app, but getting red in visual code ide.
Do i need to install something in the react workspace to prep for the integration into a React app.

classname
classname1920×1020 149 KB

2

Hello @mikey4281,

If you’re using ESLint or TypeScript, there may be a rule or configuration that flags className as problematic.

You may want to check your linting configuration (e.g., .eslintrc.js or tsconfig.json) to ensure there are no conflicting rules.

And for TypeScript projects, ensure your tsconfig.json includes JSX support:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

I hope this helps! Let us know if the issue still persists.

Thanks,

3

Thank you and will try this .

4

Hi,

I modified the tsconfig.json and it’s still giving me red. I also cleaned the cache and verified it.

{
“extends”: “expo/tsconfig.base”,
“compilerOptions”: {
“moduleResolution”: “bundler”,
“strict”: true,
“jsx”: “react-jsx”
}
}

5

Hi @mikey4281,

Could you please provide more details about the error you’re encountering when hovering over the ‘className’ string? Any additional information, such as error messages or behavior you’re seeing, would be helpful in troubleshooting the issue.

Looking forward to your response!

Best regards,

6

Hi,

I was not able to upload the screenshots so I’m sending it via email.

(attachments)

cardsection.png
cardsection.png1920×1020 101 KB

builderIoConsole.png
builderIoConsole.png1920×1020 111 KB

builderUploaderror.png
builderUploaderror.png1531×644 49.1 KB

7

Hello @mikey4281,

Thanks for sharing the screenshot. Unfortunately, it doesn’t provide enough context to diagnose the issue. There’s no error showing in the console, and I suspect the warning you’re seeing may not be directly related to the className issue you mentioned earlier.

If possible, could you share a minimal, reproducible git repo of your app? This would help us better understand the issue and provide a more accurate solution.

Thanks again,

9

Hello @mikey4281,

I noticed that your configuration uses Expo, which means this is a React Native project. React and React Native code-gen output are not interchangeable.

React Native styling is usually applied with StyleSheet, typically applied using the style prop, which accepts either a single style object or an array of style objects. I’ve included an example below to demonstrate.

I also observed that the default style output for React Native codegen is “Tailwind”, which outputs className props on the React Native code output. This may require additional setup in your project to configure Nativewind, which will allow for using the className prop, not normally supported in React Native.

In the meantime, you can consider adjusting the codegen output styling options from “Tailwind” to “CSS” to resolve styling issues or have your team set up NativeWind support in your project.

Here is the code example using style attribute

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
  },
  text: {
    fontSize: 20,
    color: 'darkblue',
  },
});

export default MyComponent;

Hope this helps! Let me know if you have any more questions.

Thanks,

10

Hello Manish,

Ok thank you, I will try to create a react web app and test the code and use Nativewind as well.

Cheers