Skip to main content

REACT NATIVE ITERATE ROWS WITH DIFFERENT COLOURS

 mytrip.tsx

import React from 'react'

import { View, Text, TouchableOpacity, Image } from 'react-native'

import { useNavigation } from '@react-navigation/native'

import { ScrollView } from 'react-native-gesture-handler'

import { SearchBar } from '../../components'

import { styles } from './styles'

import TripComponent from './TripComponent'


const mytripScreen = () => {

  const navigation = useNavigation()

  const [trips, setTrips] = React.useState(MYTRIPS)

  const searchTrips = (t: string) => {

    const newData = MYTRIPS.filter(function (item) {

      const itemData = item.title ? item.title.toUpperCase() : ''.toUpperCase()

      const textData = t.toUpperCase()

      return itemData.indexOf(textData) > -1

    })

    setTrips(newData)

  }


  return (

    <View style={styles.mytripMainContainer}>

      <View style={styles.mytripInnerContainer}>

        <View style={styles.tripSearchContainer}>

          <SearchBar type="trip" handleChange={(text: string) => searchTrips(text)} />

        </View>

        <ScrollView showsVerticalScrollIndicator={false} style={styles.tripScrollView}>

          {trips.map((item) => {

            return (

              <TripComponent

                id={item.id}

                heading={item.heading}

                title={item.title}

                days={item.days}

                dayfrom={item.dayfrom}

                dayto={item.dayto}

                price={item.price}

                members={item.members}

                type={item.type}

                status={item.status}

                handleChange={(id: string, title: string) => {

                  console.log('TRIP SELECTED : ', id + title)

                }}

              />

            )

          })}

        </ScrollView>

      </View>

      {/* <View style={styles.bottomBar}>

        <TouchableOpacity onPress={() => alert('search')}>

          <Image style={styles.imageStyle} source={require('../../assets/MyTrips/Search.png')} />

        </TouchableOpacity>

        <TouchableOpacity onPress={() => navigation.navigate('hamburgerMenuScreen')}>

          <Image style={styles.plusImageStyle} source={require('../../assets/MyTrips/Add.png')} />

        </TouchableOpacity>

        <TouchableOpacity onPress={() => alert('venue')}>

          <Image style={styles.imageStyle} source={require('../../assets/MyTrips/Trips_select.png')} />

        </TouchableOpacity>

      </View> */}

    </View>

  )

}


export default mytripScreen

const MYTRIPS = [

  {

    id: 1,

    heading: 'YOU CAN DO IT BETTER',

    title: 'Hawai trip Jan 21',

    days: 8,

    dayfrom: null,

    dayto: null,

    price: 3210,

    members: [

      { id: 1, name: 'A' },

      { id: 2, name: 'V' },

    ],

    type: 'Lock your holidays',

    status: 'Public',

  },

  {

    id: 2,

    heading: 'YOUR HOLIDAYS ARE ADVENTUROUS',

    title: 'Summer Vacations',

    days: null,

    dayfrom: '02 Jul, 20',

    dayto: '18 Jul, 20',

    price: 4990,

    members: [

      { id: 1, name: 'A' },

      { id: 2, name: 'V' },

      { id: 3, name: 'S' },

    ],

    type: 'All set to fly',

    status: 'Public',

  },

  {

    id: 3,

    heading: 'AWSOME IS A WORD FOR YOU!',

    title: 'Winters2020',

    days: null,

    dayfrom: '12 Feb, 20',

    dayto: '21 Feb, 20',

    price: 2010,

    members: [

      { id: 1, name: 'A' },

      { id: 2, name: 'V' },

      { id: 3, name: 'S' },

    ],

    type: 'All set to fly',

    status: 'Private',

  },

]



TripComponent.tsx

import React from 'react'

import { View, Text, TouchableOpacity, TextInput } from 'react-native'

import { styles } from './styles'


const priceValue = (price: string) => {

  return Number(parseFloat(price).toFixed(2)).toLocaleString('en', {

    minimumFractionDigits: 2,

  })

}


