Can't align text horizontally in ReactNative UI - javascript

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.

Related

React Native Component Renders under other components inside a modal

I have a modal that contains various children components. One of them being a calendar component that is opened after pressing the text "Select Date"
Upon opening the Calendar component renders underneath the other components on the page.
I have tried using position: 'absolute' with a higher zIndex but I still cannot get the Calendar Component to render on top of everything else...how can I accomplish this?
JSX For the components
<View style={styles.container}>
<View style={styles.routineitems}>
<TouchableOpacity >
<Text style={{ }}>Due Date</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>calendarShouldShow(calendarVisible)}>
<Text style={{ }}>Select Date</Text>
</TouchableOpacity>
</View>
<Calendar style={{position: 'absolute',zIndex: 4}}/>
<View style={styles.routineitems}>
<Text>Tags</Text>
<DropDownPicker
placeholder="Tags"
/>
</View>
<View style={styles.routineitems}>
<Text>Notes</Text>
<TextInput
style={styles.input}
onChangeText ={ value => setNotes(value)}
value={notes}
laceholder="Notes"
textAlign={'right'}
/>
</View>
</View>
STYLESHEET
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: '100%'
},
routineitems: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: '90%',
marginBottom: '1%',
marginTop: '1%',
alignItems: 'center',
zIndex: 0
},
input: {
height: 40,
width: '30%',
borderRadius: 20,
backgroundColor: 'white',
fontSize: 50,
textAlignVertical:'bottom',
paddingTop: 0,
paddingBottom:0,
textAlign: 'right'
}
});

Styling a custom modal, unwillingly getting white surface around custom modal

I want to create a welcome Modal which I then import into a seperate MainScreen.js File and implement it there.
No matter how I style the modal, there is always a white surface appearing aroung my modal even tho I tried to make it only appear as a "popup window". I will show you the relevant code parts I struggle with.
MainScreen.js
//Screen Setup for MainScreen
return(
<View style={styles.screen}>
<View style={styles.tophalf}>
<CustomItemPicker/>
</View>
<View style={styles.bottomhalf}>
<View style={styles.topbuttons}>
<CustomButton
style={styles.button}
onPress={addTheItem}
children="Add a Item"
/>
<CustomButton
style={styles.button}
onPress={() => props.navigation.push('Profile')}
children = "My Profile"
/>
</View>
<View style={styles.bottombuttons}>
<CustomButton
style={styles.button}
children = "My Messages"
/>
<CustomButton
style={styles.button}
children = "options"
/>
</View>
</View>
<WelcomeModal
modalVisible={modalVisible}
/>
</View>
)
};
//Visual Definition of all components
const styles = StyleSheet.create({
screen:{
flexDirection: "column",
flex: 1
},
button:{
fontFamily: "AmaticBold",
//Shadow Properties
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6,
elevation: 3.5,
width: 125,
textAlign: 'center'
},
tophalf:{
flex: 1,
alignItems: "center",
justifyContent:"center"
},
bottomhalf:{
flex:1,
alignItems: "center",
flexDirection: 'column',
justifyContent: 'space-between'
},
topbuttons:{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
bottombuttons:{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around'
}
});
export default MainScreen;
WelcomeModal:
const WelcomeModal = props =>{
return(
<Modal
animationType="slide"
transparent={false}
visible={props.modalVisible}
>
<View style={styles.ModalWindow}>
<View style={styles.modalItemsWrapper}>
<Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
bla bla bla bla bla
</Text>
</View>
<View style={styles.modalItemsWrapper2}>
<Text>Pick a Nickname: </Text>
<TextInput/>
</View>
<View>
<Text></Text>
<Checkbox/>
<Checkbox/>
<Checkbox/>
</View>
</View>
</Modal>
)
};
const styles = StyleSheet.create({
ModalWindow:{
backgroundColor: "red"
margin: 50,
flexDirection: 'column',
alignItems: 'center',
borderColor: "black",
borderRadius: 10,
borderWidth: 2
//justifyContent: "center",
},
modalItemsWrapper:{
//nothing in here for now
}
});
export default WelcomeModal;
Here you can see an image of the result (MainScreen with implemented WelcomeModal
As you can see, the WelcomeModal appears and also has a proper border, the problem is that the modal in reality is full screen and the MainScreen is completely hidden behind the "white surface" that is around the red custom Modal. I dont know how to resolve this problem. Any help is appriciated.
I got help from a discord forum related to react-native and now got a solution that worked out for me:
const WelcomeModal = props =>{
return(
<Modal
animationType="slide"
transparent={true}
visible={props.modalVisible}
>
<View style={{flex:1, backgroundColor: "transparent"}}>
<View style={styles.ModalWrapper}>
<View style={styles.modalItemsWrapper}>
<Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
bla bla bla bla bla
</Text>
</View>
<View style={styles.modalItemsWrapper2}>
<Text>Pick a Nickname: </Text>
<TextInput/>
</View>
<View>
<Text></Text>
<Checkbox/>
<Checkbox/>
<Checkbox/>
</View>
</View>
</View>
</Modal>
)
};
const styles = StyleSheet.create({
ModalWrapper:{
margin: 50,
flexDirection: 'column',
alignItems: 'center',
borderColor: "black",
borderRadius: 10,
borderWidth: 2,
backgroundColor: "red"
},
modalItemsWrapper:{
}
});
export default WelcomeModal;
What solved my problem was to set transparent={true} inside the modal props and then setting the backgroundColor of the wrapping view inside the modal to "transparent". This made only my wanted red modal to appear.

react native : there is way to place text like my example?

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>
);
}

