Version: 3.0.0-next.38

Installation

To have NativeBase components running onto your native apps, all you need to do is, create a fresh React Native project using whatever you want, expo is a really great starting point so we will start with that and install the NativeBase using npm or yarn and add all the peer dependencies.

Setup with Expo#

Expo helps you make React Native apps with no build configuration. It works on macOS, Windows, and Linux. Refer this link for additional information on Expo and setting up an Expo starter app.

For Installing NativeBase just copy this and paste in your terminal and Voila! you are good to go to Setup NativeBaseProvider

yarn add [email protected] react-native-svg styled-components styled-system react-native-safe-area-context

Setup with React Native#

react-native init AwesomeNativeBase
cd AwesomeNativeBase

Install NativeBase

Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.

[email protected] or above supports autolinking, so there is no need to run linking process. Read more about autolinking here.

react-native link

You've successfully setup NativeBase with your React Native app. Your React Native app is ready to run on iOS and Android devices.

Setup for Next.js with Expo for Web#

npx create-react-native-app -t with-nextjs

Switch to your project directory , that you created.

For Installing NativeBase just copy this and paste in your terminal.

yarn add [email protected] react-native-svg styled-components styled-system

Important#

By default Next.js doesn't support static assets like an Expo project. Because this is the intended functionality of Next.js, @expo/next-adapter doesn't add font support by default. If you want to use libraries like expo-font@expo/vector-icons, you'll need to change a few things.

  • Install the plugin - yarn add next-fonts

    • next-fonts injects a Webpack loader to handle fonts.
  • Wrap the font method with the Expo method in your next.config.js:

    • The order is important because Expo can mix in the location of vector icons to the existing font loader.
    const { withExpo } = require('@expo/next-adapter');
    const withFonts = require('next-fonts');
    module.exports = withExpo(
    withFonts({
    projectRoot: __dirname,
    })
    );
  • Now restart your project and you should be able to load fonts!