Related
I'm trying to learn how to write React Native apps and they're using Flexbox a lot to style their App screens. How can I achieve the following layout using Flexbox?
Here's the code I have so far:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#cde9ff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
},
header: {
borderWidth: 1,
fontSize: 38,
marginBottom: '50%',
},
form: {
borderWidth: 1,
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
backgroundColor: 'white',
color: 'black',
borderRadius: 10,
},
footer: {
borderWidth: 1,
},
});
I was trying to do it with the margins but that's not really working so well for me right now, and I figured it be best to properly learn to utilise Flexbox whenever I can.
Does someone know how to change my Stylesheet CSS to how I can easily create the quick paint image layout I made?
I would do something like this, and use flex-growth to push to footer at the end of the page
For the structure :
function App() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text>Title</Text>
</View>
<View style={styles.form}>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
</View>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</View>
);
}
For the CSS :
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
},
header: {
alignItems: "center",
width: "75%"
},
form: {
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
width: "75%",
flexGrow: 1
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: "black",
marginBottom: 10,
backgroundColor: "white",
color: "black",
borderRadius: 10
},
footer: {
alignItems: "center",
width: "50%"
},
});
codesanbox : https://codesandbox.io/embed/green-cloud-ne9yt?fontsize=14&hidenavigation=1&theme=dark
I think that you are looking for something like this:
HTML:
<div class="main-container">
<div class="title">
<h1> Title </h1>
</div>
<div class="form">
form
</div>
<div class="cta">
login
</div>
</div>
CSS:
.main-container{
height: 600px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center
}
.main-container div{
border: 1px solid black;
width: 300px;
padding: 50px
}
You have to add display flex to the parent container of the divs you want to be flexible
You can check Shahriar link: https://flexbox.malven.co/ it explains flex display pretty good
codepen: https://codepen.io/MichaeIMyers/pen/WNEJpLW
I have a react native project where I want to orientate a element verticaly and center the text.
Now I want to use percentages so it is centered width wise which would be the height of the parent element. Also the text should wrap it gets to big.
The problem is I can not use percentage because it get always converted to px inside the browser.
Can someone help me out?
I appreciate your help.
The text on the left side should always be centered like it is in this screenshot. It behaves so weird, if the width is changing the text moves around.
type TeamsProps = {
name: string,
}
const TeamCard = (props: TeamsProps) => {
const [showOptions, setShowOptions] = useState<Boolean>(false)
const toggleOptions = () => {
setShowOptions(!showOptions)
}
return (
<View style={[styles.container, { height: (Dimensions.get("window").width - 3 * 15) / 2 }]}>
<TouchableOpacity onLongPress={toggleOptions} style={styles.card}>
<View style={styles.nameFlag}>
<Text style={styles.name}>{props.name}</Text>
</View>
<View style={styles.member}>
</View>
</TouchableOpacity>
{ showOptions ?
<TouchableOpacity onPress={toggleOptions} style={styles.options}>
<TextInput style={styles.input} value="Team Name"></TextInput>
<View style={styles.buttons}>
<TouchableOpacity style={[styles.button, styles.delete]}>
<Delete style={{ fontSize: 20, color: "white", margin: "auto" }} />
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.confirm]}>
<Check style={{ fontSize: 20, color: "white", margin: "auto" }} />
</TouchableOpacity>
</View>
</TouchableOpacity>
: <></>
}
</View>
)
}
const styles = StyleSheet.create({
container: {
flexBasis: "calc(50% - 7.5px)"
},
card: {
backgroundColor: constants.mainColor,
borderRadius: 15,
shadowOpacity: 0.6,
shadowRadius: 10,
flex: 1,
flexDirection: "row",
alignItems: "center"
},
nameFlag: {
backgroundColor: constants.mainColorLight,
height: "calc(100% - 30px)",
width: "15%",
marginVertical: 15,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
justifyContent: "center"
},
name: {
position: "absolute",
// TODO: translateX needs to use -50%, translateY needs to use 50% of parent width
transform: [{ rotate: "-90deg" }, { translateX: -33 }, { translateY: 13 }],
transformOrigin: "left",
width: "max-content",
fontFamily: constants.fontFamilyHeader,
fontSize: constants.fontSizeHeader
},
member: {
backgroundColor: constants.mainColorLight,
height: "calc(100% - 30px)",
width: "calc(85% - 30px)",
margin: 15,
borderRadius: 30,
padding: 15,
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
gap: 15,
justifyContent: "space-around",
alignItems: "center"
},
options: {
backgroundColor: constants.shadowColor,
position: "absolute",
top: 0,
left: 0,
zIndex: 100,
width: "100%",
height: "100%",
borderRadius: 15,
padding: 15,
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 25
},
input: {
backgroundColor: "white",
width: "100%",
borderRadius: 50,
padding: 5,
fontFamily: constants.fontFamilySubheader,
fontSize: constants.fontSizeHeader,
textAlign: "center"
},
buttons: {
flexDirection: "row",
gap: 25
},
button: {
borderRadius: 50,
width: 40,
height: 40
},
delete: {
backgroundColor: constants.alertColor
},
confirm: {
backgroundColor: constants.accentColor
}
})
Return to post
this is a follow up question for my problem.
I have this layout and I want to use it as an component which will be more square shaped.
I am struggling trying to create this layout with css in react native.
Can someone help me? I really only need the style for centering the text on the left .
I appreciate your help.
type TeamsProps = {
name: string,
}
const TeamCard = (props: TeamsProps) => {
const [showOptions, setShowOptions] = useState<Boolean>(false)
const toggleOptions = () => {
setShowOptions(!showOptions)
}
return (
<View style={[styles.container, { height: (Dimensions.get("window").width - 3 * 15) / 2 }]}>
<TouchableOpacity onLongPress={toggleOptions} style={styles.card}>
<View style={styles.nameFlag}>
<Text style={styles.name}>{props.name}</Text>
</View>
<View style={styles.member}>
</View>
</TouchableOpacity>
{ showOptions ?
<TouchableOpacity onPress={toggleOptions} style={styles.options}>
<TextInput style={styles.input} value="Team Name"></TextInput>
<View style={styles.buttons}>
<TouchableOpacity style={[styles.button, styles.delete]}>
<Delete style={{ fontSize: 20, color: "white", margin: "auto" }} />
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.confirm]}>
<Check style={{ fontSize: 20, color: "white", margin: "auto" }} />
</TouchableOpacity>
</View>
</TouchableOpacity>
: <></>
}
</View>
)
}
const styles = StyleSheet.create({
container: {
flexBasis: "calc(50% - 7.5px)"
},
card: {
backgroundColor: constants.mainColor,
borderRadius: 15,
shadowOpacity: 0.6,
shadowRadius: 10,
flex: 1,
flexDirection: "row",
alignItems: "center"
},
nameFlag: {
backgroundColor: constants.mainColorLight,
height: "calc(100% - 30px)",
width: "15%",
marginVertical: 15,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
justifyContent: "center"
},
name: {
position: "absolute",
// TODO: translateX needs to use -50%, translateY needs to use 50% of parent width
transform: [{ rotate: "-90deg" }, { translateX: -33 }, { translateY: 13 }],
transformOrigin: "left",
width: "max-content",
fontFamily: constants.fontFamilyHeader,
fontSize: constants.fontSizeHeader
},
member: {
backgroundColor: constants.mainColorLight,
height: "calc(100% - 30px)",
width: "calc(85% - 30px)",
margin: 15,
borderRadius: 30,
padding: 15,
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
gap: 15,
justifyContent: "space-around",
alignItems: "center"
},
options: {
backgroundColor: constants.shadowColor,
position: "absolute",
top: 0,
left: 0,
zIndex: 100,
width: "100%",
height: "100%",
borderRadius: 15,
padding: 15,
flex: 1,
justifyContent: "center",
alignItems: "center",
gap: 25
},
input: {
backgroundColor: "white",
width: "100%",
borderRadius: 50,
padding: 5,
fontFamily: constants.fontFamilySubheader,
fontSize: constants.fontSizeHeader,
textAlign: "center"
},
buttons: {
flexDirection: "row",
gap: 25
},
button: {
borderRadius: 50,
width: 40,
height: 40
},
delete: {
backgroundColor: constants.alertColor
},
confirm: {
backgroundColor: constants.accentColor
}
})
weird shifting if text gets longer #Hammad Hassan
Try out this code and let me know
type CardProps= {
name: string
}
const Card = (props: CardProps) => {
return (
<View style={styles.container}>
<View style={styles.nameFlag}>
<Text style={styles.name}>{props.name}</Text>
</View>
<View style={styles.main}>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: constants.mainColor,
flex: 1,
flexDirection: "row"
},
nameFlag: {
backgroundColor: constants.mainColorLight,
height: "95%",
width: "15%",
marginVertical: "5%",
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
justifyContent: "center"
},
name: {
transform: [{ rotate: "-90deg" }, { translateY: -12 }],
fontFamily: constants.fontFamily,
fontSize: constants.fonzSizeHeader,
textAlign: 'center',
marginRight: 'auto',
marginLeft: 'auto',
marginTop: 'auto',
marginBottom: 'auto'
},
main: {
backgroundColor: constants.mainColorLight,
height: "95%",
width: "75%",
margin: "5%",
borderRadius: 50
}
})
export { Card }
Well I thought I was getting the hang of styling. Tested on several different sized phones and it all looked great. Then... I tested on an iPad. Several of my screens ran way off the page. I am using flex: 1 for the container so I don't understand why. Do iPads not respect flex: 1 or something? Or did I just royally mangle the layout code? I thought using the screen dimensions and % to calculate most things would work for responsive design.
Example, sign in screen. Bottom 2 buttons "Login" and "Home" run almost completely off iPad screen. On phone devices seem to display fine.
EDIT: Thank you so much for the answer! I have rewritten the code and it looks fabulous now on the ipad. I hope this code is an improvement, I have added it to the bottom. Now to rewrite ALL the screens facepalm
import React, { useState } from "react";
import {
Dimensions,
Image,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import { auth } from '../../src/config'
import AppText from "../components/AppText";
import colors from "../config/colors";
import Constants from "expo-constants";
let width = Dimensions.get('window').width;
function SignIn( { navigation } ){
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [message, setMessage] = useState('');
function emailSignIn(email, password){
email = email.trim();
auth.signInWithEmailAndPassword(email, password)
.then(function(result) {
setMessage('');
}).catch(function(error) {
setMessage('Invalid Email or Password. Sorry :(');
});
}
function updateEmail(email){
setMessage('');
setEmail(email);
}
function updatePassword(password){
setMessage('');
setPassword(password);
}
return (
<View style={styles.container}>
<Image style={styles.image} source={require("../assets/logo.png")} />
<Image style={styles.rainbow} source={require("../assets/rainbow.png")} />
<View style={styles.bottom}>
<View style={styles.inputView}>
<TextInput
style={{width: width * 0.8, textAlign: "center", padding: width * 0.02}}
placeholder="E m a i l..."
placeholderTextColor="#003f5c"
onChangeText={(email) => updateEmail(email)}
autoCapitalize = 'none'
/>
</View>
<View style={styles.inputView2}>
<TextInput
style={{width: width * 0.8, textAlign: "center", padding: width * 0.02}}
placeholder="P a s s w o r d..."
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => updatePassword(password)}
autoCapitalize = 'none'
/>
</View>
<TouchableOpacity onPress={()=> navigation.navigate('ForgotPassword')}>
<Text style={styles.forgot_button}>Forgot Password?</Text>
</TouchableOpacity>
<AppText style={styles.message}>{message}</AppText>
<TouchableOpacity onPress={()=>emailSignIn(email,password)} style={styles.appButtonContainer}>
<Text style={styles.appButtonText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>navigation.navigate('StartScreen')} style={styles.appButtonContainer}>
<Text style={styles.appButtonText}>HOME</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default SignIn;
const styles = StyleSheet.create({
appButtonContainer: {
elevation: 8,
backgroundColor: colors.purple,
borderRadius: 30,
borderWidth: 1,
paddingVertical: "3%",
width: width * 0.8,
marginBottom: 10,
},
appButtonText: {
fontSize: width * 0.04,
color: colors.white,
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase",
letterSpacing: 10,
},
bottom: {
alignItems: "center",
marginTop: width * 0.8,
},
container: {
flex: 1,
backgroundColor: colors.white,
justifyContent: "center",
alignItems: "center",
marginTop: Constants.statusBarHeight,
},
forgot_button: {
height: width * 0.1,
fontWeight: "bold",
},
image: {
width: width* 0.5,
resizeMode: "contain",
position: "absolute",
top: -20,
},
inputView: {
backgroundColor: "#d9f1ff",
borderRadius: 30,
borderWidth: 1,
alignItems: "center",
justifyContent: "center",
marginBottom: width * 0.05,
},
inputView2: {
backgroundColor: "#ffffb8",
borderRadius: 30,
alignItems: "center",
justifyContent: "center",
borderWidth: 1,
marginBottom: 0,
},
message: {
color: colors.red,
marginTop: width * 0.05,
marginBottom: 10,
alignSelf: "center",
},
rainbow: {
position: "absolute",
top: "10%",
},
});
New styles:
const styles = StyleSheet.create({
appButtonContainer: {
elevation: 8,
backgroundColor: colors.purple,
borderRadius: 30,
borderWidth: 1,
justifyContent: "center",
marginHorizontal: "5%",
height: "25%",
},
appButtonText: {
fontSize: 18,
color: colors.white,
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase",
letterSpacing: 10,
},
container: {
flex: 1,
backgroundColor: colors.white,
marginTop: Constants.statusBarHeight,
},
forgot_button: {
alignSelf: "center",
fontWeight: "bold",
},
image: {
height: 200,
width: 200,
},
imageContainer: {
flex: 2,
justifyContent: "center",
alignItems: "center",
},
inputButtons: {
flex: 1,
justifyContent: "space-around",
marginHorizontal: "10%",
},
inputView: {
backgroundColor: "#d9f1ff",
borderRadius: 30,
borderWidth: 1,
alignItems: "center",
justifyContent: "center",
height: "25%",
},
inputView2: {
backgroundColor: "#ffffb8",
borderRadius: 30,
alignItems: "center",
justifyContent: "center",
borderWidth: 1,
height: "25%",
},
message: {
color: colors.red,
alignSelf: "center",
},
rainbow: {
flex: 1,
width: "100%",
height: "100%",
position: "absolute",
},
rainbowImage: {
height: "60%",
position: "absolute",
top: "15%",
},
submitButtons: {
flex: 1,
justifyContent: "space-around",
},
});
You're getting a width from Dimensions at the top level of your file and then basing all of your layout calculations on this later on. This means that whenever this file is first parsed/run, that width will be calculated. That'll work if the device reports its width correctly on the first pass through the code (not guaranteed), but will break if it gets an unusual width during that pass (likely) and will definitely break if the window changes size or rotates.
Instead of basing all of your calculations on that static width, I suggest you look into leveraging Flexbox for dynamic layouts.
For example, at one point in your code, you set a TextInput to 80% of the view by doing width * 0.8. You could do the same thing by just setting the width to 80%:
export default function App() {
return (
<View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
<TextInput
style={{borderWidth: 1, width: "80%"}}
/>
</View>
);
}
Basically, try to do everything you can to get rid of relying on Dimensions unless you really need it. And, if you do need it, make sure you calculate it at the time you need it based on the current screen and not just at the first run of the app.
I want to write stylesheet to display a loyout like this image:
avatar:
And I write code like this:
<View style={styles.header}></View>
<View style={styles.meInfor}>
<Image style={styles.avatar}
source={require('../../images/cristiano-ronaldo.jpg')} />
</View>
and style:
header:{
width: width,
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
width: width,
backgroundColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
},
avatar: {
marginTop: -50,
width: 100,
height: 100,
borderRadius: 100,
}
I use marginTop: - 50 to pull the avatar to top, but the result like this:
bad result:
How can i do to style this avatar like the first image?
Try this code it run well on my case
Component
import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, Dimensions } from 'react-native';
export default class App extends Component {
render() {
const {header, meInfor, avatar, container} = styles;
return (
<View style={container}>
<View style={header}></View>
<View style={meInfor}></View>
<Image style={avatar}
source={{uri: 'http://infosahabat.com/wp-content/uploads/2015/12/Permainan-Bola-Besar.jpg'}}
/>
</View>
);
}
}
And this for the style
Style
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'lightgray',
},
header:{
height: 100,
backgroundColor: '#1270BA',
},
meInfor:{
backgroundColor: '#FFF',
top: 0,
height: 50,
width: (Dimensions.get('window').width),
},
avatar: {
position: 'absolute',
top: 50,
left: (Dimensions.get('window').width / 2) - 50,
alignItems: 'center',
width: 100,
height: 100,
borderColor: 'black',
borderWidth: 1,
borderRadius: 100,
}
});
Change your stylesheet like this
header : {
width: width,
height: 100,
backgroundColor: '#1270BA'
},
meInfor : {
position: 'absolute',
width: width,
alignItems: 'center',
justifyContent: 'center'
},
avatar : {
marginTop: 50,
width: 100,
height: 100,
borderRadius: 100
}