bug: incorrect react native code generation
I am interested in helping provide a fix!
Yes
Which generators are impacted?
- [ ] All
- [ ] Angular
- [ ] HTML
- [ ] Preact
- [ ] Qwik
- [ ] React
- [X] 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 <Input/> Tag in input i expected <TextInput/> in react native output
Actual Behaviour
when i provide <Input/> Tag in input i get<View/> 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: https://github.com/BuilderIO/mitosis/blob/5b04b032c6c8dffba89923f5c85c0f7f4c3573ab/packages/core/src/generators/react-native/index.ts#L120-L131
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: https://github.com/BuilderIO/mitosis/blob/5b04b032c6c8dffba89923f5c85c0f7f4c3573ab/packages/core/src/generators/react/generator.ts#L267