We Keep Coding

Unable to Navigate across screens in React Native

I was trying to navigate cross different screens on button click in React Native. Following is the code:
App.tsx
import React from "react";
import { StyleSheet, View, Text} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Login from './src/screens/Login/login'
import SignUp from './src/screens/SignUp/signUp'
import { getItem } from './src/utility/AsyncStorage'
export default function App() {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
React.useEffect(() => {
getItem("gmailId").then((value:any) => {setGmailId(value)});
getItem("password").then((value:any) => {setPassword(value)});
}, []);
const RootStack = createNativeStackNavigator();
return (
<View style={styles.container}>
<NavigationContainer>
<RootStack.Navigator initialRouteName="Login">
<RootStack.Screen name="Login" component={Login} />
<RootStack.Screen name="signup" component={SignUp} />
</RootStack.Navigator>
</NavigationContainer>
{/* {(!gmailId && !password)? <Login/>: <Text>Logged In</Text>} */}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
login.tsx
import React from "react";
import { Text, View, Image, TextInput, TouchableOpacity} from 'react-native';
import { SocialIcon } from 'react-native-elements'
import { loginStyle } from './loginStyle'
import { signIn } from './loginLogic'
const Login = (navigation:any) => {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
const navigateToSignUp = () => {
navigation.navigate('signup')
};
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require( "../../../assets/icon.png")}
/>
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', marginTop: 30}}>
<TextInput
style={styles.input}
placeholder="Enter Gmail Id"
onChangeText={setGmailId}
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
placeholder="Enter your Password"
secureTextEntry={true}
/>
<TouchableOpacity
style={[styles.button, styles.loginButton]}
onPress={()=>signIn(gmailId, password)}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.signupButton]}
onPress={() => navigateToSignUp}>
<Text style={styles.text}>Create New Account</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', width: '95%', margin: 10, marginTop: 25}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 100, textAlign: 'center'}}>Social Login</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<SocialIcon
style={{width:"85%"}}
title='Sign In With Google'
button
type='google'
onPress={()=>{console.log('Sign In With Google')}}
/>
</View>
)
}
export default Login
//===================== STYLE SECTION =====================
const styles = loginStyle()
SignUp.tsx
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const SignUp = () => {
return (
<View>
<Text>signUp</Text>
</View>
)
}
export default SignUp
const styles = StyleSheet.create({})
My coding is not throwing any error yet none of the screens are visible (Not even the initialRoute). On running the code, it shows up a White page only.
Please help me rectify the issue.

import React from "react";
import { Text, View, Image, TextInput, TouchableOpacity} from 'react-native';
import { SocialIcon } from 'react-native-elements'
import { loginStyle } from './loginStyle'
import { signIn } from './loginLogic'
const Login = ({navigation:any}) => {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
const navigateToSignUp = () => {
navigation.navigate('signup')
};
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require( "../../../assets/icon.png")}
/>
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', marginTop: 30}}>
<TextInput
style={styles.input}
placeholder="Enter Gmail Id"
onChangeText={setGmailId}
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
placeholder="Enter your Password"
secureTextEntry={true}
/>
<TouchableOpacity
style={[styles.button, styles.loginButton]}
onPress={()=>signIn(gmailId, password)}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.signupButton]}
onPress={() => navigateToSignUp}>
<Text style={styles.text}>Create New Account</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', width: '95%', margin: 10, marginTop: 25}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 100, textAlign: 'center'}}>Social Login</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<SocialIcon
style={{width:"85%"}}
title='Sign In With Google'
button
type='google'
onPress={()=>{console.log('Sign In With Google')}}
/>
</View>
)
}
export default Login
please try it.
or
import React from "react";
import { Text, View, Image, TextInput, TouchableOpacity} from 'react-native';
import { SocialIcon } from 'react-native-elements'
import { loginStyle } from './loginStyle'
import { signIn } from './loginLogic'
const Login = (props:any) => {
const [gmailId, setGmailId] = React.useState("");
const [password, setPassword] = React.useState("");
const navigateToSignUp = () => {
props.navigation.navigate('signup')
};
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={require( "../../../assets/icon.png")}
/>
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', marginTop: 30}}>
<TextInput
style={styles.input}
placeholder="Enter Gmail Id"
onChangeText={setGmailId}
/>
<TextInput
style={styles.input}
onChangeText={setPassword}
placeholder="Enter your Password"
secureTextEntry={true}
/>
<TouchableOpacity
style={[styles.button, styles.loginButton]}
onPress={()=>signIn(gmailId, password)}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.signupButton]}
onPress={() => navigateToSignUp}>
<Text style={styles.text}>Create New Account</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', width: '95%', margin: 10, marginTop: 25}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 100, textAlign: 'center'}}>Social Login</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<SocialIcon
style={{width:"85%"}}
title='Sign In With Google'
button
type='google'
onPress={()=>{console.log('Sign In With Google')}}
/>
</View>
)
}
export default Login
this one surely help you
thanks

