Upgrading to 3.2.0 from 3.x | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Upgrading to 3.2.0 from 3.x
As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code.
To do that we had to make some changes to our theme in v3.2.0. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options:
Extend previous version's theme for backward compatibility
You need to add v3CompatibleTheme to your NativeBaseProvider which preserves all the old token that were changed or removed in v3.2.0.
Copy
import {
NativeBaseProvider,
extendTheme,
v3CompatibleTheme,
} from 'native-base';
// ...
const yourCustomTheme = {
// ...
};
<NativeBaseProvider
theme={extendTheme(v3CompatibleTheme, yourCustomTheme)}
></NativeBaseProvider>;
Migrating in a NextJS Project
If you are updating from 3.1.x to 3.2.x in a Next.js project, you might need to make some changes in configs.
Updating next.config.js/ts
Now need to include only react-native-web and native-base in transplie-modules
No need of webpack config just add withFonts(from next-fonts) and withExpo(from @expo/next-adapter)
Copy
const withFonts = require('next-fonts');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
'native-base',
'react-native-svg',
'styled-components',
'react-native-safe-area-context',
'@react-aria/visually-hidden',
'@react-native-aria/button',
'@react-native-aria/checkbox',
'@react-native-aria/combobox',
'@react-native-aria/focus',
'@react-native-aria/interactions',
'@react-native-aria/listbox',
'@react-native-aria/overlays',
'@react-native-aria/radio',
'@react-native-aria/slider',
'@react-native-aria/tabs',
'@react-native-aria/utils',
'@react-stately/combobox',
'@react-stately/radio',
'react-native-vector-icons',
]);
module.exports = withPlugins(
[withTM, [withFonts, { projectRoot: __dirname }]],
{
webpack: (config) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
// Transform all direct `react-native` imports to `react-native-web`
'react-native$': 'react-native-web',
};
config.resolve.extensions = [
'.web.js',
'.web.ts',
'.web.tsx',
...config.resolve.extensions,
];
return config;
},
}
);
Copy
const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
'react-native-web',
'native-base',
]);
const nextConfig = {};
module.exports = withPlugins(
[
withTM,
[withFonts, { projectRoot: __dirname }],
[withExpo, { projectRoot: __dirname }],
],
nextConfig
);
Updating babel.config.js/ts
Add presets: ["@expo/next-adapter/babel"] and plugins: [["@babel/plugin-proposal-class-properties"]]
Copy
module.exports = {
presets: ['next/babel'],
plugins: [['react-native-web', { commonjs: true }]],
};
Copy
module.exports = {
presets: ['@expo/next-adapter/babel'],
plugins: [['@babel/plugin-proposal-class-properties']],
};
Updating _document.js/ts
No need to import .ttf font files of Icons and add them into document style.
Copy
import Document, { Html, Head, Main, NextScript } from 'next/document';
import Ionicons from 'react-native-vector-icons/Fonts/Ionicons.ttf';
import MaterialIcons from 'react-native-vector-icons/Fonts/MaterialIcons.ttf';
import AntDesign from 'react-native-vector-icons/Fonts/AntDesign.ttf';
import MaterialCommunityIcons from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf';
// Generate required css
const iconFontStyles = `@font-face {
src: url(${Ionicons});
font-family: Ionicons;
}
@font-face {
src: url(${MaterialIcons});
font-family: MaterialIcons;
}@font-face {
src: url(${AntDesign});
font-family: AntDesign;
}@font-face {
src: url(${MaterialCommunityIcons});
font-family: MaterialCommunityIcons;
}`;
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<style>{iconFontStyles}</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Copy
import React from 'react';
import { getInitialProps } from '@expo/next-adapter/document';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class CustomDocument extends Document {
render() {
return (
<Html style={{ height: '100%' }}>
<Head>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
</Head>
<body style={{ height: '100%', overflow: 'hidden' }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// Import the getInitialProps method and assign it to your component to ensure the react-native-web styles are used.
CustomDocument.getInitialProps = getInitialProps;
export default CustomDocument;
Handling breaking changes
Below is a rough account of the breaking API changes as well as the minimal change to migrate
Alert:
Removed Alert.Title. Use Text component instead.
Removed Alert.Description. Use Text component instead.
Divider:
Removed size. Use thickness prop instead.
Strict Mode:
We have introduced in v3.2.0 which is off by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these:
    All utility props which take theme tokens as values, now take only string values as a valid type
This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning.
Copy
// Incorrect Way to pass theme tokens to utility props
<Box p={4} mx={8} />
Copy
// Correct Way to pass theme tokens to utility props
<Box p="4" mx="8" />
    Remove all non token values given to utility props which accept theme tokens. For example, p="11" is not supported with the . Pick up another value from default theme tokens or .
    If you are using with as prop, verify this
Copy
/* correct */
<Icon as={Ionicons} name="md-checkmark-circle" />
/* incorrect */
<Icon as={<Ionicons name="md-checkmark-circle" />} />
/* incorrect */
<Icon as={<Ionicons />} name="md-checkmark-circle" />
Nativebase logo
MadeWithNativeBase