FlatList moves/drags in all directions

When I click on my FlatList I can drag and move it in all directions (up/down/right left). Although the list appears to be vertical (maybe because of the styling), the scroll bar still appears horizontally. How can I disable this dragging?
This is how I am using the FlatList:
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
This is from the FriendItem's return
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles for FriendItem:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
I also tried removing the TouchableOpacity but it made no difference.
What you can try. is below :
UPDATE:
<Flatlist
bounces={false}/>
try this here, or add bounces={false} in the top scrollView if its there
Hope it helps. feel free for doubts
This issue happened because of some times you have given a width to the parent view of flat list. like below.
<View style={{width: '90%'}}>
<FlatList/>
</View>
simply add the flatlist to the same width with bounces false.
<View style={{width: '90%'}}>
<FlatList
contentContainerStyle={{width: '90%'}}
bounces={false}
/>
</View>
by adding bounces=false, your flatlist will not be able drag to different directions.

React Native, having problems with Flex Box

I'm practicing my React Native programming and I have an issue with the Flex Layout that I don't seem to understand pretty well
I wanted to make my test app look like this image below
Sample App
But in the end, this is what I get. There is some misalignment in the 'Home' text which suppose to be centered properly and a missing gap on the two right icons.
Sample Test App
I have tried putting padding on the two icon but have no luck with in.
Here's my code:
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.headerBrandingContainer}>
<Text style={styles.headerBranding}>Brand</Text>
</View>
<View style={styles.headerRowContainer}>
<Icon name="menu" size={30} color="white" />
<Text style={styles.headerRowPage}>Home</Text>
<View style={styles.headerRowIcons}>
<Icon name="filter" size={30} color="white" />
<Icon name="search" size={30} color="white" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
headerContainer: {
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center',
},
headerBrandingContainer: {
marginTop: 50,
alignItems: 'center',
},
headerBranding: {
fontSize: 40,
fontWeight: '400',
letterSpacing: 1,
color: '#fff',
},
headerRowContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10
},
headerRowIcons: {
//backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
},
headerRowPage: {
// marginLeft:20,
fontSize: 25,
fontWeight: '500',
color: '#fff',
}
});
To align childs of headerContainer vertically you should use alignItems with the code below :
headerContainer: {
display: 'flex',
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center',
alignItems: 'center'
}
A usefull resource to understand flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Remove too your marginTop on headerBrandingContainer styles.
EDIT:
Finally I think the best way is to make some modifications in the component tree so that the headerRowContainer items are all flex elements to 1. In this way, the title is always centered (the views having the same size) and we can now manage the placement of buttons without impacting the rest. It works perfectly for me.
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.headerBrandingContainer}>
<Text style={styles.headerBranding}>Brand</Text>
</View>
<View style={styles.headerRowContainer}>
<View style={styles.buttonsContainerLeft}>
<Icon name="menu" size={30} color="white" />
</View>
<View style={styles.titleContainer}>
<Text style={styles.headerRowPage}>Home</Text>
</View>
<View style={styles.headerRowIcons}>
<Icon
name="filter"
size={30}
color="white"
style={styles.filterIcon}
/>
<Icon name="search" size={30} color="white" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
headerContainer: {
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center'
},
headerBrandingContainer: {
marginTop: 50,
alignItems: 'center'
},
headerBranding: {
fontSize: 40,
fontWeight: '400',
letterSpacing: 1,
color: '#fff'
},
headerRowContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
margin: 10
},
buttonsContainerLeft: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start'
},
titleContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
headerRowIcons: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-end'
},
headerRowPage: {
fontSize: 25,
fontWeight: '500',
color: '#fff'
},
filterIcon: {
marginRight: 20
}
});

Categories