React native paper DataTable.Cell overflow text causes hide full text - react-native

Question

Below code using DataTable.Cell.
If text bigger than column width it hide text
Please help need to display text if text bigger than column width need to break text in next line.
<DataTable.Row
style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
<DataTable.Cell
style={{
flex: 3,
flexWrap: 'wrap',
borderColor: 'yellow',
borderWidth: 2,
height: auto,
overflow: 'visible',
}}>
<View style={styles.rowbox}>
<Text style={styles.stnname}>Test 1</Text>
<Text>Day:1</Text>
<Text>Distance:0</Text>
</View>
</DataTable.Cell>
<DataTable.Cell numeric>Cell 1 2</DataTable.Cell>
<DataTable.Cell numeric>Cell 1 3</DataTable.Cell>
</DataTable.Row>
<DataTable.Row
style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
<DataTable.Cell
style={{
flex: 3,
flexWrap: 'wrap',
borderColor: 'yellow',
borderWidth: 2,
height: auto,
overflow: 'visible',
}}>
<View style={styles.rowbox}>
<Text style={styles.stnname}>Test 2 Test 2 Test 2</Text>
<Text>Day:1</Text>
<Text>Distance:0</Text>
</View>
</DataTable.Cell>
<DataTable.Cell numeric>Cell 2 2</DataTable.Cell>
<DataTable.Cell numeric>Cell 2 3</DataTable.Cell>
</DataTable.Row>
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
marginTop: 20,
zIndex:1
},
autocompleteContainer: {
flex: 1,
},
descriptionContainer: {
flex: 1,
justifyContent: 'center',
width:'100%',
alignItems: 'stretch'
},
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 6,
color: '#000',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
autodropsection:{
backgroundColor: "#fff",
flex:1,
},
containerMain: {
flex: 1,
padding: 0,
marginTop: 0,
},
datrow1:{
flex: 4,
flexDirection: 'column',
},
tableheader:{
backgroundColor : "#2375b3",
color:'#ffffff',
fontSize: 24,
fontWeight: '700',
flex: 2,
},
tableheadertitle:{
fontSize: 14,
fontWeight: '500',
color:'#fff',
textAlign:"center"
},
tableheadercell:{
color:"#fff",
fontSize:24,
},
cell:{
color:'#fff',
fontSize:24,
flexDirection:'column'
},
stnname:{
fontSize: 12,
fontWeight: '700',
color:'#333',
textAlign:"left",
flexWrap:'wrap',
alignContent:'flex-start'
},
rowbox:{
paddingTop:10,
paddingBottom:10,
paddingLeft:0,
paddingRight:0,
flexDirection:'column',
textAlign:'left',
justifyContent:'flex-start',
flex: 1,
borderWidth:2,
borderColor:'red',
flexWrap:'wrap',
width:'100%'
}
});

Answer 1

Use a View (with justifyContent: 'center') instead of DataTable.Cell to achieve the multilined cell
Source: https://github.com/callstack/react-native-paper/issues/2381#issuecomment-734155600

Answer 2

I Get the same issue, after big search i simply abandon this idea and start to use.
https://github.com/GeekyAnts/react-native-easy-grid/
Is realy simple to construct the same structure, like a table, after o just need to set border if you want, and done, simple and easy like Html.