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?
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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.