We Keep Coding

React Native UI not rendering properly

I am mapping an array. in table. I create table just using view and text. but now when there is lots of value. then that UI is not showing properly. as showin in image
here is my code of table
<ScrollView horizontal={true}>
<View style={{ flexDirection: "column", width: width / 3.1 }}>
<View
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#C0C3C3",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>Date</Text>
</View>
{mediDataP.map((item, i) => (
<View
key={i}
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#EEF1F1",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>{item.date}</Text>
</View>
))}
</View>
<View style={{ flexDirection: "column", width: width / 3.9 }}>
<View
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#C0C3C3",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>Time</Text>
</View>
{mediDataP.map((item, i) => (
<View
key={i}
style={{
height: 50,
justifyContent: "center",
backgroundColor: "#EEF1F1",
elevation: 5,
marginTop: "2%",
}}
>
<Text style={{ alignSelf: "center" }}>{item.time}</Text>
</View>
))}
</View>
</ScrollView>
please ignore it = I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly. I am mapping an array. in table. I am table just using view and text. but now when there is lots of value. then that UI is not showing properly.

I don't really know what the real behavior behind but i just found that on using % value of marginTop, it's has an effect depending of your component width, like with the compent which have your item.time for example; if you increase the size of the width, the size that the "2%" take increase too.

How to align item in react native?

I want to align my logo (the grey K) on the middle. i put my justify content and my align items to center the K but it doesn't work. I might do something wrong with my view ?
It's for IOS
<View style={{flex: 1, marginBottom: 50}}>
<View style={{marginLeft: 10, marginRight: 10}}>
{this.renderMonDashboardOpenDb()}
</View>
<View style={{flex: 1, marginLeft: 10, marginRight: 10, alignItems:'center', justifyContent:'center'}}>
<Text
style={{
fontSize: 30,
textAlign: 'center',
color: 'white',
}}>
Klaaap pour défendre tes couleurs !
</Text>
</View>
<View style={{flex: 1, alignItems:'center', justifyContent:'center'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Decibels')}><Image style={styles.logoVert} source={require('./Kvert.png')} /></TouchableOpacity>
</View>
[...]
</View>

Maybe the width of the surrounding View is not 100%?
To figure out you can set the color of the View which is surrounds the TouchableOpacity to red and now you can see if its width is over the whole screen.
If its not, you just have to set the width to 100% and everything will get centered.
Hope this helps maybe!
Good Luck.

Styling Card from react-native-elements: Align Title and icon vertically

I'm using a Card from react-native-elements. Turns out I want to add an icon next to its title but I can't get it to look nice.
Here's my code:
<Card
//title={this.props.item.offer.amount + " " + this.props.item.request.good}
title={
<View style={{justifyContent: 'center'}}>
<View style={{display: "flex",flexDirection: "row", justifyContent: 'center'}}>
<Text style={{fontSize: 18, justifyContent: 'center', fontWeight: 'bold'}}>{this.props.item.offer.amount + " " + this.props.item.request.good}</Text>
<View style={{flexGrow: 1}} />
<Button
buttonStyle={styles.localize}
icon={<Ionicons name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
onPress={() => this.props.navigation.push('Rastrear')}
/>
</View>
<View
style ={{
borderWidth: 0.5,
borderColor:'grey',
margin:2,
}}
/>
</View>
}
titleStyle={{textAlign: 'left'}}
containerStyle={{width: Dimensions.get('window').width-25}}>
...
</Card>
Turns out that looks like this:
What I want is to align the title and the icon vertically. How can I achieve this?
If comment out that "title" line you see inside of the Card and comment my personalized one it looks like this:
As you see the title here's centered vertically.
Update. styles.localize looks like this:
localize: {
padding: 4,
backgroundColor: '#FF5733',
borderColor: '#FF5733',
borderWidth: 2,
width: Dimensions.get('window').width-370,
borderRadius: 10,
justifyContent: 'center'
}

Actually, once you have already declared justifyContent to be center in the parent View, this would have effected the rest of the child Views to have this styling prop. What you can do is to replace justifyContent in the second View housing your Text and Icon components with alignItems. This should vertically align them in the space provided by your parent View.
Also, you can set a height constraint in the parent View and textAlignVertical in the Text for better alignment.
<View style={{justifyContent: 'center', height: 60}}>
<View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 18, textAlignVertical: 'center', fontWeight: 'bold'}}>12 Mouses</Text>
<View style={{flexGrow: 1}} />
<Button
buttonStyle={styles.localize}
icon={<Icon name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
onPress={() => {}}
/>
</View>
<View
style ={{
borderWidth: 0.5,
borderColor:'grey',
margin:2,
}}
/>
</View>
I have included a Snack here for testing. :)

How can I set an icon within a text input?

I am trying to set an icon inside a text input.
I know, there is this answer.
But it is not working as expected since the icon is outside of the TextInput, I need it to be inside.
This is what I am obtaining so far:
This is my code:
<View style={styles.InputContainer}>
<Ionicons
style={styles.IconWithinInput}
name="ios-search"
size={24}
/>
<TextInput
style={styles.AddEditInputs}
onChangeText={text => this.setState({ text })}
value={this.state.text}
/>
</View>
And the styles:
AddEditInputs: {
flex: 1,
height: 40,
borderWidth: 1,
},
IconWithinInput: {
padding: 10,
},
InputContainer: {
flexDirection: 'row',
},
I made the input borders like a rectangle to show you better what I meant to say.
The last design will be like this:
And as you may see, the input border is at the bottom of the icon too.
What else do I need to achieve what I need?

You cannot directly put icon on the textInput. What you can do is wrap the icon and textInput with the view with flexDirection set to row and provide the left padding to the icon so that it seems to appear as in textInput. If you want to do so you can use something like this
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{justifyContent: "center", marginRight: 5 }}>
<Image
source={{
uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png',
}}
style={{ width: 10, height: 10 }}
/>
</View>
<TextInput placeholder="Enter your name" />
</View>
</View>
But my suggestion is to use the Input component of react-native-elements as it has leftIcon as props. You can find more information at here

