Closed osdiab closed 5 years ago
Can you reproduce the issue on the latest release, v0.56?
yes.
+1
@osdiab: How is your component structured? I believe baseline alignment has only worked with siblings, and does not interact with line-height in the same way as the CSS spec specifies.
You can see in the code samples I posted above for details on the structure; it's not a complex layout, but I'll think more about how can possibly make this even simpler (kinda hard to imagine though)
Anybody have a chance to look at this?
@react-native-bot I meet the same problem:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const BaseLineTest = () => {
return (
<View style={style.dateTime}>
<Text style={style.date}>2018/9/29</Text>
<Text style={style.time}>14:41</Text>
</View>
);
};
export default BaseLineTest;
const style = StyleSheet.create({
dateTime: {
flexDirection: 'row',
backgroundColor: '#fbb',
alignItems: 'baseline',
height: 60
},
date: {
backgroundColor: '#bbf',
color: '#FFF',
marginRight: 10
},
time: {
backgroundColor: '#bff',
color: '#FFF',
fontSize: 30
}
});
React Native Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 1.79 GB / 7.89 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
react-native-cli: 2.0.1
react-native: 0.57.1
If you wrap the Text
elements with another Text
, it should work (it's not obvious tho).
<Text>
<Text style={style.date}>2018/9/29</Text>
<Text style={style.time}>14:41</Text>
</Text>
workaround found here: https://github.com/facebook/react-native/issues/15858#issuecomment-333942532
@elucaswork Do you know if there's a way to use the functionality of justifyContent: 'space-between'
with the wrapping Text
?
I currently have the following use case where one text node is aligned on the left side of the screen, while the other is on the right. But without wrapping the nodes in Text
, the baseline alignment does not work on android.
<View style={{ alignItems: 'baseline', flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={style.date}>2018/9/29</Text>
<Text style={style.time}>14:41</Text>
</View>
However, due to the properties of nested Text
, I can't seem to find the right props/styles to get one Text
node aligned to the left and the other to the right when they're wrapped in a Text
node
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.
Environment
Description
On the web,
align-items: baseline
is relative to first line: https://codepen.io/osdiab/pen/KBYyzzOn
react-native
, it seems to be happening relative to the last line, apparently, which is not very useful to me. See the demo.Reproducible Demo
https://snack.expo.io/By8Qr7xIX
Screenshots
react-native
web