Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

onpress stops working when loading new items react-native Android

$
0
0

the following code works fine on iOS, but on android after loading the orders array and rendering it, the onpress event stops working, at first I thought it was a problem with firebase but then I did it locally and I get the same issue.

import React from 'react';
import {
ActivityIndicator,
Alert,
Button, 
Dimensions,
Image,
StatusBar,
StyleSheet,
ScrollView,
Text,
TouchableOpacity,
View,
Platform,
RefreshControl,
YellowBox } from 'react-native';

import { Ionicons as Icon } from '@expo/vector-icons';  
import { Card, DefaultTheme } from 'react-native-paper';
import NavigationService from '../../Navigation/navigationService';
import _ from 'lodash';
YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
  if (message.indexOf('Setting a timer') <= -1) {
    _console.warn(message);
  }
};
import Firebase from '../../connection/to-firebase';

const LOGO_URL = 'https://i.imgur.com/BbYaucd.png';
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        paddingTop: StatusBar.currentHeight,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT / 2,
        backgroundColor: "#317AFA",
    },
    innerContainer: {width:SCREEN_WIDTH, alignItems: 'center', justifyContent: 'center' },
    header: {position:'absolute', padding: 15, paddingTop: Platform.OS === 'ios' ? 13 : 7, marginTop:SCREEN_HEIGHT*0.05,zIndex:99 },
    scrollView: {
        position:'absolute',
                    top:SCREEN_HEIGHT*0.35,
                    marginHorizontal: 20,
                    width: SCREEN_WIDTH*0.90,
                    height: SCREEN_HEIGHT,
                    zIndex:9999
      },
      textHeader:{
        marginTop:10,
        color: 'white',
        fontWeight: 'bold',
        fontSize: 40,
      }
});
const theme = {
    colors: {
        ...DefaultTheme.colors,
        primary: '#3498db',
        accent: '#f1c40f',
      }
}

export default class DefaultScreen extends React.Component {

    constructor (props) {
        super(props)
        console.ignoredYellowBox = [
            'Setting a timer'
        ];
        this.state = {
          orders: [],
          refreshing: false,
          timePassed: false
        }
     }

     _onRefresh = () => {
        this.setState({refreshing: true});

        this.getOrders().then(() => {
          this.setState({refreshing: false});
        });

        //setTimeout(()=>{this.setState({refreshing: false})},1000)

      }

    async getOrders(){
        //let result = await Firebase.extractOrder();

        let result =  [
            {
             "Note": "",
             "coords":  {
               "finalLatitude": 14.100751767597542,
               "finalLongitude": -87.18541710839844,
               "initialLatitude": 14.061113522979957,
               "initialLongitude": -87.21807641015624
             },
             "createdAt":  {
               "nanoseconds": 686000000,
               "seconds": 1576188983
             },
             "destinataryName": "Eliana Martínez",
             "destinataryPhone": "97412032",
             "idSubcategory": "1",
             "idUsuario": 1,
             "isTakenBySomeone": false,
             "orderID": "rQAt5IEI687AkoI8rShh",
             "products": [
               {
                 "id": 93634,
                 "observation": "",
                 "price": "56.00",
                 "quantity": 1
               },
                {
                 "id": 29909,
                 "observation": "",
                 "price": "131.00",
                 "quantity": 97
               }
             ],
             "status": "Pending",
             "telephone": 23456987,
             "transportType": "Motocicleta"
           }
         ]

        this.setState({ orders:  result});
    }


    componentDidMount(){
        //this.getOrders();
    }

    renderOrders = (orders) =>{
    return orders.map((a,b)=>{
        return [
          <MainOrders key={a.orderID} dName= {a.orderID} note ={a.Note} transType={a.transportType} orderDetails={a}
                        navigation={this.props.navigation}
          />
        ]
      })
    }

    render() {

    setTimeout(()=>{this.setState({timePassed: true})}, 1000);
    if (!this.state.timePassed){

        return (
            <View style={styles.container}>

                    <StatusBar barStyle="dark-content" />
                    <View style={styles.header}>
                        <TouchableOpacity
                            onPress={() => {
                                this.props.navigation.openDrawer();
                            }}
                            style = {{marginTop:'10%'}}
                        >
                            <Icon name="md-menu" size={35} color={'#fff'}/>
                        </TouchableOpacity>
                        <Text style={styles.textHeader}>Home</Text>
                    </View>
                    <View style={styles.innerContainer}>
                    <ScrollView style={styles.scrollView}
                                refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh}/>} 
                    >
                        <Card theme={theme}>
                           <Card.Title title="Order List" subtitle=""  />
                           <Card.Content>
                           <ActivityIndicator size="small" color="#317AFA" />
                           </Card.Content>
                           <Card.Actions>
                          <Button title="View Order" style={{zIndex:9999, elevation:15}} onPress={()=>{
                             Alert.alert('Hello World')
                            }}>View Order</Button>
                        </Card.Actions>
                         </Card>
                    </ScrollView>
                    </View>
                </View>
        );
    }
    else{

        const {orders,navigation} = this.state;
    DefaultScreen.navigationOptions = {
                                         title: ''
                                          }

        return (
            <View style={styles.container}>

                    <StatusBar barStyle="dark-content" />
                    <View style={styles.header}>
                        <TouchableOpacity
                            onPress={() => {
                                this.props.navigation.openDrawer();
                            }}
                            style = {{marginTop:'10%'}}
                        >
                            <Icon name="md-menu" size={35} color={'#fff'}/>
                        </TouchableOpacity>
                        <Text style={styles.textHeader}>Home</Text>
                    </View>
                    <View style={styles.innerContainer}>
                    <ScrollView style={styles.scrollView}
                                refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh}/>} 

                    >
                        <Card theme={theme}

                        >
                           <Card.Title title="Order List" subtitle=""  />
                           <Card.Content>
                           {
                               orders.map((a,b)=>{
                                return [
                                  <MainOrders key={a.orderID} dName= {a.orderID} note ={a.Note} transType={a.transportType} orderDetails={a}
                                                navigation={this.props.navigation}
                                  />
                                ]
                              })
                           }
                           </Card.Content>
                           <Card.Actions>
                          <Button title="Press me" style={{zIndex:9999}} onPress={()=>{
                             Alert.alert('Hello World')
                            }}> Press me</Button>
                        </Card.Actions>
                         </Card>
                    </ScrollView>
                    </View>
                </View>
        );
        }
    }
}

class MainOrders extends React.Component {
    constructor() {
        super();
      }
    render() {
      return (
        <View style={{marginTop:2,marginBottom:2}}>
          <Card theme={theme}>
                      <Card.Title title={this.props.dName} subtitle={this.props.note}  />
                      <Card.Content>
                      <Text>{this.props.transType}</Text>
                      </Card.Content>
                      <Card.Actions>
                          <Button title="view order" style={{zIndex:9999}} onPress={()=>{
                             this.props.navigation.navigate('orderDetails',{orderDetails: this.props.orderDetails})
                          }}> view order</Button>
                        </Card.Actions>
            </Card>      
        </View>
      );
    }
  }

I tried changing the execution orders, setting timeout and when I manually filled out the order array was that I realized that the problem is at that point, but I can't see what I'm doing wrong.

"react-native": "0.59.8"

Thanks.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>