The form has already added an email field.
Add another message field just below the email address.
The field must be multi-line, use the onChange
method to handle the input.
The new input field should be styled exactly like the first.
Add a placeholder to the second field - ‘Message’.
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
App.js
import React, { useState } from 'react';
import { StyleSheet, Text, TextInput, View, Dimensions } from 'react-native';
export default function App() {
const [email, setEmail] = useState('');
return (
<View style={styles.container}>
<Text style={styles.header}>Leave you feedback</Text>
<TextInput placeholder="Email" style={styles.input} value={email} onChangeText={setEmail} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
paddingTop: 100,
backgroundColor: '#56c7c0',
},
header: {
fontSize: 18,
},
input: {
marginVertical: 30,
borderWidth: 2,
borderColor: '#ffb900',
backgroundColor: '#ffffff',
padding: 10,
borderRadius: 10,
width: 0.8 * Dimensions.get('screen').width,
},
});
app.json
{
"expo": {
"name": "1",
"slug": "1",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}