TextInput on React-native-paper is not working

Question

I wanted to get an input on Card from react native paper. I tried to put the textInput in card, card.title, card.content or card.actions, and it is not working, what am I doing wrong? is there any work around on this? Here is the code I am working on:

import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {
  TouchableRipple,
  Switch,
  Title,
  Card,
  TextInput,
  Paragraph,
  Button,
  Avatar,
} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

function Details() {
  return (
    <Card
      style={{
        elevation: 24,
        borderRadius: 24,
        marginTop: 70,
        backgroundColor: '#fafcff',
        padding: 18,
        margin: 18,
      }}><View>
           <TextInput label="Email"
          mode="outlined"
          dense={true}
          // ref={textInput.current.clear()}
          theme={{
            colors: {
              primary: '#00aaff',
            },
          }}
          
          style={{
            borderRadius: 20,
            borderColor: 'gray',
            borderLeftWidth: 1,
            borderBottomEndRadius: 30,
            borderBottomStartRadius: 30,
            borderTopStartRadius: 30,
            borderStyle: 'dashed',
            borderTopColor: 'gray',
            borderTopEndRadius: 0,
            borderTopWidth: 0,
            borderStartColor: 'green',
            borderEndColor: 'green',
            borderRightColor: 'green',
            borderLeftColor: 'green',
            fontSize: 25,
            opacity: 0.9,
            shadowColor: '#00aaff',
            shadowOffset: {
              width: 0,
              height: 12,
            },
            shadowOpacity: 0.58,
            shadowRadius: 16.0,

            elevation: 24,
          }}
          
          />
        </View>
      <Card.Content>
        <Title>Card title</Title>
          
      </Card.Content>
      {/* <Card.Cover source={{uri: 'https://picsum.photos/700'}} /> */}
      <Card.Actions>
        
     
         
          
      </Card.Actions>
    </Card>
  );
}

export default Details;

I can see the label Email and TextBox, but I cannot write any text on the Text box, what can I do about this? Here is an output of the above code:

Answer 1

Try to include your TextInput inside Portal like :

<Card>
    ....
    <Portal>
        <TextInput />
    </Portal>
</Card>