React Native - Flex Layout - text overflow issue - css

Question

I have the following layout within a RN View:
The buttons on the left have a dynamic width applied to a surrounding wrapper view - as based on state there could be 1, 2 or 3 buttons. the width is applied by conditional styles. My issue is - whatever i do I cannot get the description box to wrap - the text wrapper takes on the full width of the screen rather than its available remaining width..
Code:
Here is the code structure:
<View
style={[FormStyles.prRowStrip, { width: "100%", flexGrow: 0, flexWrap: 0 }]}
>
<View style={RP_Styles.btnRow}>
<View
style={[
returnHeader_full() && RP_Styles.btnWrap,
returnHeader_two() && RP_Styles.btnWrap_two,
returnHeader_one() && RP_Styles.btnWrap_one
]}
>
<TouchableOpacity
style={[
RP_Styles.smlBtnWrap,
!hasSiteGuide() && HomeStyles.checkedInHide
]}
onPress={() => this.openDocument(this.state.locationSiteGuidePdf)}
>
<Image
style={RP_Styles.homeSegmentImg}
source={require("../images/icons/ico_site_guide.png")}
/>
<Text style={RP_Styles.homeSegmentText}>Guide</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
RP_Styles.smlBtnWrap,
!hasInventoryItems() && HomeStyles.checkedInHide
]}
onPress={toggleELModal}
>
<Image
style={RP_Styles.homeSegmentImg}
source={require("../images/icons/ico_equip_guide.png")}
/>
<Text style={RP_Styles.homeSegmentText}>Equip</Text>
</TouchableOpacity>
<TouchableOpacity style={RP_Styles.smlBtnWrap} onPress={toggleIssueModal}>
<Image
style={RP_Styles.homeSegmentImg}
source={require("../images/icons/ico_issue_b.png")}
/>
<Text style={RP_Styles.homeSegmentText}>Issue</Text>
</TouchableOpacity>
</View>
<View style={RP_Styles.txtBlock}>
<Text style={[RP_Styles.locBlockTxt]}>
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam
{this.state.currentMarkerName} - {this.state.currentMarkerDescription}
</Text>
</View>
</View>
</View>
Heres the relevant applied styles currently:
const RP_Styles = StyleSheet.create({
txtBlock: {
backgroundColor:'red',
flexDirection: 'column',
},
locBlockTxt: {
fontSize: 15,
color: '#f79431',
textTransform: 'uppercase',
fontWeight: '500',
flexWrap: 'wrap',
},
btnRow: {
paddingTop: 4,
paddingBottom: 10,
paddingHorizontal: 8,
flexDirection: 'row',
},
btnWrap: {
flexDirection: 'row',
width: '180',
},
btnWrap_two: {
flexDirection: 'row',
flexGrow:0,
flexShrink:0,
width:120,
},
btnWrap_one: {
flexDirection: 'row',
flexGrow:0,
flexShrink:0,
width:60,
},
flRow: {
flexDirection: 'row',
paddingHorizontal: 6,
paddingTop: 12,
marginVertical: 6,
},
firstRow: {
marginTop: 10,
},
)}
const Form_Styles = StyleSheet.create({
prRowStrip: {
backgroundColor: 'rgba(0,0,0,0.05)',
marginVertical: 3,
paddingVertical: 4,
paddingHorizontal: 5,
},
}
as you see there a few inline styles where i've tried adding various style classes - but this is where its at at the mo. Any help would be great-fully received!