Now let’s try to create a simple registration form
App.js
already has a screen title.
Just below the text heading, add two text input components.
Both input fields must be 60px
high and 80%
of the screen width.
The top margin of each input field should be 20px
, and the padding on all sides should be 10px
.
The background color should be white (#ffffff
), the font size should be 20px
.
Border radius must be 10px
.
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 from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.header}>Sign In</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FF6F59',
alignItems: 'center',
justifyContent: 'center',
},
header: {
color: '#254441',
fontWeight: 'bold',
fontSize: 26,
},
});
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"
}
}
}