Adding a TextInput inside a Modal at React Native

Question

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",   }, }); ```

Where is the textInput?

Rafael Mora
– Rafael Mora

2021-03-24 03:51:13 +00:00
Commented Mar 24, 2021 at 3:51 — Rafael Mora
– Rafael Mora, Commented Mar 24, 2021 at 3:51

Mike Scotty · Accepted Answer · 2022-12-16 14:04:09Z

1

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,
  },
});

edited Dec 16, 2022 at 14:04

Mike Scotty

10.8k5 gold badges42 silver badges52 bronze badges

answered Mar 24, 2021 at 5:10

Ankit Patel

1993 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashfaq Adib · Accepted Answer · 2024-12-29 16:14:42Z

0

Faced the same issue, it has something to do with setState re-rendering the whole component so the Modal being inside the component gets re-rendered. I moved the whole Modal into a separate file and had all its states in its own component file to fix the issue.

answered Dec 29, 2024 at 16:14

Ashfaq Adib

2503 silver badges9 bronze badges

Collectives™ on Stack Overflow

Adding a TextInput inside a Modal at React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related