Keyboard disapears instanty after clicking on textinput react native

whenever i click on textinput , key board appears and disappears, i also tried on other android device as well
import React, { useState } from 'react';
import {SafeAreaView,Image,StyleSheet,FlatList,View,Text,Button,TextInput,StatusBar,ScrollView,TouchableOpacity,Dimensions,}
from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import ForgotScreen from './ForgotScreen';
const {width, height} = Dimensions.get('window');
const Login = ({navigation}) => {
const [email , setEmail]= useState('')
return (
<SafeAreaView style={{flex: 1 , backgroundColor:'white'}}>
<StatusBar backgroundColor={'white'} barStyle="dark-content" />
<View style={{flex:0.5 ,alignItems:'center', justifyContent:'center'}}>
<Text style={{fontWeight:'bold' , color:'black',fontSize:20 ,margin:50}}>Login</Text>
**<TextInput placeholder='Email' placeholderTextColor={'grey'} style={styles.input_text} value={email} onChangeText={setEmail}/>
<TextInput placeholder='Password' placeholderTextColor={'grey'} style={styles.input_text}/>**
<TouchableOpacity style={{justifyContent:'center' , width:'90%' }} onPress={() => navigation.navigate('ForgotScreen')}>
<Text style={{color:'#A2D5AB' , alignSelf:'flex-end',marginVertical:15 , justifyContent:'center'}}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn}>
<Text style={{color:'white'}} onPress={() => navigation.navigate('HomeScreen')}>Login</Text>
</TouchableOpacity>
</View>
<View style={{flex:0.5 ,alignItems:'center', justifyContent:'center'}}>
<TouchableOpacity>
<Text style={{color:'#A2D5AB' , alignSelf:'baseline' , justifyContent:'center' , marginTop:200}} onPress={() => navigation.navigate('SignUp')}>Sign up an account</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles=StyleSheet.create({
input_text:{
width:'90%',
height:50,
color:'black',
borderRadius:10,
borderBottomWidth:1,
borderColor:'grey',
},
btn: {
width:'90%',
shadowColor:"black",
shadowOpacity:0.8,
elevation:3,
shadowRadius:15,
height: 50,
marginHorizontal:10,
borderRadius: 5,
backgroundColor: 'gold',
justifyContent: 'center',
alignItems: 'center',
},
})
export default Login;

Return next page and close current page after loads in React Native

I'm newbie in React-native and I'm confused on how can I pass the parameter to another js file when returning a View, The second problem , The code I used below is when returning home the previous page(login) didn't close or gone and the home didn't view properly. I'm aware using react-nativigation but it's hard for me to implement but is there any other way to direct login when it loads? please need some help for this , here's my code,
Login.js After login from googlesignin when the state loaded it goes to another activity
import { Home } from "../screens"
render() {
return (
<View style={styles.container}>
<GoogleSigninButton
style={{ width: 222, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this.signIn}
/>
{this.state.loaded ?
<View style={{ width: 160, marginTop: 10 }}>
{renderLogin(this)} //return some value
</View>
: <Text>Not signIn</Text>}
</View>
);
}
}
function renderLogin(ts) {
return (
<Home /> // i want to pass value to home js example: 'ts.state.userGoogleInfo.user.photo'
)
}
Whole code in Login.js
import React, { Component } from 'react';
import { View, StyleSheet, ToastAndroid, Button, Text, Image } from "react-native";
import { Home } from "../screens"
import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from '#react-native-community/google-signin';
GoogleSignin.configure({
webClientId: '2622122222248-3v21124124124124.apps.googleusercontent.com',
offlineAccess: true, // if you want to access Google API on behalf
});
class Login extends Component {
constructor(props) {
super(props)
this.state = {
userGoogleInfo: {},
loaded: false
}
}
static navigationOptions = {
title: 'Login',
};
signIn = async () => {
try {
console.log("Processing");
await GoogleSignin.hasPlayServices();
const userInfo = await GoogleSignin.signIn();
this.setState({
userGoogleInfo: userInfo,
loaded: true
})
console.log(this.state.userGoogleInfo);
console.log(this.state.userGoogleInfo.user.name)
console.log(this.state.userGoogleInfo.user.email)
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
console.log("e 1");
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log("e 2");
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log("e 3");
} else {
console.log(error.message);
}
}
};
render() {
return (
<View style={styles.container}>
<GoogleSigninButton
style={{ width: 222, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={this.signIn}
/>
{this.state.loaded ?
<View style={{ width: 160, marginTop: 10 }}>
{renderLogin(this)}
</View>
: <Text>Not signIn</Text>}
</View>
);
}
}
function renderLogin(ts) {
return (
<Home />
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
padding: 15,
},
buttons: {
width: 20
}
});
export default Login;
Home.js
import React from 'react';
import {
StyleSheet,
View,
Text,
ScrollView,
FlatList,
TouchableOpacity,
Image,
ImageBackground,
LogBox
} from 'react-native';
import { PriceAlert, TransactionHistory } from "../components"
import { dummyData, COLORS, SIZES, FONTS, icons, images} from '../constants';
const Home = ({ navigation }) => {
const [trending, setTrending] = React.useState(dummyData.trendingCurrencies)
const [transactionHistory, setTransactionHistory] = React.useState(dummyData.transactionHistory)
function renderHeader(){
const renderItem = ({item, index}) =>(
<TouchableOpacity
style={{
width:155,
paddingVertical:SIZES.padding,
paddingHorizontal:SIZES.padding,
marginLeft: index == 0 ? SIZES.padding : 0,
marginRight: SIZES.radius,
borderRadius: 15,
backgroundColor: COLORS.white
}}
onPress={() => navigation.navigate("CryptoDetail", {currency:item})}
>
{/* Currency*/}
<View style={{ flexDirection:'row'}}>
<View>
<Image
source={item.image}
resizeMode="cover"
style={{
marginTop: 5,
width: 25,
height: 25
}}
/>
</View>
<View style={{marginLeft: SIZES.base}}>
<Text style={{...FONTS.h3}}>{item.currency}</Text>
<Text style={{ color:COLORS.gray, ...FONTS.body3 }}></Text>
</View>
</View>
{/* value*/}
{/* <View style={{ marginTop:SIZES.radius}}> */}
{/* <Text style={{...FONTS.h6}}>₱{item.amount}</Text> */}
{/* <Text style={{color: item.type =="I" ? COLORS.green : COLORS.red, ...FONTS.h5}}>₱{item.amount}</Text> */}
{/* </View> */}
</TouchableOpacity>
)
return(
<View
style={{
width: "100%",
height: 210,
...styles.shadow
}}
>
<ImageBackground
source={images.banner}
resizeMode="cover"
style={{
flex: 1,
alignItems:'center'
}}
>
{/* Header Bar */}
<View
style={{
marginTop:SIZES.padding *1,
width: "100%",
alignItems: "flex-end",
paddingHorizontal: SIZES.padding
}}
>
<TouchableOpacity
style={{
width: 20,
height: 20,
alignItems: "center",
justifyContent:"center"
}}
onPress={() => console.log("Notification on pressed")}
>
<Image
source={icons.notification_white}
resizeMode="contain"
style={{flex: 1}}
/>
</TouchableOpacity>
</View>
{/* Balance */}
<View
style={{
alignItems: 'center',
justifyContent:'center'
}}
>
<Text style={{ color: COLORS.white, ...FONTS.h3}}>Available Balance</Text>
<Text style={{ marginTop:SIZES.base, color:COLORS.white, ...FONTS.h2}}>₱{dummyData.portfolio.balance}</Text>
<Text style={{color:COLORS.white, ...FONTS.body5}}>{dummyData.portfolio.changes} Last 24 hours</Text>
</View>
{/* Trending */}
<View
style={{
position:'absolute',
bottom: "-30%"
}}
>
<Text style={{ marginLeft:SIZES.padding,
color: COLORS.white, ...FONTS.h3 }}>Dashboard</Text>
<FlatList
contentContainerStyle={{marginTop:SIZES.base}}
data={trending}
renderItem={renderItem}
keyExtractor={item => `${item.id}`}
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
</ImageBackground>
</View>
)
}
function renderAlert(){
return (
<PriceAlert/>
)
}
function renderNotice(){
return (
<View
style={{
marginTop:SIZES.padding-6,
marginHorizontal: SIZES.padding,
padding: 12,
borderRadius:SIZES.radius,
backgroundColor:COLORS.secondary,
...styles.shadow
}}
>
<Text style={{color:COLORS.white, ...FONTS.h4}}>Announcement:</Text>
<Text style={{marginTop:SIZES.base, color:COLORS.white, ...FONTS.body4, lineHeight:18}}>We offer you an application to guide and track your data.
Learn how to use this application by reading instructions and guide.
</Text>
<TouchableOpacity
style={{
marginTop:SIZES.base
}}
onPress={()=> console.log("Learn More")}
>
<Text style={{ textDecorationLine: 'underline',
color:COLORS.green, ...FONTS.h4}}>Learn more
</Text>
</TouchableOpacity>
</View>
)
}
function renderTransactionHistory(){
return (
<TransactionHistory
customContainerStyle={{ ...styles.shadow}}
history={transactionHistory}
/>
)
}
return (
<ScrollView>
<View style={{ flex:1, paddingBottom:130 }}>
{renderHeader()}
{renderAlert()}
{renderNotice()}
{renderTransactionHistory()}
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
shadow: {
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
}
})
export default Home;
Apps.js
import React from 'react';
import { Transaction, TevDetail, Login } from "./screens";
import { createStackNavigator } from "#react-navigation/stack";
import { NavigationContainer } from '#react-navigation/native';
import SplashScreen from 'react-native-splash-screen';
import Tabs from "./navigation/tabs";
const Stack = createStackNavigator();
const App = () => {
React.useEffect(() => {
SplashScreen.hide()
}, [])
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName={'Login'}
>
<Stack.Screen
name="Home"
component={Tabs}
/>
<Stack.Screen
name="TevDetail"
component={TevDetail}
/>
<Stack.Screen
name="Transaction"
component={Transaction}
/>
<Stack.Screen
name="Login"
component={Login}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App;

not able to map array value in react native

I am getting below value in the props "ticketDetailsInfo" and after that I am taking followupDetails array ,below is the value of followupDetails which is coming from server . ,but when amd doing maping followupDetails.map() its throwing error followupDetails.map() is not a function . While I have to take array value and display in ui . Please correct me where I am going wrong .
// Array Value is
const{ticketDetailsInfo}=this.props
const{troubleTicketDetails,workFlowDetails,followupDetails} =ticketDetailsInfo;
"followupDetails": [
{
"INCIDENTNUMBER": "16739",
"INCIDENTINITIATOR": "U",
"INCIDENTTIMESTAMP": "06/06/2019 16:25:36",
"NOTES": "Test",
"USERID": "597",
"STATUSUPDATED": null,
"USERGROUPNAME": "clmui",
"BINARYOBJECT": "N"
},
{
"INCIDENTNUMBER": "16738",
"INCIDENTINITIATOR": "E",
"INCIDENTTIMESTAMP": "06/06/2019 16:25:36",
"NOTES": "Test",
"USERID": "597",
"STATUSUPDATED": null,
"USERGROUPNAME": "clmui",
"BINARYOBJECT": "N"
}
],
import React, { Component } from 'react';
import { ImageBackground, ScrollView } from 'react-native';
import { Body, Button, Card, CardItem, Text, View } from 'native-base';
import styles from '../requestTab/TroubleTicketDetails.style';
import Header from '../../ui/header';
import BG from '../../../images/bg.jpg';
import { IconNormal } from '../../ui/icons';
import _ from 'lodash';
import { RegularText, SmallText } from '../../ui/text';
import StepIndicator from 'react-native-step-indicator';
import LoadingSpinner from '../../ui/spinner';
class TroubleTicketDetails extends Component {
constructor(props) {
super(props);
const {MSISDN,ticketDetailsInfo} = this.props;
this.state = {
title: 'Trouble Ticket',
icon: "sim",
mobile: MSISDN,
StepsVaue:[],
Steplabels:[],
currentStepPosition:[],
SteplabelconcatValue:[],
SteplabelsTimes:[]
};
}
iconSymbol = (priority) => {
let symbol = '';
let color = '';
if (priority === '10') {
symbol = 'exclamation';
color = 'red';
} else if (priority === '1') {
symbol = 'arrowdown';
color = 'white';
} else {
symbol = '';
color = '';
}
return { symbol: symbol, color: color };
};
componentDidMount() {}
componentDidUpdate(prevProps, prevState, snapshot) {}
componentDidCatch(error, errorInfo) {
console.log("TroubleTicketHistory Error", error);
console.log("TroubleTicketHistory ErrorInfo", errorInfo);
}
loadScreen() {
//RedirectScreen(this.props.navigation, 'SimSwap', this.state);
}
renderLabel = ({ position, stepStatus, SteplabelsTimes, currentPosition }=this.state) => {
return (
<Text
style={
position === currentPosition ? styles.stepLabelSelected : styles.stepLabel
}
>
{SteplabelsTimes}
</Text>
)
}
render() {
let { title, mobile, icon, currentStepPosition, Steplabels } = this.state;
let { navigation,ticketDetailsInfo,referenceNumber,TICKET_TYPE_DESCRIPTION,priority, currentStatus,convertedDate } = this.props;
const{troubleTicketDetails,workFlowDetails,followupDetails} =ticketDetailsInfo;
console.log("followupDetails" , followupDetails)
StepsVaue = workFlowDetails.currentNextActivity;
Steplabels = StepsVaue.map(StepsVaue => {
return StepsVaue._activityName;
});
SteplabelsTimes = StepsVaue.map(StepsVaue => {
return StepsVaue._maxHoldTime;
});
// SteplabelconcatValue = StepsVaue.map(StepsVaue => {
// return StepsVaue._activityName.concat("_",StepsVaue._maxHoldTime);
// });
currentStepPosition = StepsVaue.filter((item) => {
return item._activityStatus === "I"
});
const stepIndicatorStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize:40,
separatorStrokeWidth: 1,
currentStepStrokeWidth: 5,
stepStrokeCurrentColor: '#fe7013',
separatorFinishedColor: 'black',
separatorUnFinishedColor: 'black',
stepIndicatorFinishedColor: 'green',
stepIndicatorUnFinishedColor: '#aaaaaa',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 0,
currentStepIndicatorLabelFontSize: 0,
stepIndicatorLabelCurrentColor: '#000000',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
labelColor: 'black',
labelSize: 15,
currentStepLabelColor: 'black'
}
if(!_.isEmpty(referenceNumber) && (StepsVaue[0])) {
return (
<ImageBackground source={BG} style={styles.imgBG}>
<ScrollView>
<View style={styles.container}>
<View>
<Header title={title} subtitle={mobile} icon={icon} navigation={navigation}/>
</View>
<View style={styles.contentContainer}>
<View style={{ padding: 10 }}>
<View style={{marginBottom: 10}}>
<Card>
<CardItem header style={{backgroundColor: '#23476B', width: '100%', justifyContent: 'space-between'}}>
<View style={{flexDirection:'column'}}>
<View>
<RegularText text={`${TICKET_TYPE_DESCRIPTION} ID : ${referenceNumber}`} textColor='#fff' style={{ fontWeight: 'bold' }}/>
</View>
<View>
<SmallText text={`Raised ${convertedDate}`} textColor="#fff"/>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'row'}}>
<IconNormal icon={this.iconSymbol(priority).symbol} type="AntDesign" style={{ color: this.iconSymbol(priority).color , paddingTop: 5}}/>
</View>
{/* <IconNormal icon={this.iconSymbol(priority).symbol} type="AntDesign" style={{ color: this.iconSymbol(priority).color , paddingTop: 5}}/> */}
<View style={{backgroundColor:'orange', borderRadius:50,height: 28, paddingRight: 10, paddingLeft: 10, paddingTop: 5}}>
<SmallText text={`${currentStatus}`} textColor='white'/>
</View>
</View>
</CardItem>
<CardItem>
<Body>
<View style={{flexDirection:'row', justifyContent: 'space-between', width: '100%'}}>
{/* <View style={{flexDirection:'column'}}>
<View>
<SmallText text="Catagory" textColor="grey"/>
</View>
<View>
<Text style={{ fontWeight: 'bold', fontSize:14 }}>{troubleTicketDetails.cat1}</Text>
</View>
</View> */}
{troubleTicketDetails.cat2.length > 0 &&
<View style={{flexDirection:'column'}}>
<View>
<SmallText text="Sub-Category" textColor="grey"/>
</View>
<View>
<Text style={{ fontWeight: 'bold', fontSize:14 }}>{troubleTicketDetails.cat2}</Text>
</View>
</View>}
{troubleTicketDetails.cat3.length > 0 &&
<View style={{flexDirection:'column'}}>
<View>
<SmallText text="Sub-SubCategory" textColor="grey"/>
</View>
<View>
<Text style={{ fontWeight: 'bold', fontSize:14 }}>{troubleTicketDetails.cat3}</Text>
</View>
</View>}
</View>
</Body>
</CardItem>
</Card>
</View>
<View>
<RegularText text={`WORKFLOW`} textColor='grey' style={{ fontWeight: 'bold', textAlign:'center', marginBottom:10 }}/>
</View>
<View style={{borderWidth:1, borderColor:'lightgrey', borderBottomColor:'white', padding:10, flexDirection:'column'}}>
<Card>
<CardItem>
<Body style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={{flexDirection:'column'}}>
<RegularText text={` ${workFlowDetails.WRKFLW_DESC_V}`} textColor='green' style={{ fontWeight: 'bold' }}/>
</View>
<View style={{flexDirection:'column'}}>
<SmallText text={`Time Remaining is ${workFlowDetails.ESTIMATED_RESOLN_TM_N} Hours`} textColor='green' style={{ fontWeight: 'bold' }}/>
</View>
</Body>
</CardItem>
</Card>
</View>
<View style={{paddingLeft:10, height:300, marginBottom:10, borderWidth:1, borderColor:'lightgrey', borderTopColor:'white'}}>
<StepIndicator
customStyles={stepIndicatorStyles}
currentPosition={currentStepPosition.length}
stepCount={Steplabels.length}
labels={Steplabels}
renderLabel ={this.renderLabel()}
direction="vertical"
/>
</View>
<View>
<RegularText text={`NOTES`} textColor='grey' style={{ fontWeight: 'bold', textAlign:'center', marginBottom:10 }}/>
</View>
<View style={{marginLeft:10,marginRight:10}}>
{Array.isArray(followupDetails) && followupDetails.map(
({ INCIDENTINITIATOR, INCIDENTTIMESTAMP,NOTES, USERGROUPNAME}, index) => {
var INCIDENTINITIATOR_Value;
if(INCIDENTINITIATOR =="U"){
INCIDENTINITIATOR_Value ="USER";
}
else{
INCIDENTINITIATOR_Value ="CUSTOMER";
}
<View style={{marginBottom: 10}} key={index}>
<Card>
<CardItem header style={{backgroundColor: '#fff', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1}}>
<View style={{flexDirection:'column'}}>
<View style={{backgroundColor:'lightgrey', borderRadius:50,height: 28, paddingRight: 10, paddingLeft: 10, paddingTop: 5}}>
<SmallText text={`${INCIDENTINITIATOR_Value}`} textColor='grey'/>
</View>
<View>
<Text style={{ fontSize:14 }}> {NOTES} </Text>
</View>
</View>
</CardItem>
<CardItem>
<Body>
<View style={{flexDirection:'row', justifyContent: 'space-between', width: '100%'}}>
<View>
<SmallText text={`${USERGROUPNAME}`} textColor="grey"/>
</View>
<View>
<SmallText text={`${INCIDENTTIMESTAMP}`} textColor="grey"/>
</View>
</View>
</Body>
</CardItem>
</Card>
</View>
})
}
</View>}
{/* <Button block bordered dark>
<Text>Add a Note</Text>
</Button> */}
</View>
</View>
</View>
</ScrollView>
</ImageBackground>
);
}else{
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<LoadingSpinner color="#00678F"/>
</View>
)
}
}
}
/*<IconNormal icon={this.iconSymbol(priority).symbol} type="AntDesign" style={{ color: this.iconSymbol(priority).color , paddingTop: 5}}/> */
export default TroubleTicketDetails;
Thanks

