2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React Navigation で Bottom Tabs Navigator が keyboardに連動するのを阻止

Posted at

起きる現象は
android & TextInput & soft keyboard
の時、タブナビゲーション用のタブがキーボードの上部に引っ付いてくる、という厄介なやつです。
下記 qiitaリンクも参照あれ。

Bottom Tabs Navigator version6.Xではオプションでどうにかできるようになったようです。
tabBarHideOnKeyboard: true

sample.tsx
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


export function sample() {
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarHideOnKeyboard: true,
      }}
    >
      <Tab.Screen
        name='ScreenOne'
        component={ScreenOne}
      />
      <Tab.Screen
        name='ScreenTwo'
        component={ScreenTwo}
      />
    </Tab.Navigator>
  );
}

ドキュメントの記述がさりげなさすぎてつらい。
https://reactnavigation.org/docs/bottom-tab-navigator/

参考リンク
https://qiita.com/garmi/items/e530028c533cfe2b03b1
https://qiita.com/nitaking/items/bf13d5ce8e7ac812c0df

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?