I have had a couple of problems with this React Native Paper card, I need to vertically align the tittle but justifyContent is being pretty much ingnored.
Here's the Card I have been working on.
const UnitCard = (props) => {
return (
<Card style={styles.card}>
<Card.Content style={styles.cardContent}>
<Title>UNIT CARD</Title>
<Headline>Mt</Headline>
</Card.Content>
</Card>
);
};
And this is the StyleSheet, I already tried ussing both justifyContent and allignItems as suggested here
const styles = StyleSheet.create({
card: {
backgroundColor: "skyblue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
flex: 1,
},
cardContent: {
backgroundColor: "coral",
display: "flex",
flexDirection: "row"
},
});
Here's a screenshot of my device
I am new to React-Native but something like this helped me out.
What I did is I took a Card made it a circle and inside its Card.Content I made it take all the space of the Card and also made it circle and after that I wrote the properties to place all the views to be in centre of the Card.Content section.
<Card style={styles.cardCircle}>
<Card.Content style={styles.cardCircleContent}>
<Text>{"here"}</Text>
</Card.Content>
</Card>
const styles = StyleSheet.create({
cardCircle: {
borderRadius: 100,
width: 140,
height: 140,
backgroundColor: "red",
elevation: 10,
},
cardCircleContent: {
flex: 1,
borderRadius: 100,
justifyContent: "center",
alignItems: "center",
},
});
Related
Hi I'm building an app for IOS and Android with react Native, and I'm a newbie this is my first app, and I think I'm not too bad, but I have a UI that is only a supermarket list, but I have the head ready but I need place the below the image , I made a new View but it comes out in the middle of the screen. Can you explain to me why it is not shown where to go, thanks.
Can you explain to me why? Thanks I share codes
enter image description here
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<View style={styles.container}expoex>
<View style={styles.header}>
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
</View>
<View style={styles.menu}>
<Image source={require('./assets/menu3.png')} />
<Image source={require('./assets/menu2.png')} />
<Image source={require('./assets/menu5.png')} />
<Image source={require('./assets/menu1.png')} />
<Image source={require('./assets/menu4.png')} />
</View>
</View>
<View style={styles.textNomList}>
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop:62,
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'flex-start',
height: 145,
marginVertical: 10,
},
imageContainer: {
alignItems: 'center',
justifyContent: 'center',
marginLeft:5,
height: 145,
},
logo: {
width: 100,
height: 140,
},
menu: {
flex:1,
flexDirection:'row',
justifyContent:'space-between',
marginHorizontal: 20,
marginTop:15,
height:145,
},
textNomList: {
flex:1,
alignItems:'flex-start',
justifyContent:'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
the result of this code is
enter image description here
I only can see some styling issues, check out below, edit it as required
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop: 62,
// flex: 1,
flexDirection: 'row',
// justifyContent: 'center',
// alignItems: 'flex-start',
// height: 145,
// marginVertical: 10,
},
imageContainer: {
// alignItems: 'center',
// justifyContent: 'center',
marginLeft: 5,
height: 145,
},
logo: {
width: 100,
height: 140,
backgroundColor:'fff'
},
menu: {
// flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 15,
height: 145,
},
textNomList: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
You should put your text in the same View that is wrapping your image and then style it appropriately.
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
I am not good at styling but it looks like your app should look decent with how the styles are at the current moment.
<ScrollView contentContainerStyle={styles.list}>
{pastGuesses.map((guess, index) => renderListItem(guess, pastGuesses.length - index))}
</ScrollView>
listContainer: {
flex: 1,
width: '80%'
},
list: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-end'
},
listItem: {
borderColor: "#ccc",
borderWidth: 1,
padding: 15,
marginVertical: 10,
backgroundColor: "#fff",
flexDirection: 'row',
justifyContent: 'space-around',
width: "60%"
}
Here i am using ScrollView in react native.
Here is my code shered. But, unfortunately the scroll is not working.
I am not getting any error but scorll is not happening.
Please take a look
Using react-native, I created a custom button as follows:
import React, {Component, Fragment} from 'react';
import globalStyles from './../../globals/styles'
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default class MyButton extends Component {
render() {
return (
<TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
<View style={styles.textContainer}>
<Text style={styles.text}>{this.props.buttonText}</Text>
</View>
</TouchableOpacity>
)
}
}
let buttonFontSize = 10;
const styles = StyleSheet.create({
textContainer: {
justifyContent: 'center',
alignItems: 'center',
},
opacitySurface: {
backgroundColor: globalStyles.colors.customerGreen,
width: "25%",
height: 60,
padding: 10,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.8,
shadowRadius: 1.5
},
text: {
textAlign: 'center',
fontFamily: globalStyles.fonts.OpenSans,
color: 'white',
fontSize: buttonFontSize,
}
}
);
But the text inside this button doesn't align vertically. Premise: I am new in react-native and I am almost sure I missing something of really stupid.
For the properties justifyContent and alignItems to work they need to be on an element with display: flex.
Whats making your text align to center is the property textAlign: 'center'
on style.text
Use display: 'flex' and flex: 1 on your style.textContainer
textContainer: {
display: 'flex'
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
add css to your opacitySurface
display: "flex",
justifyContent: "center",
alignItems: "center"
it will make your text in center
Add flex: 1 in your textContainer style :
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
I'm using React Native and trying to create a specific layout.
I have an image, vertically & horizontally centred (within a View) and some Text on top of the image also vertically & horizontally centred. The Text needs to come on top of image/background image therefore I put it inside the image tag.
Now the content of that text can be very long and because it is inside the image tag, it wraps.
How can I make it so the content inside Text won't wrap and still be on top of the Image?
My layout so far:
The layout I'm trying to achieve
My code:
<TouchableHighlight onPress={onPress}>
<View style={styles.categoryContainer}>
<View style={styles.leftContainer}>
<View style={styles.categoryIndexContainer}>
<Text style={styles.categoryIndex}>01</Text>
</View>
</View>
<View style={styles.middleContainer}>
<Image source={img} style={styles.categoryImage}>
<Text style={styles.categoryName}>Some very long title name</Text>
</Image>
</View>
<View style={styles.rightContainer}></View>
</View>
</TouchableHighlight>
const styles = StyleSheet.create({
categoryContainer: {
flexDirection: 'row',
},
leftContainer: {
width: 50,
paddingLeft: 15,
paddingTop: 30,
},
middleContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
flexDirection: 'row',
},
rightContainer: {
width: 50,
},
categoryName: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: 40,
textAlign: 'center',
backgroundColor: 'transparent',
flexWrap: 'nowrap',
},
categoryImage: {
alignItems:'center',
justifyContent:'center',
flexWrap: 'nowrap',
},
})
Thanks
You should specify on categoryName style: position: 'absolute' then set the top, left, right, bottom attributes until you place the Text above the Image.
The borderRadius style attribute doesn't change the border of a component correctly.
I would expect to see a green circle on the red background without any white space. Instead, I see this.
class Healthie extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.button} />
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
button: {
backgroundColor: 'green',
borderRadius: 50,
width: 100,
height: 100,
textAlign: 'center'
}
});
react-native version: 0.17.0.
no need to wrap button or text inside views, just put this on your style
overflow: hidden
it works for me
To get what you're looking for, you're going to have to wrap the Text box inside another View. The View will not default to another BG color when the borderRadius is changed:
<View style={styles.container}>
<View style={styles.button}>
<Text style={{ backgroundColor: 'transparent' }}>Text</Text>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
button: {
backgroundColor: 'green',
borderRadius: 50,
width: 100,
height: 100,
textAlign: 'center',
flexDirection:'row',
alignItems:'center',
justifyContent:'center'
}
});
Check out this demo.