I have tried to center the value (number + %) under the "Battery L" and "Battery R".
For example:
Battery L Battery R
100% 100%
Do you know how can I do?
<View style={{ alignItems: "center" }}>
<View style={{ flex: 1, flexDirection: "row" }}>
<View style={{ justifyContent: "flex-end", alignItems: "flex-end", marginRight: 20 }}>
<Text style={{}}>{"Battery R"}</Text>
</View>
<View style={{ justifyContent: "flex-start", alignItems: "flex-start" }}>
<Text style={{}}>{"Battery L"}</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<View style={{ justifyContent: "flex-end", alignItems: "flex-end" }}>
<Text>{"100" + " %"}</Text>
</View>
<View style={{ justifyContent: "flex-start", alignItems: "flex-start" }}>
<Text>{"100" + " %"}</Text>
</View>
</View>
</View>
Link
You can achieve this using simple style guide as below
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text>{"Battery L"}</Text>
<Text>{"100" + " %"}</Text>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text>{"Battery R"}</Text>
<Text>{"100" + " %"}</Text>
</View>
</View>
This may not be the optimal solution.
Hope this helps you. Feel free for doubts.
try flex:auto
you might find more here: https://css-tricks.com/almanac/properties/f/flex/
Related
im trying to check if my cart is empty or not , if its not empty then it returns this view and it s working well :
and if it is empty it should return a text that has "empty is cart" but its not working :
here is my code :
{
this.state.dataCart.map((item, i) => {
if (this.state.dataCart.length != 0) {
return (
<View style={{ flex: 1, }} key={i}>
<View style={{ width: width - 20, margin: 10, backgroundColor: 'transparent', flexDirection: 'row', borderBottomWidth: 2, borderColor: "#cccccc", paddingBottom: 10 }}>
<Image resizeMode={"contain"} style={{ width: width / 3, height: width / 3 }} source={require("../assets/Tacos-M.png")} />
<View style={{ flex: 1, backgroundColor: 'transparent', padding: 10, justifyContent: "space-between" }}>
<View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>Tacos {item.Viande}</Text>
<TouchableOpacity onPress={() => this.removeItem(i)}>
<Ionicons name="close-sharp" size={30} color={'#D05A0B'} />
</TouchableOpacity>
</View>
<Text>Sauce:{item.Sauce}</Text>
<Text>Taille:{item.taille}</Text>
<Text>Extra:{item.Extra}</Text>
<Text>Boissons:{item.Boisson}</Text>
<Text>Supplements:{item.Supplements}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: 'bold', fontSize: 20 }}>{item.Price * item.Quantity} DT</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity onPress={() => this.onChangeQual(i, false)}>
<Ionicons name="remove-circle" size={30} color={'#D05A0B'} />
</TouchableOpacity>
<Text style={{ paddingHorizontal: 8, fontWeight: 'bold' }}>{item.Quantity}</Text>
<TouchableOpacity onPress={() => this.onChangeQual(i, true)}>
<Ionicons name="add-circle" size={30} color={'#D05A0B'} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
)
} else {
return (
<View style={{ flex: 1, }}>
<Text>Cart is empty !</Text>
</View>
)
}
})
}
here is my log console :
is there any solution ?
If-else statements do not work inside JSX. So, use ternary operator instead.
this.state.dataCart.map((item, i) =>
this.state.dataCart.length != 0 ? (
<View style={{ flex: 1 }} key={i}>
<View
style={{
width: width - 20,
margin: 10,
backgroundColor: "transparent",
flexDirection: "row",
borderBottomWidth: 2,
borderColor: "#cccccc",
paddingBottom: 10,
}}
>
<Image
resizeMode={"contain"}
style={{ width: width / 3, height: width / 3 }}
source={require("../assets/Tacos-M.png")}
/>
<View
style={{
flex: 1,
backgroundColor: "transparent",
padding: 10,
justifyContent: "space-between",
}}
>
<View>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
Tacos {item.Viande}
</Text>
<TouchableOpacity onPress={() => this.removeItem(i)}>
<Ionicons name="close-sharp" size={30} color={"#D05A0B"} />
</TouchableOpacity>
</View>
<Text>Sauce:{item.Sauce}</Text>
<Text>Taille:{item.taille}</Text>
<Text>Extra:{item.Extra}</Text>
<Text>Boissons:{item.Boisson}</Text>
<Text>Supplements:{item.Supplements}</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
{item.Price * item.Quantity} DT
</Text>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<TouchableOpacity onPress={() => this.onChangeQual(i, false)}>
<Ionicons name="remove-circle" size={30} color={"#D05A0B"} />
</TouchableOpacity>
<Text style={{ paddingHorizontal: 8, fontWeight: "bold" }}>
{item.Quantity}
</Text>
<TouchableOpacity onPress={() => this.onChangeQual(i, true)}>
<Ionicons name="add-circle" size={30} color={"#D05A0B"} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
) : (
<View style={{ flex: 1 }}>
<Text>Cart is empty !</Text>
</View>
)
);
i need to place some text like the example below:
{item.Sampling_Request_ID} {item.Facility_Name}
{item.Sampling_Due_Date} {item.Water_Source_Name}
i try to fix the place as the example but its not works for me and i must know the way to achieve it.
in my example u can see the text that should be like my needs.
this is my way that try do that :
function renderItem({ item, index }) {
let name = '';
if (item.Facility_Name) {
name = item.Consumer_Name;
} else {
name = item.Consumer_Name;
}
return (
<TouchableOpacity
style={{
flex: 1,
paddingVertical: 15,
paddingHorizontal: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: 'white',
backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
}}
onPress={() => selectItem(data)}
>
<View
style={{
flex: 1,
alignItems: 'flex-start',
}}
>
<Text style={styles.lightText}>
{item.Facility_Name}
</Text>
</View>
<View
style={{
alignItems: 'flex-end',
}}
>
<Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Water_Source_Name}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
</View>
</TouchableOpacity>
);
}
Try out in the following way. I hope it works.
<TouchableOpacity
style={{flex: 1}}
onPress={onPress}
>
<View style = {{ width: '100%' }}>
<View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>{item.Sampling_Request_ID}</Text>
<Text>{item.Facility_Name}</Text>
</View>
<View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>{item.Sampling_Due_Date}< </Text>
<Text>{item.Water_Source_Name}</Text>
</View>
</View>
</TouchableOpacity>
Try with this
<TouchableOpacity
style={{
flex: 1,
paddingVertical: 15,
paddingHorizontal: 10,
// flexDirection: 'row',
// justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: 'white',
backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
}}
onPress={() => selectItem(data)}
>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
<Text style={styles.lightText}>
{item.Sampling_Request_ID}
</Text>
<Text style={styles.lightText}>{item.Facility_Name}</Text>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
<Text style={styles.lightText}>
{item.Sampling_Due_Date}
</Text>
<Text style={styles.lightText}>{item.Water_Source_Name}</Text>
</View>
</TouchableOpacity>
You can group Sampling_Request_ID & Facility_Name in one parent View that has a frexDirection set to row then group Sampling_Due_Date & Water_Source_Name in their View too. The following code should work as you described
function renderItem({ item, index }) {
let name = "";
if (item.Facility_Name) {
name = item.Consumer_Name;
} else {
name = item.Consumer_Name;
}
return (
<TouchableOpacity
style={{
flex: 1,
paddingVertical: 15,
paddingHorizontal: 10,
//flexDirection: 'row',
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
borderColor: "white",
backgroundColor: index % 2 == 0 ? "#dde6eb" : "#d1f0da",
}}
onPress={() => selectItem(data)}
>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<View
style={{
}}
>
<Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Facility_Name}</Text>
</View>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Water_Source_Name}</Text>
</View>
</View>
</TouchableOpacity>
);
}
Im fairly new to React native. I have created a MapView component on my screen and am trying to add a map key that indicates what each marker color is. I was able to achieve this only to find out that the layout bugs out when I leave and return to that screen
Example
This is what i'm trying to achieve
This is what I keep getting
This is my code
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<View style={{ flex: 0.6 }}>
<MapView
style={{ flex: 1 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
{/* Map key view begins here */}
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text style={{ color: '#fff', fontSize: 16 }}>
{'Existing Crossings'}
</Text>
</View>
</View>
<Marker coordinate={location} />
</MapView>
</View>
Any help would be very appreciative. please let me know if I am missing any vital information on this post.
I found out that I must wrap my map key View in a <Fragment/> Component outside of the <MapView> component. I also had to style it with position:"absolute"
Heres My code
<View style={{ flex: 0.6 }}>
<MapView
style={{ flex: 1 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
<Marker coordinate={location} />
</MapView>
<Fragment>
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
position: 'absolute',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text style={{ color: '#fff', fontSize: 16 }}>
{'Existing Crossings'}
</Text>
</View>
</View>
</Fragment>
</View>
I have a problem with KeyboardAvoidingView where my container seems to be overlapping my header when I clicked the text input like this
and I'm using header from react native elements
here is my code
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<Header
left={<IconWrapper
image={<Image source={img.icons.menu} style={{ width: normalize(26), resizeMode: 'contain', paddingHorizontal: normalize(5), marginHorizontal: normalize(5) }} />}
onPress={() => Actions.drawerOpen()} />}
title={'Activity Log'}
right={<View style={{ width: normalize(30) }} />}
/>
<View style={styles.innerContainer}>
<Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
<View style={{marginVertical: 10}}>
{columns}
</View>
<TextInput
placeholder={"Additional Notes"}
/>
</View>
</KeyboardAvoidingView>
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center'
},
innerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
})
I'm currently working on my React Native's app UI and an alignment problem is killing me: I can't get my text box and text input's texts aligned horizontally.
Here is an excerpt of the render for a line:
render() {
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.textLabel}>Player name:</Text>
<TextInput
style={styles.textBox}
onChangeText={(playerNameState) => this.setState({playerNameState })}
value={this.state.playerNameState} />
</View>
</View>
);
}
And here are the styles I use (background colour is just for boundingbox reference:
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
backgroundColor: 'white'
},
line: {
flexDirection: 'row',
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
margin: 5,
height: 50
},
textLabel: {
height: 50,
fontSize: 18,
backgroundColor: 'blue',
alignItems: 'center'
},
textBox: {
color: 'grey',
height: 50,
fontSize: 18,
backgroundColor: 'red',
flexGrow: 1,
alignItems: 'center'
}
I think I shouldn't be needing as many alaignItems, but I just wanted to show you what I tried. Any ideas?
Wrap those Text(Input)-Components into Views and it should work:
render() {
return (
<View style={styles.container}>
<View style={styles.line}>
<View style={styles.textLabel}>
<Text>Player name:</Text>
</View>
<View style={styles.textBox}>
<TextInput
onChangeText={(playerNameState) => this.setState({playerNameState })}
value={this.state.playerNameState} />
</View>
</View>
</View>
);}
You can also add justifyContent: 'center' to styles.textBox & textLabel to align the content vertically.