No migration path from NativeBase

[holmesjr]

Description

All of the migration paths from native-base are broken. The manual migration TypeScript file isn't even valid TypeScript and the @gluestack-ui/themed-native-base package throws errors and fails to render correctly.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Try to migrate
2. Fail

gluestack-ui Version

1.1.6

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[surajahmed]

Thanks for letting us know, @holmesjr. We're on it. Can you tell us what error message you see from the @gluestack-ui/themed-native-base package?

[akash3gtm]

hi @holmesjr , could you share the error message and let us know which versions (react, react-native, expo) are you using?

Also it would be really helpful if you could share an expo snack or the git repo.

[holmesjr]

Warning: Failed prop type: Invalid prop `fontSize` of type `string` supplied to `Text`, expected `number`.
Bad object: {
  "fontSize": "25",
  "color": "#8E8E8F",
  "display": "flex",
  "alignItems": "center",
  "justifyContent": "center",
  "textAlign": "center",
  "height": 25,
  "width": 25,
  "lineHeight": "25",
  "fontFamily": "FontAwesome",
  "fontWeight": "normal",
  "fontStyle": "normal"
}
    at Text (http://192.168.20.21:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:81515:27)
    in Icon (created by Icon)
    in Icon (created by StyledIcon)
    in StyledComponent (created by StyledStyledIcon)

Warning: Failed prop type: Invalid prop `color` supplied to `TextInput`: undefined
Valid color formats are
  - '#f0f' (#rgb)
  - '#f0fc' (#rgba)
  - '#ff00ff' (#rrggbb)
  - '#ff00ff00' (#rrggbbaa)
  - 'rgb(255, 255, 255)'
  - 'rgba(255, 255, 255, 1.0)'
  - 'hsl(360, 100%, 100%)'
  - 'hsla(360, 100%, 100%, 1.0)'
  - 'transparent'
  - 'red'
  - 0xff00ff00 (0xrrggbbaa)

Bad object: {
  "flex": 1,
  "height": "100%",
  "color": "undefined",
  "paddingVertical": "auto",
  "paddingHorizontal": 12,
  "fontSize": 16
}
    at TextInput (http://192.168.20.21:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:120445:38)

fontFamily "body" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Also,

• the safearea is broken and overlaps the status bar,
• buttons aren't rendering the right colours

[akash3gtm]

hi @holmesjr could you let us know, how are you migrating from native-base. are you using @gluestack-ui/themed-native-base, or trying to migrate manually?

[holmesjr]

I'm following https://github.com/gluestack/gluestack-ui-themed-native-base?tab=readme-ov-file#installation

Manual migration is impossible as the theme config isn't even valid typescript.