Let’s practice some styling in React Native.
Elements within each styles.row
element must be placed on a line, not a column.
All calendar cells must be the same size with 5px margins and 10px padding.
The font size in the cell should be 10px, the bold intensity, and the text centered.
Let the background color be rgb (255, 198, 0).
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 { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View>
<View style={styles.row}>
<Text style={styles.month}>December</Text>
<Text style={styles.month}>January</Text>
<Text style={styles.month}>February</Text>
</View>
<View style={styles.row}>
<Text style={styles.month}>March</Text>
<Text style={styles.month}>April</Text>
<Text style={styles.month}>May</Text>
</View>
<View style={styles.row}>
<Text style={styles.month}>June</Text>
<Text style={styles.month}>July</Text>
<Text style={styles.month}>August</Text>
</View>
<View style={styles.row}>
<Text style={styles.month}>September</Text>
<Text style={styles.month}>October</Text>
<Text style={styles.month}>November</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
month: {},
row: {},
});
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"
}
}
}