bug: incorrect react native code generation

I am interested in helping provide a fix!

Yes

Which generators are impacted?

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

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

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

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';

	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';
	}