React Native UI not rendering properly - javascript

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.

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 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. :)

Is there a way I can wrap the whole contents of a Text component inside parent view in react-native?

I am creating a screen in react-native where I have to display text on a parent view. How do I make the whole text be displayed?
At first I thought its a problem with text not wrapping, so I tried this solution from one question here
<View style={{flexDirection:'row'}}>
<Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd
You miss fdd
Another line
and another one
</Text>
</View>
I then tried numberOfLines={1}
This is my code
<View style={{ width: '100%', height: '15%', position: 'absolute', alignSelf: 'center', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%', }}>
<Text style={{ width: '80%', backgroundColor: 'transparent', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' }}>
{`Text the first &
Text the second &
text the third`}
</Text>
</View>
I expect all text to be rendered but only the first line is rendered
Text is rendering correctly but as you have placed the property width=80% it's bounded to wrap the content to the new line. I have used the red color for parent view for more text clarity. Please try to run the below code and let me know if you face any issue. I will try to help you mate.
<View style={{ backgroundColor: 'red', borderRadius: 5 }}>
<Text style={{ backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 18,
color: '#005F6A',
marginTop: '5%'
}}>
Text the first & Text the second & text the third, Text the fourth & text the fifth
</Text>
</View>

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.

React Native weird flex behavior

I'm trying to create a header with an image so I write this:
<View style={{
flex: 1,
backgroundColor: "#FFFFFF",
padding: 20
}}
>
<View style={{ flex: 3 }}>
<Image
source={this.images.header}
style={{
flex: 1,
alignSelf: "flex-end", // HERE
resizeMode: "contain",
marginTop: -20,
marginLeft: -20
}}
/>
</View>
</View>
The weird part is alignSelf: "flex-end" - this align the image at the left side! As far as I know, it must be alignSelf: "flex-start" to align left.
Am I wrong?
PS: I use marginTop: -20 and marginLeft: -20 to stick the image to borders of the device (because of padding: 20 the container)
Any idea?
Thank in advance!
I think it is because the Image cover the whole space but the image data is resized so that you think it is only in a part of the view. Try removing flex: 1and set the widthand heightproperly or at leaset one of both.

Categories