<View style={{flex: 1, flexDirection: 'row'}}>
<Image
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
style={{borderWidth: 1,width: 40, height: 40}}
/>
<TextInput
onChangeText={(text) => this.setState({text})}
value={this.state.text}
style={{borderWidth: 1, height: 40, borderColor: 'grey'}}
/>
<View>
Wrap the component with flex and provide width for the icon. You can set the icon by having some wrapper around since it can not be included inside textbox.

Javascript - React native - how to put in a TextInput and Text in the same row

I'm working on React native and Expo XDE on my Android and I want that these Texts - "username" and the "password" will be to the right to their TextInputs (because I write in Hebrew language), so it will be in two rows and not on the screenshot below.
This is the code:
<View style={styles.container}>
<Text > Travel </Text>
{/* <View style={styles.row}>
<View style={styles.inputWrap}> */}
<Text> Username </Text>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ username: text })}
value={this.state.username}
/>
<Text> Password </Text>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ password: text })}
value={this.state.password}
secureTextEntry={true}
/>
This is how its look now: the main screen with login or register
I'd tried these styles codes but it didn't work, it made a huge mess up on the android and everything just flew:
input: {
height: 40,
width: 180,
borderColor: "gray",
borderWidth: 1
},
inputWrap: {
flex: 1,
borderColor: "#cccccc",
borderBottomWidth: 1,
marginBottom: 10
},
row: {
flex: 1,
flexDirection: "row"
}
I also want to design the headline "Travel" on the top but I
haven't succeed at all after so many times, it stayed the same.
Can you please help me with those issues ? if more details are needed please tell me.
Thanks in advance.

You should wrap your Text and TextInput into another View which flex direction is row and vertically centered. This code works for me.
<View style={{flexDirection: 'column', flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Travel</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Username</Text>
<TextInput style={{width: 200}}/>
</View>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Password</Text>
<TextInput style={{width: 200}}/>
</View>
</View>