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.
Related
I have a TouchableOpacity set up as shown below:
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={() => selectImage()} style={{backgroundColor: COLORS.lightGray3, width: SIZES.width, height: 200, borderTopRightRadius: 15, borderTopLeftRadius: 15,}}>
<TouchableOpacity onPress={() => setModal(!modal)} style={{backgroundColor: 'white', width: 20, height: 20, borderRadius: 15, alignSelf:'flex-end', right: 10, top: 10}}>
<Icon name='x' size={20} style={{color: 'red'}}/>
</TouchableOpacity>
{array.picture == null ?
<View style={{alignItems: 'center', flexDirection: 'column', top: 50}}>
<Text>No Image Selected. </Text>
</View>
:
<Image resizeMode='cover' source={{uri: array.picture}} />
}
</TouchableOpacity>
</View>
In this TouchableOpacity is a conditional to load an image uri from an array once the image has been selected via selectImage(); even if array.picture IS NOT equal to null, it will either display the same "No Image Selected" text, or a gray background.
ARRAY:
[{"name": "test", "picture": "file:///Users/user/Library/Developer/CoreSimulator/Devices/C10A4A25-D633-44E8-AE53-AD8DD9601A82/data/Containers/Data/Application/C68582F5-CA35-4DD6-9D15-36A254411CD9/tmp/3E9EBBE3-AC1A-4C61-927E-DD168BD037A5.jpg", "price": 12}]
PICTURE OF DISPLAY:
ALSO, this is all displayed within a modal.
Anyone sure as to why this is occurring? Thanks!
If it's an array then try your condition like this you can either map it or just take picture from first index
{array.length>0 ?
<Image resizeMode='cover' source={{uri: array[0]?.picture}} />
:
<View style={{alignItems: 'center', flexDirection: 'column', top: 50}}>
<Text>No Image Selected. </Text>
</View>
}
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. :)
Here, I am displaying "icon="check-decagram" type="MaterialCommunityIcons" in center, but its just coming in center and 20 padding from top. I have to display it middle of the mobile screen. I tried may be I am doing some wrong .Please correct me .
return(
<ImageBackground source={BG} style={styles.imgBG}>
<ScrollView>
<View>
<Header title={title} icon={icon} navigation={navigation} />
</View>
<View style={{ flexDirection: 'column', backgroundColor: '#ffff',}}>
<View style={{
flexDirection:'column', backgroundColor:'#fff',alignItems:'center',paddingTop:20,justifyContent: 'center'}}>
<IconXL icon="check-decagram" type="MaterialCommunityIcons" style={{ color: 'green' }}/>
</View>
<View style={{
flexDirection:'row', backgroundColor:'#ffff',padding:20,flexWrap:'wrap'}}>
<SmallText textColor="grey" text={`v${updateResponse.updateStatusList.currentAppVersion} `}/>
<SmallText textColor="grey" text={`${updateResponse.updateStatusList.desc}`}/>
</View>
</View>
</ScrollView>
</ImageBackground>
)}
// Thanks
try to add two more property height: '100%' and width: '100%' in superview of icon,
like,
<View style={{flexDirection:'column',height: '100%',width: '100%',backgroundColor:'#fff',alignItems:'center',paddingTop:2,justifyContent: 'center'}}>
<IconXL icon="check-decagram" type="MaterialCommunityIcons" style={{ color:'green' }}/>
</View>
Hope this works for you,
Good luck.
You can try something like.
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}}>
<Text style={{backgroundColor: 'red'}}>
Your Text
</Text>
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.
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>