Style width using flex in React Native - react-native

Question

I'm working in react native and I'm trying to style a component. I have a view (black border) that wraps two views (A and B). I would like something that looks like this - where I the view that wraps A has a width of about 75% and the view that wraps B has a width of about 25%.
When this component is rendered out as a list, however, what I'm getting is something like this - where the width of the A view is dependent on how much text it holds.
I was able to set the width to a specific amount, but it always seems to change based on the device I test it on (different on iPhone 5, 6, 6 plus, etc.). Therefore I'm trying to use flex styling, but can't seem to get it right. Here is my code for my styling and component structure:
const styles = StyleSheet.create({
title: {
color: '#000',
textAlign: 'left',
fontSize: 80,
},
row: {
flex: 1,
flexDirection: 'row',
padding: 0,
height: 180,
borderBottomColor: '#888',
borderBottomWidth: 1,
alignItems: 'stretch'
},
innerContainer: {
flex: 1,
padding: 0,
flexDirection: 'row',
alignItems: 'stretch',
},
sideDivider: {
flex: 0.8,
padding: 0,
backgroundColor: '#cacaca',
justifyContent: 'center'
},
sideDividerArrow: {
flex: 0.2,
padding: 0,
alignItems: 'center',
backgroundColor: 'cyan',
justifyContent: 'center',
},
});
...
render() {
return (
<View style={styles.row} ref={component => this._root = component}>
<TouchableHighlight onPress={this.handleClick.bind(this)}>
<View style={styles.innerContainer}>
<View style={styles.sideDivider}>
<Text style={styles.title}>
{this.state.routeData.busNumber}
</Text>
<Text>{this.state.routeData.fullRoute}</Text>
</View>
<View style={styles.sideDividerArrow}>
<Text>></Text>
</View>
</View>
</TouchableHighlight>
</View>
)
}
}
Any and all help is appreciated. Thanks!!

Answer 1

The flex attribute expects an integer. We cannot use fractions for it.
I guess rendering the following will help you achieve the desired look. You can then add your interactions and clean up the inline styles
<View style ={{flexDirection:'row',flex:1,borderColor:'black',borderWidth:1}}>
<View style ={{flex:3,backgroundColor:'blue',alignItems:'center',justifyContent:'center'}}>
<Text>A</Text>
</View>
<View style ={{flex:1,backgroundColor:'yellow',alignItems:'center',justifyContent:'center'}}>
<Text>B</Text>
</View>
</View>

Answer 2

Your picture has 3 components, but the code actually has more.
The code should work as intended if you do:
- row: flex: 1 (to make sure row is full width) + flexDirection: 'row' (so row children will be left to right).
- A container: flex: 3.
- B container: flex: 1.
At least one of the children of A or B should have a flex: 1 (or any other number) to ensure that children also stretch to fill the parent.
In your case, giving the title and the text components a flex: 1 property will probably do the trick.
Hope this helps!