Adding a TextInput inside a Modal at React Native

Hi guys I am working on a React Native Project. I’m a newbie to programming/React Native. I don’t know how to put a textinput box in my modal on App.js. want to create an email textinput inside this modal Need some guidance and instructions. Help!

https://reactnative.dev/docs/textinput this is the example I am following. I am pasting it inside my app.js but it doesn’t work.

import { StatusBar } from "expo-status-bar"; import React, { Component } from "react"; import { StyleSheet, Text, View, Modal, Button, Alert } from "react-native"; import UselessTextInput from "./components/TextInputComponent"; import Main from "./components/MainComponent"; import * as Font from "expo-font";



// const getFonts = () =>  //   Font.loadAsync({ //     "nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"), //     "nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"), //   });

class App extends Component {   constructor(props) {
    super(props);
    this.state = {
      fontsLoaded: false,
      showModal: false,
    };   }

  async loadFonts() {
    await Font.loadAsync({
      // Load a font `Montserrat` from a static resource
      "Nunito-Bold": require("./assets/fonts/Nunito-Bold.ttf"),

      // Any string can be used as the fontFamily name. Here we use an object to provide more control
      "Nunito-SemiBold": {
        uri: require("./assets/fonts/Nunito-SemiBold.ttf"),
        display: Font.FontDisplay.FALLBACK,
      },
    });
    this.setState({ fontsLoaded: true });   }   componentDidMount() {
    this.loadFonts();   }   render() {
    return (
      <View style={{ flex: 1, marginTop: 100 }}>
        <Button
          title="More recipes Click Here"
          onPress={() => {
            this.setState({ showModal: true });
          }}
        />
        <Main />
        <Modal transparent={true} visible={this.state.showModal}>
          <View style={{ backgroundColor: "#000000aa" }}>
            <View
              style={{
                backgroundColor: "#ffffff",
                margin: 50,
                padding: 40,
                borderRadius: 10,
              }}
            >
              <Text style={{ fontSize: 50 }}>Modal Text</Text>
              <Button
                title="No, Thanks."
                onPress={() => {
                  this.setState({ showModal: false });
                }}
              />
            </View>
          </View>
        </Modal>
      </View>
    );   } } export default App; const styles = StyleSheet.create({   container: {
    flex: 1,
    fontFamily: "Nunito-SemiBold",
    alignItems: "center",
    justifyContent: "center",   }, }); ```

Answer

Just import from react-native and put in to the Modal as simple may help this.

import {
  TextInput,
} from 'react-native';

....
<Modal transparent={true} visible={this.state.showModal}>
...
 <TextInput
    style={styles.input}
    placeholder="useless placeholder"
    keyboardType="numeric"
  />
  ....
</Modal> 
  
 const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

Advertisement

Answer