How to align Icon vertically in IOS devices?
I want to align this options icon inside the TouchableHighlight in IOS application in react-native but when I implement it is not using textAlignVerticle property as it is android only property. How I can get the alternative which works both in android and IOS?
<TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight>ios react-native
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
add a comment |
I want to align this options icon inside the TouchableHighlight in IOS application in react-native but when I implement it is not using textAlignVerticle property as it is android only property. How I can get the alternative which works both in android and IOS?
<TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight>ios react-native
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
1
Possible duplicate of stackoverflow.com/questions/34969848/…
– Anurag Chutani
Nov 23 '18 at 5:27
add a comment |
I want to align this options icon inside the TouchableHighlight in IOS application in react-native but when I implement it is not using textAlignVerticle property as it is android only property. How I can get the alternative which works both in android and IOS?
<TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight>ios react-native
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
I want to align this options icon inside the TouchableHighlight in IOS application in react-native but when I implement it is not using textAlignVerticle property as it is android only property. How I can get the alternative which works both in android and IOS?
<TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight><TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight><TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight>ios react-native
ios react-native
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
asked Nov 23 '18 at 4:57
Arun kumarArun kumar
161416
161416
1
Possible duplicate of stackoverflow.com/questions/34969848/…
– Anurag Chutani
Nov 23 '18 at 5:27
add a comment |
1
Possible duplicate of stackoverflow.com/questions/34969848/…
– Anurag Chutani
Nov 23 '18 at 5:27
1
1
Possible duplicate of stackoverflow.com/questions/34969848/…
– Anurag Chutani
Nov 23 '18 at 5:27
Possible duplicate of stackoverflow.com/questions/34969848/…
– Anurag Chutani
Nov 23 '18 at 5:27
add a comment |
1 Answer
1
active
oldest
votes
A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection. The default flexDirection is column in react native.
In flexDirection: 'row';
You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.
Try with below code:
<TouchableHighlight
style={[
{
position: 'absolute',
bottom: 20,
zIndex:999999,
right: 155,
borderRadius: 25,
backgroundColor: '#0000ff'
}
]}>
<View
style={{
flex: 1,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center'
}}>
<Ionicons name="ios-home" size={20} color={'#FFF'} />
</View>
</TouchableHighlight>
I don't know what icon component are you using. I'm using react-native-vector-icons. So I don't need to set width and height in style props of icon component for icon size.
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440852%2fhow-to-align-icon-vertically-in-ios-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection. The default flexDirection is column in react native.
In flexDirection: 'row';
You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.
Try with below code:
<TouchableHighlight
style={[
{
position: 'absolute',
bottom: 20,
zIndex:999999,
right: 155,
borderRadius: 25,
backgroundColor: '#0000ff'
}
]}>
<View
style={{
flex: 1,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center'
}}>
<Ionicons name="ios-home" size={20} color={'#FFF'} />
</View>
</TouchableHighlight>
I don't know what icon component are you using. I'm using react-native-vector-icons. So I don't need to set width and height in style props of icon component for icon size.
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
add a comment |
A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection. The default flexDirection is column in react native.
In flexDirection: 'row';
You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.
Try with below code:
<TouchableHighlight
style={[
{
position: 'absolute',
bottom: 20,
zIndex:999999,
right: 155,
borderRadius: 25,
backgroundColor: '#0000ff'
}
]}>
<View
style={{
flex: 1,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center'
}}>
<Ionicons name="ios-home" size={20} color={'#FFF'} />
</View>
</TouchableHighlight>
I don't know what icon component are you using. I'm using react-native-vector-icons. So I don't need to set width and height in style props of icon component for icon size.
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
add a comment |
A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection. The default flexDirection is column in react native.
In flexDirection: 'row';
You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.
Try with below code:
<TouchableHighlight
style={[
{
position: 'absolute',
bottom: 20,
zIndex:999999,
right: 155,
borderRadius: 25,
backgroundColor: '#0000ff'
}
]}>
<View
style={{
flex: 1,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center'
}}>
<Ionicons name="ios-home" size={20} color={'#FFF'} />
</View>
</TouchableHighlight>
I don't know what icon component are you using. I'm using react-native-vector-icons. So I don't need to set width and height in style props of icon component for icon size.
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection. The default flexDirection is column in react native.
In flexDirection: 'row';
You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.
Try with below code:
<TouchableHighlight
style={[
{
position: 'absolute',
bottom: 20,
zIndex:999999,
right: 155,
borderRadius: 25,
backgroundColor: '#0000ff'
}
]}>
<View
style={{
flex: 1,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center'
}}>
<Ionicons name="ios-home" size={20} color={'#FFF'} />
</View>
</TouchableHighlight>
I don't know what icon component are you using. I'm using react-native-vector-icons. So I don't need to set width and height in style props of icon component for icon size.
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
answered Nov 23 '18 at 9:28
Lwin Kyaw MyatLwin Kyaw Myat
6931130
6931130
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440852%2fhow-to-align-icon-vertically-in-ios-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Possible duplicate of stackoverflow.com/questions/34969848/…
– Anurag Chutani
Nov 23 '18 at 5:27