Look of items in list with react native

Question

My first react native app lists trending ads in India with a hyperlink to details on the web about the item.

The part of the code that prints an item is the following.

<View style={{flex: 1, paddingTop:20}}> <FlatList data={this.state.dataSource} renderItem={({item}) => <Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(item.url) } >{item.title}</Text> } keyExtractor={(item, index) => index} /> </View>

I want to learn how to style the items in the list to look better. The web version of the project has the following look for the list

How can I style the items to look more attractive, more similar to my web look and clearly displaying that the items are clickable?

import _ from 'lodash';

import Expo from 'expo';
import React, { Component } from 'react';
import {FlatList, ActivityIndicator,
  View,
  ScrollView,
  StyleSheet,
  Image,
  TouchableHighlight,
  ListView,Linking
} from 'react-native';

import {
  Text,
  Card,
  ButtonGroup,
  Tile,
  Col,
  Row,
  Icon,
  List,
  ListItem,
  Avatar
} from 'react-native-elements';

import colors from 'HSColors';

const users = [
  {
    name: 'brynn',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
  },
  {
    name: 'thot leader',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg',
  },
  {
    name: 'jsa',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg',
  },
  {
    name: 'talhaconcepts',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg',
  },
  {
    name: 'andy vitale',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg',
  },
  {
    name: 'katy friedson',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
  },
];

const log = () => console.log('this is an example method');

const list1 = [
  {
    title: 'Appointments',
    icon: 'av-timer',
  },
  {
    title: 'Trips',
    icon: 'flight-takeoff',
  },
  {
    title: 'Passwords',
    icon: 'fingerprint',
  },
  {
    title: 'Pitches',
    icon: 'lightbulb-outline',
  },
  {
    title: 'Updates',
    icon: 'track-changes',
  },
];

const list2 = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President',
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman',
  },
  {
    name: 'Amanda Martin',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
    subtitle: 'CEO',
  },
  {
    name: 'Christy Thomas',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
    subtitle: 'Lead Developer',
  },
  {
    name: 'Melissa Jones',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
    subtitle: 'CTO',
  },
];

const list3 = [
  {
    image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    icon: null,
    title: null,
  },
  {
    image_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    icon: null,
    title: null,
  },
  {
    image_url: null,
    icon: null,
    title: 'LR',
  },
  {
    image_url: null,
    icon: {name: 'user', type: 'font-awesome'},
    title: null,
  },
  {
    image_url: null,
    icon: {name: 'user-female', type: 'simple-line-icon'},
    title: null,
  },
  {
    image_url: null,
    icon: {name: 'baidu', type: 'entypo'},
    title: null,
  },
]

class Icons extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state = {
      selectedIndex: 0,
      value: 0.5,
      dataSource: ds.cloneWithRows(list1),
        isLoading: true
    };

    this.updateIndex = this.updateIndex.bind(this);
    this.renderRow = this.renderRow.bind(this);
  }

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex });
  }

  renderRow(rowData, sectionID) {
    return (
      <ListItem
        key={sectionID}
        onPress={log}
        title={rowData.title}
        icon={{ name: rowData.icon }}
      />
    );
  }
    componentDidMount(){
        return fetch('https://www.koolbusiness.com/in.json')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies,
                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }
  render() {
      if(this.state.isLoading){
          return(
              <View style={{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    const { navigation } = this.props;
    const buttons = ['Button1', 'Button2'];
    const { selectedIndex } = this.state;
      if(this.state.isLoading){
          return(
              <View style={{flex: 1, padding: 20}}>
                  <ActivityIndicator/>
              </View>
          )
      }
    return (
      <ScrollView>
        <View style={styles.headerContainer}>
          <Icon color="white" name="invert-colors" size={62} />
          <Text style={styles.heading}>Trending Ads India</Text>
        </View>
          <View style={styles.MainContainer}>


          </View>
          <View style={{flex: 1, paddingTop:20}}>
              <FlatList
                  data={this.state.dataSource}
                  renderItem={({item}) =>      <Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(item.url) } >{item.title}</Text>
                  }
                  keyExtractor={(item, index) => index}
              />
          </View>

      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40,
    backgroundColor: '#FD6B78'
  },
  heading: {
    color: 'white',
    marginTop: 10,
    fontSize: 22,
  },
  fonts: {
    marginBottom: 8,
  },
  user: {
    flexDirection: 'row',
    marginBottom: 6,
  },
  image: {
    width: 30,
    height: 30,
    marginRight: 10,
  },
  name: {
    fontSize: 16,
    marginTop: 5,
  },
  social: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  subtitleView: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingTop: 5,
  },
  ratingImage: {
    height: 19.21,
    width: 100,
  },
  ratingText: {
    paddingLeft: 10,
    color: 'grey',
  },
});

export default Icons;

Answer 1

Please try this. It will Help You.

<View style={styles.mainWrapper} >
            <FlatList data={this.state.data} renderItem={this._renderList} />

        </View>

_Renderlist will render your Item. You can manipulate it to support your need.

_renderList = ({ item }) => {
    return (
        <TouchableWithoutFeedback onPress={(event) => this._selectedItem(item.key)}>
            <View style={styles.listRowContainer}>
                <View style={styles.listinside1Container}>
                    <Image style={styles.listImage} source={item.icon} />
                    <View style={styles.listContainer} onPress={(event) => this._selectedItem(item.text)}  >
                        <Text style={styles.listHeader} >{item.header}</Text>
                        <Text style={styles.listValue} >{item.value}</Text>
                    </View>
                </View>
                <Image style={styles.listimgArrow} source={require('../../../resources/toolbar/chevron_right_grey.png')} />
            </View>
        </TouchableWithoutFeedback>
    );

}

In render list you can create your Item designed for your use.

Please let me know.