bug: incorrect react native code generation

[parwinders]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/?outputTab=E4UwhgxgLgcmUEsBuIg%3D&inputTab=FYZwHkA%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUYcmFQBKRBLhxtETangBtTRwQdAAaOAwYADkg9ABdOABeFAxsPHRbKmx0ADd0KmdJdzgodBhkKANbIo8AHhZgbIA%2Bao84GuBNMGQYFtbPVFQEhARevs8IJmgALmoSlioQ0Y9CQiW4bJwmZHQhwODVsdbvUwALHE0Acx2EWxzrGFcExvDS6ODb3JsOXCgrmA4Nlt0M4DmMeM1DgAJdBMSYAQjgAElPOdilo4B04AAldA4XRhABq2zCmAmwBYYWgcAAMsAAI6MFhwlo1Hj1JpFAoSQhAA%3D

Expected Behaviour

when i provide Tag in input i expected in react native output

Actual Behaviour

when i provide Tag in input i get in react native output

Additional Information

No response

[samijaber]

I don't understand the bug. can you share the exact code that you expected and what you got instead?

[parwinders]

I am sorry actually I tried giving it angle brackets like html tags but I think it is not possible... So I would restate the bug again.
Expected output is when I give Input component it maps to TextInput in react native. But the current behaviour is that Input is mapped to View component which is definately wrong

[samijaber]

I see. Yes we currently only map to View and Text in React Native.

• To fix it, look here:
  

  mitosis/packages/core/src/generators/react-native/index.ts

  Lines 120 to 131 in 5b04b03

  	if (isMitosisNode(node)) {
  	// TODO: handle TextInput, Image, etc
  	if (isChildren({ node })) {
  	node.name = '';
  	} else if (node.name.toLowerCase() === node.name && VALID_HTML_TAGS.includes(node.name)) {
  	node.name = 'View';
  	} else if (
  	node.properties._text?.trim().length ||
  	node.bindings._text?.code?.trim()?.length
  	) {
  	node.name = 'Text';
  	}

This is where you'll want to change the code, so it handles different HTML tags differently.

• You'll also want to add all the missing imports here:
  

  mitosis/packages/core/src/generators/react/generator.ts

  Line 267 in 5b04b03

  import { FlatList, ScrollView, View, StyleSheet, Image, Text } from 'react-native';