Component not rendering in react-native

Question

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.

Below are 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>
        )
    }
}

Answer 1

Your code has some styling issues. Try changing you render function with this

render() {
    const { cardNo, amount } = this.state
    return (
      <View style={{ alignSelf: 'stretch' }}>
        <TextInput
          placeholder="Card Number"
          style={{ height: 40, borderColor: '#333', borderWidth: 1 }}
          value={cardNo}
          onChangeText={this.handleCardNo}
        />
        <TextInput
          placeholder="Amount"
          style={{ height: 40, borderColor: '#333', borderWidth: 1 }}
          value={amount}
          onChangeText={this.handleAmount}
        />
        <Button title="Send" onPress={this.handleSend} />
      </View>
    )
  }