Not Able to Interact with Button or Text Input on React Native App

Question

I am new to React Native. I am trying to follow official documentation - https://reactnative.dev/docs/intro-react to create a React Input Text Box.

Using Android ADV for it. When I am clicking on Input Text Box, the keyboard is not opening. Similarly, On Click Event Also, Nothing is happening. Here is the code.

import React, { Component } from 'react'
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    View,
} from 'react-native'

export default class Login extends Component {
    state = {
        count: 0
    }

    onPress = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={styles.button}
                    onPress={this.onPress}
                >
                    <Text>Click me</Text>
                </TouchableOpacity>
                <View>
                    <Text>
                        You clicked {this.state.count} times
                    </Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        alignItems: 'center',
        backgroundColor: '#DDDDDD',
        padding: 10,
        marginBottom: 10
    }
})

//Cat.js

import React from 'react';
import { Text, TextInput, View } from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="Name me!"
      />
    </View>
  );
}

export default Cat;

These text box and buttons are occuring on screen but I am not able to Click on it in AVD

Snapshots

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Cat from './components/Cat';
import Click from './components/Click';

export default class App extends React.Component {
  render() {
    return( 
      <>
        <Cat /> 
        <Click />
      </>
    );
  }
}

Answer 1

TLDR

I think it is AVD software keyboard setting issue

Answer

welcome to react-native. The way I see it, it might AVD issue not to react-native issue

so, I research and got a good reference for you

Reference

Android emulator doesn't take keyboard input - SDK tools rev 20 How can I make the Android emulator show the soft keyboard? I hope it is helpful to you. Thank you

Answer 2

I have run this command inside the project directory and working fine.

for android

npx react-native run-android

for iOS

npx react-native run-ios