export default function TripComponent(props: any) {  

  const { id, heading, title, days, dayfrom, dayto, price, members, type, status } = props  

  const [value, onChangeText] = React.useState(title)

  const [isEdit, onEditText] = React.useState(-1)

  const onEdit = (index: number) => {

    onEditText(index)

  }

  if(BUTTON_COLORS.length == id){    

    let i=0

    BUTTON_COLORS.forEach(()=>{            

      BUTTON_COLORS.push(BUTTON_COLORS[i])

      i+=1;      

    })    

  }

  if(HEADING_COLORS.length == id){    

    let j=0

    HEADING_COLORS.forEach(()=>{            

      HEADING_COLORS.push(HEADING_COLORS[j])

      j+=1;      

    })    

  }

  return ( <View key={id} style={styles.card}>

    <View style={[{backgroundColor:HEADING_COLORS[id-1]},styles.cardTitleView]}>

      <Text>{heading} </Text>

    </View>

    <View style={styles.carLeftView}>

      <View style={styles.cardLeftViewInner}>

        {isEdit === -1 ? (

          <TouchableOpacity onPress={() => onEdit(0)}>

            <Text style={styles.leftText1}>{title} </Text>

          </TouchableOpacity>

        ) : (

          <TextInput

            style={styles.cardLeftViewTextInput}

            onChangeText={(text) => onChangeText(text)}

            // onBlur={() => alert('call')}

            // onFocus={() => alert('call')}

            onSubmitEditing={() => onEditText(-1)}

            value={title}

          />

        )}


        <Text style={styles.leftText2}>${priceValue(price)}</Text>

        <Text style={styles.leftText3}>{status}</Text>

        <View style={styles.circleContainer}>

          {members.length > 0 &&

            status == 'Public' &&

            members.map((i: any) => {

              return (

                <View style={styles.circleView}>

                  <Text>{i.name}</Text>

                </View>

              )

            })}              

        </View>

      </View>

      <View style={styles.rightViewContainer}>

        <View style={styles.rightTopView}>

          {days != null ? (

            <Text style={styles.rightDaysText}> {days} days</Text>

          ) : (

            <View style={styles.rightDaysContainer}>

              <View style={styles.rightDaysFrom}>

                <View style={styles.rightDaysFromCircle} />

                <Text style={styles.rightDaysFromText}>{dayfrom}</Text>

              </View>

              <View style={styles.rightDaysConnectingLine} />

              <View style={styles.rightDaysFrom}>

                <View style={styles.rightDaysToCircle} />

                <Text style={styles.rightDaysToText}>{dayto}</Text>

              </View>

            </View>

          )}

        </View>

        <TouchableOpacity style={[{backgroundColor: BUTTON_COLORS[id-1]},styles.button]} onPress={() => props.handleChange(id, value)}>                

          <Text style={styles.buttonText}>{type}</Text>                

        </TouchableOpacity>

      </View>

    </View>

  </View>)

}


const BUTTON_COLORS = ["#00CFCC", "#274792", "lightgray"];

const HEADING_COLORS = ["#FFCA9F", "#67d1a0", "lightgray"];



Labels:

Comments

Post a Comment

Popular posts from this blog

SETUP REST API IN CI

1. Create Rest_controller.php inside controllers and paste code: <?php defined('BASEPATH') OR exit('No direct script access allowed'); require APPPATH . '/libraries/API_Controller.php'; class Rest_controller extends API_Controller { public function __construct() { parent::__construct(); } public function index() { $this->api_return(             [ 'status' => true,                'result' => "Welcome to Testservices."             ],         200); } } ?> 2. Create api.php inside config and paste code : <?php defined('BASEPATH') OR exit('No direct script access allowed'); /**  * API Key Header Name  */ $config['api_key_header_name'] = 'X-API-KEY'; /**  * API Key GET Request Parameter Name  */ $config['api_key_get_name'] = 'key'; /**  * API Key POST Request Parameter Name ...
2 comments
Read more

NGrok Setup

 https://dashboard.ngrok.com/get-started/setup 1. Unzip to install On Linux or Mac OS X you can unzip ngrok from a terminal with the following command. On Windows, just double click ngrok.zip to extract it. unzip /path/to/ngrok.zip 2. Connect your account Running this command will add your authtoken to the default ngrok.yml configuration file. This will grant you access to more features and longer session times. Running tunnels will be listed on the endpoints page of the dashboard. ngrok config add-authtoken 1woFn9zVqcI4VeGuSIiN2VtmnPa_ZXuAuF1AAPkqApr7WVsQ 3. Fire it up Read the documentation on how to use ngrok. Try it out by running it from the command line: ngrok help To start a HTTP tunnel forwarding to your local port 80, run this next: ngrok http 80
Post a Comment
Read more

API ( service ) Image or Video Upload

## SAVE  VIDEO public function uploadmedia() { $target_path = "assets/uploads/"; $target_path = $target_path . basename($_FILES['file']['name']); if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) { $this->api_return( [ 'status' => true,    'result' => 'uploaded success' ], 200); } else{ $this->api_return( [ 'status' => false,    'result' => 'failed' ], 20); } } ## SAVE FILE IMAGE OR VIDEO public function savefile() { $filetype = $_FILES['file']['type']; if (strpos($filetype, 'image') !== false) { $type = 'image'; } if (strpos($filetype, 'video') !== false) { $type = 'video'; }         $filename = trim($_FILES['file']['name']); // $userid = trim($this->input->get('userid'));...
Post a Comment
Read more