Where to implement my function when using map for iteration?

To iterate and add views dynamically from array, I'm using following code.
export default class CreateFeedPost extends Component {
constructor(props) {
super(props);
this.state = {
selectedImages: ["1", "2", "3"]
};
}
render() {
let animation = {};
let color = Platform.OS === "android"
? styleUtils.androidSpinnerColor
: "gray";
return (
<View style={{ flex: 1, flexDirection: "column" }}>
<View style={styles.topView}>
<View style={styles.closeButtonView}>
<TouchableHighlight
underlayColor="transparent"
style={styles.closeButton}
onPress={this._closeButtonClicked.bind(this)}
>
<Icon name="times" color="#4A4A4A" size={20} />
</TouchableHighlight>
</View>
<View style={styles.postButtonView}>
<TouchableHighlight
underlayColor="transparent"
style={styles.postButton}
onPress={this._postButtonClicked.bind(this)}
>
<Text style={styles.postButtonText}>Post</Text>
</TouchableHighlight>
</View>
</View>
<View style={styles.profileContainer}>
<View style={{ width: 65, height: 65, padding: 10 }}>
<Image
source={{ uri: global.currentUser.USER_PROFILE_PIC }}
style={styles.profileImage}
/>
</View>
<View style={[styles.middleTextView]}>
<Text style={[styles.memberName]}>
{global.currentUser.USER_NAME}
</Text>
</View>
</View>
<Animated.ScrollView
style={{ flex: 1 }}
scrollEventThrottle={1}
showsVerticalScrollIndicator={false}
{...animation}
>
<View>
<TextInput
ref="postTextInputRef"
placeholder="So, What's up?"
multiline={true}
autoFocus={true}
returnKeyType="done"
blurOnSubmit={true}
style={styles.textInput}
onChangeText={text => this.setState({ text })}
value={this.state.text}
onSubmitEditing={event => {
if (event.nativeEvent.text) {
this._sendCommentToServer(event.nativeEvent.text);
this.refs.CommentTextInputRef.setNativeProps({ text: "" });
}
}}
/>
</View>
</Animated.ScrollView>
<KeyboardAvoidingView behavior="padding">
<ScrollView
ref={scrollView => {
this.scrollView = scrollView;
}}
style={styles.imagesScrollView}
horizontal={true}
directionalLockEnabled={false}
showsHorizontalScrollIndicator={false}
decelerationRate={0}
snapToInterval={100}
snapToAlignment={"start"}
contentInset={{
top: 0,
left: 0,
bottom: 0,
right: 0
}}
>
{this.state.selectedImages.map(function(name, index) {
return (
<View style={styles.imageTile} key={index}>
<View style={styles.imageView}>
<TouchableHighlight
underlayColor="transparent"
style={styles.imageRemoveButton}
onPress={() => this._imageRemoveButtonClicked.bind(this)}
>
<Icon name="times" color="#4A4A4A" size={20} />
</TouchableHighlight>
</View>
</View>
);
})}
</ScrollView>
<TouchableHighlight
underlayColor="transparent"
style={styles.cameraButton}
onPress={this._cameraButtonClicked.bind(this)}
>
<View style={styles.cameraButtonView}>
<Icon name="camera" color="#4A4A4A" size={20} />
<Text style={styles.cameraButtonText}>Add Pic</Text>
</View>
</TouchableHighlight>
</KeyboardAvoidingView>
</View>
);
}
_closeButtonClicked() {
this.props.navigator.pop();
}
_postButtonClicked() {}
_cameraButtonClicked() {
this.props.navigator.push({
title: "All Photos",
id: "photoBrowser",
params: {
limit: 3,
selectedImages: this.state.selectedImages
}
});
}
_imageRemoveButtonClicked() {
console.log("yes do it");
}
}
I'm loading code in the render method. If I write the function imageRemoveButtonClicked outside render method, it's giving an error saying that 'Cannot read property bind of undefined'. Don't know what to do. Can some one please help me in this.

Use arrow functions and class property feature. For more information about binding patterns read this article. Try to add your method as:
export class App extends Component {
yourMapFunction = () => {
yourCode...
}
}

I believe the problem is that you are not using an arrow function as the argument to this.state.selectedImages.map(). If you want to access this inside an inner function, you should use the arrow function syntax. The standard syntax does not capture this.
this.state.selectedImages.map((name, index) => {
return (...);
})