pankod / react-native-picker-modal-view

An unified React Native Picker Modal component for iOS and Android.
204 stars 55 forks source link

I have serious question for this!! #25

Closed TrustOne closed 5 years ago

TrustOne commented 5 years ago

I'm going to set items={data} which is not static.

I'm getting data from firebase as soon as stated.

The problem is, the data I made, was no problem.

but If I put as value not file, It doesn't work,

here is My full file

` import React, { Component, useState } from "react"; import { View, Text, StyleSheet, TouchableOpacity, FlatList,Button } from "react-native"; //import {TextInput, Button} from 'react-native-paper'; import { Icon, Container, Content } from "native-base"; import CardComponent from "../CardComponent"; import firebase from "react-native-firebase"; import PickerModal from 'react-native-picker-modal-view'; import data from '../TOP.json'

export default class HomeTab extends Component {
static navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
        <Icon name='ios-home' style={{ color: tintColor }} />
    )
}
constructor() {
    super();
    this.ref = firebase.firestore().collection("user_store");
    this.commonRef = firebase.firestore().collection('Farmers_Common').doc('P_Code');
    this.unsubscribe = null;

    this.state = {
    posts: [],
    loading: true,
    startat: 21180809185359,
    json_string : [],
    selectedItem : "",
    };
    // const [posts, setPosts] = useState([])
    // const [loading, setLoading] = useState(true)
}

componentDidMount() {

    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
    this.onCommonUpdate();
}

onCollectionUpdate = querySnapshot => {
    const posts = [];
    console.log(querySnapshot);
    querySnapshot.forEach(doc => {
    const { P_url, S_name, S_phone, S_product, S_rate, U_date } = doc.data();

    let Photourl = P_url+".jpg";
    const ref = firebase.storage().ref(Photourl);
    this.setState({
        startat: parseFloat(U_date) - 1 });

        ref.getDownloadURL().then(url => {
        let Product_Array = S_product.split(',');

            posts.push({
            key: doc.id, // Document ID
            doc, // DocumentSnapshot
            P_url : url,
            S_name,
            S_phone,
            S_product : Product_Array,
            S_rate,
            U_date
            });
            // posts.sort(function (a, b) {
            //     return a.U_date < b.U_date
            //         ? 1
            //         : -1;
            // });
            this.setState({posts});
        })

    });
    // this.setState({
    //   posts,
    //   loading: false
    // });
};

onCommonUpdate = async () => {
    console.log(190529);
    const BigCategory = [];
    this.commonRef.get().then(async function(doc) {
    if (doc.exists) {
        const Big_category = await doc.data().Big_category;
        console.log(Big_category);
        Big_category.forEach(async (each,index) => {
        await BigCategory.push ({
            Name : each,
            Value : each,
            Code : doc.id,
            Id : index,
        });
        console.log(index);
        console.log(BigCategory);
        const json_string = JSON.stringify(BigCategory);
        console.log(json_string);
        this.setState({json_string});
        })

    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
    })
}

onClosed()  {
        console.log('close key pressed');
    }

    onSelected(selected) {
        this.setState({ selectedItem: selected });

        return selected;
    }

    onBackButtonPressed() {
        console.log('back key pressed');
    }

render() {
    const { navigate } = this.props.navigation;
    return (
    <Container style={style.container}>
        <View style={style.Topbutton}>
        <PickerModal
                    renderSelectView={(disabled, selected, showModal) =>
                        <Button disabled={disabled} title={'Show me!'} onPress={showModal} />
                    }
                    onSelected={this.onSelected.bind(this)}
                    onClosed={this.onClosed.bind(this)}
                    onBackButtonPressed={this.onBackButtonPressed.bind(this)}
                    items={data}
                    sortingLanguage={'kr'}
                    showToTopButton={true}
                    selected={this.state.selectedItem}
                    autoGenerateAlphabeticalIndex={true}
                    selectPlaceholderText={'Choose one...'}
                    onEndReached={() => console.log('list ended...')}
                    searchPlaceholderText={'Search...'}
                    requireSelection={false}
                    autoSort={false}
                />

        </View>
        <View style = {style.centerflex}>
        <FlatList
        data={this.state.posts}
        renderItem={({ item }) => (
            <TouchableOpacity onPress={() => navigate('Detail')}>
            <CardComponent data={item} key={item.key} />
            </TouchableOpacity>
        )}
        />
        </View>
    </Container>
    );
}
}

const style = StyleSheet.create({
container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
},
Topbutton : {
    flex: 1,
    flexDirection: 'row',
    height:20,
},
centerflex : {
    flex: 11,
    flexDirection: 'row',
},
});

`

omeraplak commented 5 years ago

Hi @TrustOne , Thanks for reaching us. We’re gonna investigate it. And we’ll update it soon. Feel free to contact us if you need anything.

TrustOne commented 5 years ago

Hi @TrustOne , Thanks for reaching us. We’re gonna investigate it. And we’ll update it soon. Feel free to contact us if you need anything.

thanks for fastest reply, I'll wait and hava a nice coding today

omeraplak commented 5 years ago

Hi @TrustOne , Could you share your dynamic data structure?

TrustOne commented 5 years ago

Hi @TrustOne , Could you share your dynamic data structure?

Sure ^^ here is the Code, and plz look at the this.commonRef.get().then(async function(doc) code that is a web database promise function ` this.commonRef.get().then(async function(doc) { if (doc.exists) { const Big_category = await doc.data().Big_category; console.log(Big_category); Big_category.forEach(async (each,index) => { await BigCategory.push ({ Name : each, Value : each, Code : doc.id, Id : index, }); console.log(index); console.log(BigCategory); const json_string = JSON.stringify(BigCategory); console.log(json_string); this.setState({json_string}); })

}

`

omeraplak commented 5 years ago

Is Your PickerModal "data" property of "json_string"? If it's true, it's must be JSON object not a stringified. Additionaly, Could you share output of the this line "console.log(BigCategory);"?

TrustOne commented 5 years ago

Is Your PickerModal "data" property of "json_string"? If it's true, it's must be JSON object not a stringified. Additionaly, Could you share output of the this line "console.log(BigCategory);"?

Sorry, I tested yesterday, and that time I checked in many ways including JSON,Object style, but both never worked I remember. But I may be wrong, I'll check and tell you again. later.

But make sure what I told, Firebase get data from database in Google, dynamically. it hopefully work

omeraplak commented 5 years ago

Hi @TrustOne Since there’s no activity for a long time on this issue, i’m closing it. If the problem continues, do not hesitate to contact us.