Though I am experienced in React I am very new to react-native. I have tried several answers posted in SO for the same issue but none of them helping me fix the issue.
I have App component and the App component calls Account component. The Account component renders input fields but the input fields are not displayed in UI but If I add only Text in App component like <Text>Hello</Text> it is showing in UI but my custom Account component is not showing in the UI. I am not getting an idea what I am doing wrong.
PFB component details
App.js
import React, { Component } from 'react';import { StyleSheet, Text, View } from 'react-native';import Account from './components/Form/components/Account';export default class App extends Component { render() { return (<View style={styles.container}><Account /></View> ); }}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});Account.js
import React, { Component } from "react";import { StyleSheet, Text, View, Button, TextInput, ScrollView } from 'react-native';export default class Account extends Component { constructor(props){ super(props); this.state = { cardNo: "", amount: 0 } } handleCardNo = no => { this.setState({ cardNo: no }); } handleAmount = amount => { this.setState({ amount }); } handleSend = event => { const { cardNo, amount } = this.state; this.setState({ loading: true }); const regex = /^[0-9]{1,10}$/; if(cardNo == null){ }else if (!regex.test(cardNo)){ //card number must be a number }else if(!regex.test(amount)){ //amount must be a number }else{ // const obj = {}; // obj.cardNo = cardNo; // obj.amount = amount; // const url = "http://localhost:8080/apple" // axios.post(url, obj) // .then(response => return response.json()) // .then(data => this.setState({ // success: data, // error: "", // loading: false // })) // .catch(err => { // this.setState({ // error: err, // success: "", // loading: false // }) // }) //values are valid } } render(){ const { cardNo, amount } = this.state; return(<View><TextInput label='Card Number' style={{height: 40, flex:1, borderColor: '#333', borderWidth: 1}} value={cardNo} onChangeText={this.handleCardNo} /><TextInput label='Amount' style={{height: 40, flex:1, borderColor: '#333', borderWidth: 1}} value={amount} onChangeText={this.handleAmount} /><Button title='Send' onPress={this.handleSend}/></View> ) }}
