Ошибка при настройке текста в пользовательском компоненте

Question

Я работаю на экране пользовательского интерфейса.

Я делаю этот экран 1-м слева.И я застрял в одной точке.Я сделал это много. .

Мне нужно выровнять текст в одном направлении, а также как я могу поместить это фоновое изображение, и когда я нажимаю кнопки, это не таквидимый на экране.

Здесь я установил вид:

 <View style={styles.userInformations}>
 <View style={{ height: 195, width: "100%", backgroundColor: "#22C1B9", }}>
 <Text style={styles.headline}>Dance</Text>
 <View style={styles.headlines}>
 <Text >3754 TRACKS</Text>
 </View>

И вот у меня есть Стиль:

headline: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 35,
    flex: 1,
    flexDirection: 'column',
marginTop:80,
    width: 200,
    height: 40,
    marginLeft:80,
    justifyContent: 'center', 
    alignItems: 'center',
},
headlines: {
  textAlign: 'center',
  fontWeight: 'bold',
  fontSize: 20,
  marginTop: 10,
  width: 200,
  height: 30,
  marginLeft:80,
  justifyContent: 'center', 
  alignItems: 'center',
},
searchBtnStyle: {
  marginTop: 15,
  backgroundColor: '#FFD701',
  borderColor: 'transparent',
  borderWidth: 0,
  borderRadius: 25,
  width: '80%',
  padding: 5
},