React Native - Android Keyboard dismisses on each keypress

Question

I am working on a react native app for simple calculation and i have been facing issue which i have been working for few days.

The below code is a simple react-native app which accepts input1 and input2 as numeric and produces the result of sum of input1 and input2 dynamically.

But the problem is whenever i type some value in input1 or input2 fields, android keyboard dismisses on each keystrokes press.

Please find the code and screenshot below.

App.js

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

const SimpleCalc = () => {
    const [ input1, setInput1 ] = useState(0);
    const [ input2, setInput2 ] = useState(0);

    const HomeScreen = () => {
        return (
            <View style={{ padding: 20 }}>
                <View>
                    <Text style={{ fontSize: 20, color: '#000' }}>{ parseFloat(input1) + parseFloat(input2) }</Text>
                </View>
                <View>
                    <TextInput 
                        placeholder="Enter Input 1"
                        onChangeText = {(text) => { setInput1(text); }}
                        value = {input1 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                    <TextInput 
                        placeholder="Enter Input 2"
                        onChangeText = {(text) => { setInput2(text); }}
                        value = {input2 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                </View>
            </View>
        )
    }

    const SettingScreen = () => {
        return (
            <Text>Setting Screen</Text>
        );
    }
    return (
        <NavigationContainer>
            <Tab.Navigator>
                 <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Calculator', activeTintColor: '#6F2DA8', headerShown: false }} />
                 <Tab.Screen name="Settings" component={SettingScreen} options={{ tabBarLabel: 'Settings', activeTintColor: '#6F2DA8', headerShown: false }} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default SimpleCalc;

Package.json

{
  "name": "SimpleCalc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "install": "^0.13.0",
    "npm": "^8.3.1",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-material-textinput": "^1.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

Screenshot

Please help me on this issue. Thanks

Answer 1

Replace your code with this

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

const SimpleCalc = () => {
    

    const HomeScreen = () => {
      const [ input1, setInput1 ] = useState(0);
      const [ input2, setInput2 ] = useState(0);
        return (
            <View style={{ padding: 20 }}>
                <View>
                    <Text style={{ fontSize: 20, color: '#000' }}>{ parseFloat(input1) + parseFloat(input2) }</Text>
                </View>
                <View>
                    <TextInput 
                        placeholder="Enter Input 1"
                        onChangeText = {(text) => { setInput1(text); }}
                        value = {input1 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                    <TextInput 
                        placeholder="Enter Input 2"
                        onChangeText = {(text) => { setInput2(text); }}
                        value = {input2 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                </View>
            </View>
        )
    }

    const SettingScreen = () => {
        return (
            <Text>Setting Screen</Text>
        );
    }
    return (
        <NavigationContainer>
            <Tab.Navigator>
                 <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Calculator', activeTintColor: '#6F2DA8', headerShown: false }} />
                 <Tab.Screen name="Settings" component={SettingScreen} options={{ tabBarLabel: 'Settings', activeTintColor: '#6F2DA8', headerShown: false }} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default SimpleCalc;