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.
Working in React Native here and just trying to align some child text in the bottom left of a View. Ive tried various topMargin and padding options, but none work reliably/responsively.
What I have/want:
Code currently:
<TouchableWithoutFeedback onPress={() => onPress(props.id)}>
<View style={styles.card}>
<Text style={styles.card_Head}>What is <Text style={{fontFamily: 'SequelSans-BlackDisp'}}>Something?</Text></Text>
<Text style={styles.card_Body}>Count: {count} Id: {props.id}</Text>
</View>
</TouchableWithoutFeedback>);
card: {
backgroundColor: 'white',
height: wp('79%'),
width: wp('79%'),
justifyContent: 'flex-start',
alignItems: 'center',
color: 'black',
padding: 40,
textAlign: 'left',
borderRadius: 20,
marginBottom: hp('9%'),
},
card_Head: {
fontFamily: 'SequelSans-RomanDisp',
fontSize: hp('4.4%'),
lineHeight: hp('4.4%'),
alignSelf: 'flex-start',
},
card_Body: {
textAlign: 'left',
fontFamily: 'SequelSans-BlackDisp',
fontSize: hp('1.5%'),
alignSelf: 'flex-start',
},
How can I do this responsively?
You can use flex box space-between prop like this
card: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
}
Ciao, try align-self: 'flex-end' like this:
card_Body: {
textAlign: 'left',
fontFamily: 'SequelSans-BlackDisp',
fontSize: hp('1.5%'),
alignSelf: 'flex-end',
},
Or marginTop in percentage.
I am unable to center a Text component in a View component in React Native both on android as well as ios.
As you can see the + sign in not centred in the white circle.
This is my component:
<TouchableOpacity
style={styles.blueButton}
>
<View style={styles.addButton}>
<Text style={styles.plus}>+</Text>
</View>
</TouchableOpacity>
This is my stylesheet:
blueButton: {
height: 40,
width: 40,
borderRadius: 3,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#3498DB',
},
addButton: {
width: 15,
height: 15,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
plus: {
color: '#3498DB',
fontSize: 20,
},
Can you try my below code:
Compnent code:
<View style={styles.addButtonBlue}>
<View style={styles.addButton}>
<Text style={styles.plus}>+</Text>
</View>
</View>
Stylesheet Code
addButtonBlue: {
width: 70,
height: 70,
borderRadius: 10,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
backgroundColor: '#3498db',
},
addButton: {
width: 30,
height: 30,
borderRadius: 30,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
plus: {
color: '#3498DB',
},
The extra font padding in android might be the culprit here. Try adding includeFontPadding: false to the text style.
more info here - https://facebook.github.io/react-native/docs/text#style
includeFontPadding: bool (Android)
Set to false to remove extra font padding intended to make space for
certain ascenders / descenders. With some fonts, this padding can make
text look slightly misaligned when centered vertically. For best
results also set textAlignVertical to center. Default is true.
With react native and flexbox, I do not understand why the text is outside the container (orange bakcground) ?
<View style={styles.main_container}>
<View style={styles.infos_container}>
<View style={styles.info_item}>
<Text style={styles.info_name}>
Âge
</Text>
<Text style={styles.info_value}>
18
</Text>
</View>
<View style={styles.info_item}>
<Text style={styles.info_name}>
Médias publics
</Text>
<Text style={styles.info_value}>
2
</Text>
</View>
</View>
</View>
const styles = StyleSheet.create({
infos_container: {
backgroundColor: 'orange',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
info_item: {
margin: 5,
alignItems: 'center',
},
info_name: {
color: '#6c757d',
fontSize: 11,
},
info_value: {
color: '#343a40',
},
})
I just want my blocks styles.info_item to be horizontal and orange background
remove flex: 1 from infos_container settings flex: 0 in the main_container shouldn't have an effect on the styling of infos_container
infos_container: {
backgroundColor: 'orange',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
You didn't import main_container in your style. Maybe you have flex: 0 inside it
Change your style to this:
main_container: {
flex: 1,
},
infos_container: {
backgroundColor: 'orange',
alignSelf: 'stretch',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
info_item: {
margin: 5,
alignItems: 'center',
},
info_name: {
color: '#6c757d',
fontSize: 11,
},
info_value: {
color: '#343a40',
},
I am working with Picker native-base to React Native. I wanna style picker like the picture I post with both Android and iOS. But I don't know how to style like this.
Install an npm library
https://www.npmjs.com/package/react-native-smooth-picker
npm i react-native-smooth-picker
You can also check from the git repository
https://github.com/rdhox/react-native-smooth-picker
Declare constant globally
import SmoothPicker from "react-native-smooth-picker";
const Bubble = props => {
const { children, selected, horizontal } = props;
return (
<View
style={[
horizontal ? styles.itemStyleHorizontal : styles.itemStyleVertical,
selected &&
(horizontal
? styles.itemSelectedStyleHorizontal
: styles.itemSelectedStyleVertical)
]}
>
<Text
style={{
textAlign: "center",
fontSize: selected ? 20 : 17,
color: selected ? "#006E4F" : "#006E4F",
fontWeight: selected ? "bold" : "normal",
}}
>
{children}
</Text>
</View>
);
};
Add inside render()
<SmoothPicker
initialScrollToIndex={selected}
onScrollToIndexFailed={() => {}}
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
bounces={true}
offsetSelection={40}
scrollAnimation
data={Array.from({ length: 15 }, (_, i) => 0 + i)}
onSelected={({ item, index }) => this.handleChange(index)}
renderItem={({ item, index }) => (
<Bubble selected={index === selected}>{item}</Bubble>
)}
/>
Check sample project for style, you need to little modified.
const styles = StyleSheet.create({
container: {
paddingTop: 60,
paddingBottom: 30,
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
wrapperHorizontal: {
width: 300,
height: 50,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black",
marginBottom: 80
},
wrapperVertical: {
width: 100,
height: 300,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black"
},
itemStyleVertical: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleVertical: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
},
itemStyleHorizontal: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleHorizontal: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
}
});