React Native android TextInput fail to show keyboard

I am facing some issue with react native textInput.

TextInput was working fine before I added createBottomTabNavigation. It worked fine on IOS but not the Android. I created a sample component and the issue persist. The issue here:

when TextInput field is clicked on at SamplePage Component, the page just kinda blink and the keyboard retreat.

Here is an image of the issue on my real android device: react-native android app

And here are my codes:

import React from 'react';
import 'react-native-gesture-handler';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ContextApp from '../../context/contextApp';
import PremiumScreen from './premiumScreen';
import SettingsPage from '../setting/settingsPage';
import ProfileContainer from '../profile/profileContainer';


  const MainPage = () => {

    const Pages = () => {
      return (
        <SafeAreaView>
        <StatusBar barStyle="dark-content" 
        backgroundColor="white"/>
                <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                alwaysBounceVertical={false}
                style={styles.scrollView}>
                <View style={styles.container}>
                  <View style={styles.partsView}>
                      <Text style={styles.sectionTitle}>Call Someone Today!</Text>
                      <View style={styles.switch}>
                          <Text style={styles.sectionDescription}>Go Online! </Text>
                          <Switch
                              style={styles.switchButton}
                              trackColor={{ false: "#767577", true: "#81b0ff" }}
                              thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
                              ios_backgroundColor="#3e3e3e"
                              onValueChange={toggleSwitch}
                              value={isEnabled}
                          />
                      </View>
                      <Text style={styles.sectionTitle}>OR</Text>
                  </View>
                </View>
                </ScrollView>
        </SafeAreaView>
        )
      }
    const SamplePage = () => {
      return (
        <View>
        <TextInput
          placeholder="Can't type me"
          style={{
            backgroundColor: 'white',
            width: '100%',
            height: 40,
            paddingLeft: 15,
            fontSize: 20,
            paddingBottom: 5,
            paddingTop: 5,
            color: 'grey'
          }}></TextInput>
        </View>
      )
    }
      const Tab = createBottomTabNavigator();
    return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName: string;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-people'
                : 'ios-people';
            } else if (route.name === 'Premium') {
              iconName = focused ? 'ios-star' : 'ios-star-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-settings' : 'ios-settings';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'ios-contact' : 'ios-contact';
            } else if (route.name === 'SamplePage') {
              iconName = focused ? 'ios-star' : 'ios-star-outline';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
      <Tab.Screen name="Home" component={Pages} />
      <Tab.Screen name="Premium" component={PremiumScreen} />
      <Tab.Screen name="Settings" component={SettingsPage} />
      <Tab.Screen name="Profile" component={ProfileContainer} />
      <Tab.Screen name="SamplePage" component={SamplePage} />
      </Tab.Navigator>
    </NavigationContainer>
      );
  };

const styles = StyleSheet.create({
    scrollView: {
      height: '100%',
    },
    // rest of styles
  });
  
  export default MainPage;

My dependencies:

  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/picker": "^1.6.4",
    "@react-navigation/bottom-tabs": "^5.5.1",
    "@react-navigation/native": "^5.2.6",
    "@react-navigation/stack": "^5.3.2",
    "@types/react-native-vector-icons": "^6.4.5",
    "@types/shortid": "0.0.29",
    "@types/yup": "^0.29.3",
    "axios": "^0.19.2",
    "formik": "^2.1.4",
    "moment": "^2.27.0",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-image-crop-picker": "^0.32.0",
    "react-native-image-picker": "^2.3.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-permissions": "^2.1.5",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^1.0.0",
    "react-native-screens": "^2.7.0",
    "react-native-sideswipe": "^1.5.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^9.4.0",
    "shortid": "^2.2.15",
    "yup": "^0.29.1"
  },

Need some help solving this issue! Thanks in advance!

Recommended topics

Hot tags