【React Native】既存のプロジェクトにNative Baseを追加する方法を解説

2023年2月13日

既存のReact NativeプロジェクトにNative Baseを追加する方法を解説します。

React Navigationと共存するケースについても合わせて解説しています。

バージョン

react-native 0.71.2
native-base 3.4.25

NativeBaseを追加
React Navigationと共存
まとめ

NativeBaseを追加

パッケージを追加

Native Baseと他依存関係のあるパッケージを追加します。

$ npm install native-base react-native-svg@12.1.1 react-native-safe-area-context@3.3.2

// yarn
$ yarn add native-base react-native-svg@12.1.1 react-native-safe-area-context@3.3.2

pod install

iOSで動かす場合はpod installを実行します。

モグモグさん

pod installのコマンドはみなさんの環境に合わせてください！

$ cd ios/ && pod install

NativeBaseProviderでラップ

NativeBaseProviderでラップします。

これでNative BaseのComponentが使えるようになります。

import React from "react";
import { NativeBaseProvider, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider>
      <Box>Hello world</Box>
    </NativeBaseProvider>
  );
}

React Navigationと共存

ここまでで既存のプロジェクトにNative Baseを追加できました。

よくあるケースとして、React Navigationと一緒に使うことがあると思いますのでそのケースを解説します。

といってもシンプルで、NavigationContainerの中でNativeBaseProviderでラップしてあげればOKです！

import {NavigationContainer} from '@react-navigation/native';
import {NativeBaseProvider} from 'native-base';
import React from 'react';
import {StatusBar, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <StatusBar
          backgroundColor={backgroundStyle.backgroundColor}
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        />
        <Stack.Navigator>
          <Stack.Screen
            component={HomePage}
            name="HomePage"
            options={{title: 'Home'}}
          />
          <Stack.Screen
            ...
          />
        </Stack.Navigator>
      </NativeBaseProvider>
    </NavigationContainer>
  );
}

export default App;