import React, {useState} from 'react';

import {View, StyleSheet, Text} from 'react-native';

export default function App() {

const [names]=useState

([

  {id: 1, name: "Javed", cgpa: 3.0},

  {id: 2, name: "Noman", cgpa: 2.7},

  {id: 3, name: "Ali", cgpa: 3.7},

  {id: 4, name: "Faisal", cgpa: 3.3},

  {id: 5, name: "Shahid", cgpa: 4.0},

  {id: 6, name: "Kamal", cgpa: 3.1},

  {id: 7, name: "Zahid", cgpa: 2.3}

  ]);

  return (

    <View>

      {

        names.map(

          (item)=> (

            <Text

            key={item.names}

            style={[item.cgpa>=2 && item.cgpa<3 && styles.redFont , item.cgpa>=3 && item.cgpa<3.7 && styles.blueFont, item.cgpa>=3.7 &&styles.italicFont ]} 

            >{item.id} {item.name} {item.cgpa}</Text>

          )

        )

        }

    </View>

  );

}

const styles=StyleSheet.create

(

  {

    redFont:

    {

      color:'red',

      fontWeight: 'bold',

    },

    blueFont:

    {

      color: 'blue'

    },

    italicFont:

    {

      fontStyle: 'italic',

      fontWeight:'bold',

      color: 'green'

    }

  }

)