BrandsComponent

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import axios from 'axios';
import strings from '../assests/res/strings'
import { Actions } from 'react-native-router-flux';

export default class BrandsComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
          questions: null,
        };
      }

      redirectBrandInfo(){
        Actions.brandInfo();
      }

      async componentDidMount() {
        const brands = (await axios.get('MY BACKEND URL')).data;
        this.setState({
          brands,
        });
      }
      render()
      {
        const info = strings.brandContainer.info;
        return (
          <View style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#FFF'
          }}>
          <Text style = { styles.title}>Brand list</Text>
          <Text style = { styles.normal}>{info}</Text>
          {
            this.state.brands && this.state.brands.map(brand =>
            <TouchableOpacity
             key={brand._id}
             onPress ={() => this.redirectBrandInfo()} >
              <View style={styles.button}>
              <Image
                style = { styles.imageStyle }
                source={{uri: brand.logo_small}}/>
              </View>
            </TouchableOpacity>
          )}
          </View>
        );
    }
}