文本输入未显示在 React Native 中

Question

I'm fairly new to react native and am trying to create an app that gives you a current stock price. I'm creating the design for the app to show to the people helping me. I have some code looking like this

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TextInput, SafeAreaView} from 'react-native';

export default function App() {
  return (
 
          
   
    <View style={styles.container}>
          <TextInput style={styles.inp} />
          <View style={styles.container}>
          <Text style={styles.titleText}>$150.32</Text>
          <Text>±$2.10</Text>
          </View>
      <StatusBar style="auto" />
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
titleText: {
    
    fontFamily: "AppleSDGothicNeo-Light",
    fontSize:75
},
basicText: {
fontFamily: "AppleSDGothicNeo-Light",
fontSize:2
    
},
container2: {
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'flex-start'
},
inp: {
   
    height:40
}
    
});

The thing is the TextInput is not showing. I've followed some other questions and added a height but it still doesn't show. How do I fix this?

Answer 1

Try to add this for input style :

inp: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
}

It is working to me.

You can se in image: React native text input

Answer 2

You have to first create state for textinput value like so

const [text, setText] = useState("");

Also apply value and onChangeText props to the textinput something like below

<TextInput
    style={styles.inp}
    onChangeText={setText}
    value={text}
/>

where setText will update the text value that is entered into the textinput.

You can refer to this as well https://reactnative.dev/docs/textinput