mitosis icon indicating copy to clipboard operation
mitosis copied to clipboard

bug: incorrect react native code generation

Open parwinders opened this issue 1 year ago • 3 comments

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

parwinders avatar Apr 02 '24 18:04 parwinders

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

samijaber avatar Apr 02 '24 20:04 samijaber

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

parwinders avatar Apr 04 '24 18:04 parwinders

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

samijaber avatar Apr 05 '24 16:04 samijaber