Can't see buttons neither my textinputs get inputs in my react native expo app

Question

I am building a login screen. i am totally fresh in it. I took google help to get my 3 buttons in a single row using grid view. This is my code:

import { StatusBar } from 'expo-status-bar';
import React, {useState,useEffect, Component} from "react";
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export class GridView extends Component {

  render() {
    return (
       <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <Button title="Button 1"/>
          </View>

          <View style={styles.buttonContainer}>
            <Button title="Button 2"/>
          </View>
          <View>
            <TouchableOpacity>
              <Text style={style.Email_btn}>
                Email
              </Text>
            </TouchableOpacity>
          </View>
      </View>
    );
   }
   }
   export default function App() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     return (
      <View style={styles.container}>
      <Text style={{color:'#ffffff', fontSize:28}}>LOG IN</Text>
      <StatusBar style="auto" />
      <View style={styles.inputView}>
    <TextInput
      style={styles.TextInput}
      autoCapitalize="none"
      placeholder="Email."
      placeholderTextColor="#003f5c"
      onChangeText={(email) => setEmail(email)}
    />
  </View>
    
  <View style={styles.inputView}>
    <TextInput
      style={styles.TextInput}
      placeholder="Password."
      placeholderTextColor="#003f5c"
      secureTextEntry={true}
      onChangeText={(password) => setPassword(password)}
    />
  </View>

  </View>
  );
  }

  const styles = StyleSheet.create({
  container: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
  },
  buttonContainer: {
     flex: 1,
  },
      Email_btn:{
      backgroundColor:"#1c313a",
      width:30,
      height:80,
     },
     container: {
    flex: 2,
    backgroundColor: '#455a64',
    /*alignItems:'flex-start',
   justifyContent: 'center'*/
   },



   inputView: {
   backgroundColor: '#1c313a',
   borderRadius: 30,
   width: "70%",
   height: 45,
   marginBottom: 20,

   alignItems: "center",
   },

   TextInput: {
   height: 50,
   flex: 1,
   padding: 10,
   marginLeft: 20,
  }
 });

The buttons in the grid view class should appear in the same row. below them there should be the email and password textinputs. I can't see the buttons on my screen neither my textinputs are getting the texts from users. Kindly help me!!

Answer 1

you added flexDirection:'row' to your app container View. that means everything you add inside it, will be displayed horizontal.

also you are not rendering <GridView Class component in App.

you need to cross check your styles which effects most of the layout.

here is the modified snippet for you.

import React, {useState, Component} from "react";
import { StatusBar, Button, StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export class GridView extends Component {
  render() {
    return (
       <View style={styles.btnContainer}>
          <View style={styles.button}>
            <Button color={'white'} title="Button 1"/>
          </View>
          <View style={styles.button}>
            <Button color={'white'} title="Button 2"/>
          </View>
          <View style={[styles.button, styles.emailBtnWrap]}>
            <TouchableOpacity>
              <Text style={styles.emailBtn}>
                Email
              </Text>
            </TouchableOpacity>
          </View>
      </View>
    );
   }
}

export default function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
    return (
    <View style={styles.containerWrap}>
      <StatusBar />
      <View style={styles.textCenter}>
        <Text style={styles.textColor}>LOG IN</Text>
      </View>
      <View style={styles.formContainer}>
        <View style={styles.inputView}>
          <TextInput
            autoCapitalize="none"
            placeholder="Email."
            placeholderTextColor="#003f5c"
            onChangeText={(email) => setEmail(email)}
          />
        </View>
        <View style={styles.spacing12} />
        <View style={styles.inputView}>
          <TextInput
            placeholder="Password."
            placeholderTextColor="#003f5c"
            secureTextEntry={true}
            onChangeText={(password) => setPassword(password)}
          />
        </View>
      </View>
      <GridView />
    </View>
  );
}

const styles = StyleSheet.create({
  containerWrap: {
     flex: 1,
  },
  textCenter: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  },  
  textColor: {
    color:'#000', 
    fontSize:28
  },
  formContainer: {
    flex:1,
    padding:12
  },
  inputView: {
    backgroundColor: '#f9f9f9',
    borderRadius: 30,
    borderWidth:1,
    borderColor: '#ccc',
    paddingVertical:16,
    paddingHorizontal:12
  },
  spacing12: {
    marginVertical:12
  },

  btnContainer: {
    flexDirection: 'row'
  },
  button: {
    flex:1,
    backgroundColor:'blue',
    padding:12
  },
  emailBtnWrap: {
    backgroundColor:'green'
  },
  emailBtn: {
    color:'white'
  },
  btnColor: {
    color:'white'
  }

 });