data.json

{
    "accounts": [{
            "account_name": "Google",
            "boards": [{
                    "board_name": "Back End Developement",
                    "tasks": [{
                        "task_title": "User Journey",
                        "state": "open",
                        "comments": [{
                                "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                "user_id": 0
                            },
                            {
                                "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                "user_id": 1
                            },
                            {
                                "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                "user_id": 2
                            },
                            {
                                "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                "user_id": 3
                            }
                        ]
                    }]
                },
                {
                    "board_name": "Design Talks",
                    "tasks": [{
                            "task_title": "User Journey",
                            "state": "open",
                            "comments": [{
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 0
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 2
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 3
                                }
                            ]
                        },
                        {
                            "task_title": "User Journey",
                            "state": "open",
                            "comments": [{
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 2
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 3
                                }
                            ]
                        },
                        {
                            "task_title": "User Journey",
                            "state": "in-progress",
                            "comments": [{
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 2
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 3
                                }
                            ]
                        },
                        {
                            "task_title": "User Journey",
                            "state": "done",
                            "comments": [{
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 1
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 2
                                },
                                {
                                    "content": "Sit quia aliquam et voluptates quibusdam ad.",
                                    "user_id": 3
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "account_name": "Facebook, Inc",
            "boards": [{
                "board_name": "Front End Developement",
                "tasks": [{}]
            }]
        }
    ]
}

Home.js

import React, {Component} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  TextInput,
  FlatList,
  StyleSheet,
  ScrollView,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Container} from '../components/Container';

export class Home extends Component {
  state = {
    selectedHeadDataID: 0,
  };
  render() {
    //   get data from json file
    const data = require('../service/data.json');

    const {selectedHeadDataID} = this.state;
    const {
      plusIconContainer,
      logoContainerStyle,
      headContainer,
      boardsTextStyle,
      searchContainerStyle,
      iconContainerStyle,
      selectionDotStyle,
      cardContainerStyle,
      cardNameStyle,
      membersTextStyle,
    } = styles;
    return (
      <Container>
        <View style={headContainer}>
          <TouchableOpacity style={plusIconContainer}>
            <Text style={{fontSize: 25, color: 'white'}}>+</Text>
          </TouchableOpacity>

          <TouchableOpacity style={logoContainerStyle}>
            <Text style={{fontSize: 25, color: 'white'}}>+</Text>
          </TouchableOpacity>
        </View>

        <Text style={boardsTextStyle}>Boards</Text>
        <View style={searchContainerStyle}>
          <Icon name="search" size={16} color={'gray'} />
          <TextInput
            style={{marginStart: 15, height: 40, width: '90%'}}
            placeholderTextColor="gray"
            placeholder="Search cards..."
          />
        </View>
        {/* head section list */}
        <View style={{height: 80}}>
          <FlatList
            data={headData}
            contentContainerStyle={{
              width: '100%',
              marginTop: 25,
              justifyContent: 'space-around',
            }}
            horizontal
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item, index}) => {
              const {title} = item;
              const isSelected = index == selectedHeadDataID;
              return (
                <TouchableOpacity
                  style={{alignItems: 'center'}}
                  onPress={() => this.setState({selectedHeadDataID: index})}>
                  <Text
                    style={
                      ({color: 'black'}, isSelected && {color: '#628eea'})
                    }>
                    {title}
                  </Text>
                  {isSelected && <View style={selectionDotStyle} />}
                </TouchableOpacity>
              );
            }}
          />
        </View>
        {selectedHeadDataID == 0 && (
          <FlatList
            data={data.accounts}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({item}) => {
              return (
                <View>
                  <Text>{item.account_name}</Text>
                  <FlatList
                    data={item.boards}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({item}) => {
                      return (
                        <TouchableOpacity
                          style={cardContainerStyle}
                          onPress={() =>
                            this.props.navigation.navigate('ItemDetails',{item})
                          }>
                          <Text style={cardNameStyle}>{item.board_name}</Text>
                          <Text>{item.comments ? item.comments.length : 0}</Text>
                        </TouchableOpacity>
                      );
                    }}
                  />
                </View>
              );
            }}
          />
        )}
      </Container>
    );
  }
}

const headData = [{title: 'All Boards'}, {title: 'Teams'}, {title: 'Personal'}];

const styles = StyleSheet.create({
  plusIconContainer: {
    backgroundColor: '#7a9ce3',
    width: 38,
    height: 38,
    borderBottomLeftRadius: 18,
    borderTopLeftRadius: 18,
    borderTopRightRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    zIndex: 1,
    end: 25,
  },
  logoContainerStyle: {
    width: 38,
    height: 38,
    borderRadius: 10,
    borderWidth: 0.5,
    borderColor: 'gray',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    zIndex: 1,
    start: 25,
  },
  headContainer: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 50,
  },
  boardsTextStyle: {
    fontSize: 35,
    fontWeight: '600',
    marginTop: 30,
    marginStart: 25,
  },
  searchContainerStyle: {
    flexDirection: 'row',
    width: '80%',
    height: 45,
    alignSelf: 'center',
    borderRadius: 8,
    backgroundColor: '#d2d4d6',
    alignItems: 'center',
    paddingHorizontal: 20,
    marginTop: 15,
  },
  iconContainerStyle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 30,
  },
  selectionDotStyle: {
    width: 5,
    height: 5,
    borderRadius: 2.5,
    backgroundColor: '#628eea',
    marginTop: 5,
  },
  cardContainerStyle: {
    width: 350,
    height: 100,
    marginVertical: 8,
    backgroundColor: 'white',
    borderRadius: 15,
    alignSelf: 'center',
  },
  cardNameStyle: {
    color: 'black',
    fontSize: 16,
    marginTop: 20,
    marginStart: 20,
  },
  membersTextStyle: {
    color: 'black',
    fontSize: 16,
    marginTop: 20,
    marginStart: 20,
  },
});