how to pass the data in the api from render method

import React, { Component } from ‘react’;

import { ScrollView, StyleSheet, ActivityIndicator, TouchableHighlight, Text, View, Alert,Image, Platform , ViewPagerAndroid} from ‘react-native’;
import { withNavigation } from ‘react-navigation’;
import { TitleBar } from ‘react-native-awesome-viewpager’;
import ViewPager1 from ‘./ViewPager1’;

class ModernApp extends Component {

static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(‘otherParam’),
};
};

constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: null,
id:’’
}
}

componentDidMount() {

return fetch(‘http://www.handsinservices.com/bookrecce/Api_bookreccee/Property_data.php’,{
method: ‘POST’, // or ‘PUT’
body: JSON.stringify({
prop_id : data,

}), // data can be `string` or {object}!
headers:{
  'Content-Type': 'application/json',
  'accept':'application/json',
}

}).then((response) => response.json())
.then((responseJson) => {
if(responseJson.status === “false”){
this.setState({
isLoading: false,
dataSource: ‘’,

})
Alert.alert('fjgfdjgfdgjfd');
}
this.setState({
    isLoading: false,
    dataSource: responseJson.property_detail,

})
})
.catch((error) =>{
    console.log(error)

});

}

render() {
const { params } = this.props.navigation.state;
let otherParam = params ? params.otherParam :null;
let data = params ? params.data : null;
let id = this.setState.data;
console.log(id)
//console.log(this.setState.data);

//const { navigation } = this.props;
// const data = navigation.getParam(‘data’);
// const otherParam = navigation.getParam(‘otherParam’);
console.log(otherParam);
console.log(data);
// console.log(otherParam);

if(this.state.isLoading){
return (
<View style={{flex: 1}}>


);
}else{

let property_detail = this.state.dataSource.map((val,key) =>{

   return<View style={{flex:1}}>
   <ScrollView showsVerticalScrollIndicator={false} style={{flex:1, display:'flex'}}> 
   <View style={{flex:1,backgroundColor:'white'}}>
         {/* <View style={styles.MainContainer} >
         <Image source = {{ uri: this.state.data }} style={styles.imageViewContainer1} />
         </View> */}
         {/* <View style={{flexDirection:'row'}}>
         <Image source = {{ uri: val.Related_images.image }} style={styles.imageViewContainer} />
         <Image source = {{ uri: val.Related_images.image }} style={styles.imageViewContainer} />
         </View> */}
         <View style={{flexDirection:'row', justifyContent:'space-around'}} >
         <View style={{paddingRight:20}}>
         <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]}>
            <Text style={{fontWeight:"bold", fontSize:20, color:'white'}}>SCOUT</Text>
        </TouchableHighlight>
        </View>
        <View style={{borderColor:"#2294a3"}}>
        <TouchableHighlight style={[styles.buttonContainer1, styles.signupButton1]}>
            <Text style={{fontWeight:"bold", fontSize:20, color:'#2294a3'}}>BOOK</Text>
        </TouchableHighlight>
        </View>
        </View>
         <View style={styles.detailscomponent}>
         <Text style={styles.textViewContainer}>{ val.property_name}</Text>
         <Text style={styles.textView1Container}>{val.About_Location}</Text>
         <Text style={styles.textView2Container}>{val.Type}</Text>
         </View> 
   </View>

  
   </ScrollView>
   </View>
   });

return (
<ScrollView style={{backgroundColor:“white”, flex:1}} showsVerticalScrollIndicator={false}>
{/* <Image source = {{ uri:val.property_image }} style={styles.imageViewContainer1} /> /}
{data}
{/
<View style={{flex:1, backgroundColor:‘white’}}>
{property_detail}
*/}
<View style={{flexDirection:‘row’, justifyContent:‘space-around’}} >

<TouchableHighlight style={[styles.buttonContainer, styles.signupButton]}>
<Text style={{fontWeight:“bold”, fontSize:20, color:‘white’}}>SCOUT


<View style={{borderColor:"#2294a3"}}>
<TouchableHighlight style={[styles.buttonContainer1, styles.signupButton1]}>
<Text style={{fontWeight:“bold”, fontSize:20, color:’#2294a3’}}>BOOK



<TitleBar
style={styles.container}
titles={[‘Page 1’, ‘Page 2’, ‘Page 3’]}>

{property_detail}


Page 2dgfthjnhjghjnmghjghjhjhjfhjfh


Page 3



);
}
}
}

const styles = StyleSheet.create({

container: {
flex:1,
display: ‘flex’,
backgroundColor: ‘white’,
flexDirection: ‘row’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},

MainContainer :{

// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS === ‘ios’) ? 0 : 0,

},

imageViewContainer1: {
width: ‘100%’,
height: 250 ,
borderRadius : 5,
paddingBottom:10

},
imageViewContainer: {
width: ‘100%’,
height: 100 ,
margin: 10,
borderRadius : 5,
paddingBottom:10

},

textViewContainer: {

textAlignVertical:‘center’,
width:‘100%’,
fontSize:25,
fontWeight:‘bold’,
paddingTop:20,
paddingRight:25,
paddingLeft:20,

},
textView1Container: {

textAlignVertical:‘center’,
width:‘100%’,
fontSize:20,
paddingTop:5,
paddingLeft:20,
paddingRight:20

},
textView2Container: {

textAlignVertical:‘center’,
width:‘100%’,
color:‘grey’,
fontSize:20,
paddingTop:5,
paddingLeft:20,
paddingRight:20

},
detailscomponent:{
backgroundColor:‘white’,
},
buttonContainer: {
height:55,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
marginBottom:30,
marginLeft:30,
width:172,
borderRadius:2,
shadowOffset: { width: 1, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 2,
shadowColor:‘lightgrey’,
},
buttonContainer1: {
height:55,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
marginBottom:30,
marginRight:30,
marginLeft:30,
width:172,
borderColor:"#2294a3",
borderRadius:2,
borderWidth: 3,
borderRadius: 5,
},
signupButton: {
backgroundColor: “#2294a3”,
},
signupButton1: {
backgroundColor: “white”,
},

containerT: {
flex: 1,
backgroundColor: ‘white’,
flexDirection: ‘column’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},
viewPager: {
flex: 1,
flexDirection: ‘column’,
},
pageStyle: {
alignItems: ‘center’,
padding: 20,
flex:1
}

});

export default ModernApp ;

Hey @aman123,

This is extremely hard to read/follow. Can you you create a Snack with only the minimal and relevant code to what you demonstrate what you are trying to achieve?

Cheers,

Adam

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.