I added a couple of header right buttons, but when I click them, I get the following error:
TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')
This is the code for the header, and it has the header right buttons:
<Stack.Screen
name="Tabs"
component={Tabs}
options = {{
title: " ",
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 24,
color: '#FFFFFF'
},
headerStyle: {
backgroundColor: '#121212',
shadowColor: 'transparent'
},
headerRight: () => (
<View style={{flexDirection: "row"}}>
<TouchableOpacity
style={{paddingRight: 20}}
onPress={() => this.props.navigation.navigate('Search')}>
<Ionicons name="ios-search" size={25} color="white" />
</TouchableOpacity>
<TouchableOpacity
style={{paddingRight: 20}}
onPress={() => this.props.navigation.navigate('Notifications')}>
<Ionicons name="md-notifications" size={25} color="white" />
</TouchableOpacity>
</View>
),
}}/>
How can I access navigation in the header?
EDIT: Followed the docs and changed it to this:
<Stack.Screen
name="Tabs"
component={Tabs}
options = {( navigation ) => ({
title: " ",
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 24,
color: '#FFFFFF'
},
headerStyle: {
backgroundColor: '#121212',
shadowColor: 'transparent'
},
headerRight: () => (
<View style={{flexDirection: "row"}}>
<TouchableOpacity
style={{paddingRight: 20}}
onPress={() => navigation.navigate('Search')}>
<Ionicons name="ios-search" size={25} color="white" />
</TouchableOpacity>
<TouchableOpacity
style={{paddingRight: 20}}
onPress={() => navigation.navigate('Notifications')}>
<Ionicons name="md-notifications" size={25} color="white" />
</TouchableOpacity>
</View>
),
})}/>
But now getting this error:
TypeError: navigation.navigate is not a function. (In 'navigation.navigate('Search')', 'navigation.navigate' is undefined)
How can I access navigation in the header?
You can define options as a function that takes the navigation object as an argument:
options={({ navigation }) => ({
title: " ",
headerTitleStyle: { ... }
})}
Here is a simplified working example.
Other use cases can be found in react-navigation documentation.
Related
i am trying to use Keyboard.dismiss() inside of a TouchableWithoutFeedback element and for some reason, no matter where i place this TouchableWithoutFeedback element, the keyboard doesn't dismiss when tapping on areas outside the TextInput,
but it does dismiss when tapping the keyboard itself!
why does this happen and how do i fix it?
p.s. it worked fine on a different project
Message for Stack Overflow staff: many of my threads are being locked for "not being clear" even though i am being very thorough in each and every one of them
DO NOT LOCK THIS THREAD
the code:
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss()}>
<View style={styles.mainView}>
<View style={styles.topSearchView}>
<Image source={require("../../assets/NewSearchIcon.png")} style={styles.searchIcon} />
<TextInput
placeholder="Search for food you like..."
onChangeText={searchedCoursesHandler}
value={searchedCourses}
onFocus={() => { setInputBorderOnFocus(true) }}
style={{
borderColor: inputBorderOnFocus === true ? "#428463" : "grey",
borderWidth: 2,
width: 260,
height: 50,
marginLeft: 10,
fontSize: 18,
padding: 5,
borderRadius: 8,
fontSize: 16
}}
/>
<TouchableOpacity
onPress={() => { setSearchedCourses("") }}
style={styles.deleteInputTouchable}
>
<Image source={require("../../assets/newXicon.png")} style={styles.xButtonIcon} />
</TouchableOpacity>
</View>
<View style={styles.flatListView}>
<FlatList
data={searchedCourses}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => {
navigation.navigate('item profile', {
item: item,
});
}}
>
<View style={styles.flatListItemView}>
<Image source={{ uri: item.img }} style={styles.flatListImg} />
<Text>{item.name}</Text>
<Text>{item.price}$</Text>
</View>
</TouchableOpacity>
)}
horizontal={true}
/>
</View>
{
searchedCourses.length < 1 &&
<Image source={require("../../assets/NewPastaImage.png")} style={styles.pastaIcon} />
}
</View>
</TouchableWithoutFeedback>
);
enter code here
Change This <TouchableWithoutFeedback onPress={Keyboard.dismiss()}>
into this
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
I have "ProfileScreen" declared in the App.js
function App({ navigation }) {
return (
<>
<StatusBar hidden />
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
...
component={HomeScreen}
...
/>
<Stack.Screen
...
component={FeedScreen}
...
/>
<Stack.Screen
...
component={ProfileScreen}
...
/>
</Stack.Navigator>
</NavigationContainer>
</>
);
}
I access ProfileScreen inside FeedScreen.js
export const ProfileScreen = () => {
return(
<Text style={{ textAlign: "left", color: "black", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}>
Hello
</Text>
);
}
Inside FeedScreen.js I want to navigate to ProfileScreen:
const Item = ({ item }, { navigation }) => {
return (
<>
<TouchableOpacity onPress={() => navigation.navigate("ProfileScreen")}>
<Text style={{ textAlign: "left", color: "white", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}>
<Image
style={{ alignSelf: "center", borderRadius: 50 }}
source={{ uri: item.profile_picture, width: 48, height: 48 }}
/>
{item.username}
</Text>
</TouchableOpacity>
</>
);
};
Unfortunately, everything returns Undefined is not an object (evaluating 'navigation.navigate')
For an easy solution use the hook useNavigation inside your Item component as a following:
import { useNavigation } from '#react-navigation/native';
const Item = ({item}) => {
const navigation = useNavigation();
return (
<TouchableOpacity onPress={() => navigation.navigate('ProfileScreen')}>
<Text
style={{
textAlign: 'left',
color: 'white',
fontSize: 24,
fontFamily: 'Montserrat_100Thin_Italic',
}}>
<Image
style={{alignSelf: 'center', borderRadius: 50}}
source={{uri: item.profile_picture, width: 48, height: 48}}
/>
{item.username}
</Text>
</TouchableOpacity>
);
};
Your syntax was wrong for using navigation prop inside FeedScreen
It should be like this
const Item = ({ item , navigation }) => {
I'm struggling with a navigation problem in React Navigation 5.x I have the following project structure, where (1) is a Stack Navigator, (2, 3 and 4) are different stacks nested in (1).
What I want to achieve: I want (1) header buttons to: go back a screen and go back to home.
(1):
<NavigationContainer>
<Stack.Navigator screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS, gestureDirection: 'vertical'}} >
<Stack.Screen
name='Home'
component={Pages.Home}
options={({navigation}: any) => ({
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.navigate('Menu')}>
<Icon name='menu' size={Mixins.scaleHeight(25)} color={Colors.WHITE} style={{marginLeft: 20}}/>
</TouchableOpacity>,
headerRight: props => <Icon name='bell' size={Mixins.scaleHeight(20)} color={Colors.WHITE} style={{marginRight: 20}}/>,
headerTitle: '',
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
})}
/>
<Stack.Screen
name='Menu'
component={Pages.Menu}
options={({navigation}: any) => ({
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerRight: () =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(25)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
headerTitle: '',
headerLeft: () => <></>,
})}
/>
<Stack.Screen
name='Stack2'
component={Stack2}
options={({route, navigation}: any) =>( {
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerBackTitle: ' ',
headerTitle: '',
headerBackTitleStyle: {color: '#fff'},
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.goBack()}>
<HeaderBackImage textRegular='Stack' textBold='2'/>
</TouchableOpacity>,
headerRight: props =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
})}
/>
<Stack.Screen
name='Stack3'
component={Stack3}
options={({route, navigation}: any) =>( {
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerBackTitle: ' ',
headerTitle: '',
headerBackTitleStyle: {color: '#fff'},
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.goBack()}>
<HeaderBackImage textRegular='Stack' textBold='3'/>
</TouchableOpacity>,
headerRight: props =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
})}
/>
<Stack.Screen
name='Stack4'
component={Stack4}
options={({route, navigation}: any) =>( {
headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
headerBackTitle: ' ',
headerTitle: '',
headerBackTitleStyle: {color: '#fff'},
headerLeft: () =>
<TouchableOpacity onPress={() => navigation.goBack()}>
<HeaderBackImage textRegular='Stack' textBold='4'/>
</TouchableOpacity>,
headerRight: props =>
<TouchableOpacity onPress={() => navigation.popToTop()}>
<Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
</TouchableOpacity>,
})}
/>
</Stack.Navigator>
</NavigationContainer>
(2):
const Stack2 = () => (
<Stack.Navigator screenOptions={{gestureDirection: 'horizontal'}}>
<Stack.Screen
name='ScreenA'
component={Pages.ScreenA}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ScreenB'
component={Pages.ScreenB}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ScreenC'
component={Pages.ScreenC}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ScreenD'
component={Pages.ScreenD}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>);
Problem: The (1) header navigation.goBack() won't go back a single screen on (2, 3 or 4) stack, it's going back from (2, 3 or 4) to (1) directly.
Is there a way to access (2, 3 or 4) navigation props from (1) header?
Try putting the back buttons in the screens of stacks 2,3,4.
I saw some questions about it here on SO, but none of them work for me.
So my problem is when I click on the button "Add Friend" all of the buttons change to "remove", and I want to change only the button that I click
Normal
When I click in any button, all of them change to "remove"
My Code is:
export default class Friends extends Component {
state = {
visible: false,
userInfo: null,
requested: null
}
buttonAdd() {
if (this.state.requested === null) {
return (
<View style={styles.buttonContainer}>
<TouchableOpacity style={[styles.button, styles.add]} onPress={() => this.setState({ requested: true })}>
<Text style={{ color: "#fff", fontWeight: "bold" }}>Add Friend</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.remove]}>
<Text style={{ color: "#050505", fontWeight: "bold" }}>Remove</Text>
</TouchableOpacity>
</View>
)
} else if (this.state.requested === true) {
return (
<View style={styles.buttonContainer}>
<TouchableOpacity style={[styles.button, styles.remove, styles.removeBig]} onPress={() => this.setState({ requested: false })} >
<Text style={{ color: "#050505", fontWeight: "bold" }}>Remove</Text>
</TouchableOpacity>
</View>
)
} else {
return (
<View style={styles.buttonContainer}>
<TouchableOpacity style={[styles.button, styles.add]} onPress={() => this.setState({ requested: true })}>
<Text style={{ color: "#fff", fontWeight: "bold" }}>Add Friend</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.remove]}>
<Text style={{ color: "#050505", fontWeight: "bold" }}>Remove</Text>
</TouchableOpacity>
</View>
)
}
}
render() {
const inform = this.props.info
return (
<View>
<FlatList
data={inform}
keyExtractor={item => item.id.toString()}
ListHeaderComponent={this.topComponents()} //ignore this //with the ListHeaderComponent the components will not repeat
renderItem={({ item }) => (
<View style={styles.peopleContainer}>
<TouchableOpacity onPress={() => this.setState({ visible: true, userInfo: item })}> <Image source={item.photo} style={styles.photo} />
</TouchableOpacity>
<View style={styles.geralContent}>
<Text style={styles.name}>{item.name}</Text>
{this.buttonAdd()}
</View>
</View>
)}
/>
</View>
);
}
}
Sorry about the huge code.
There may be several approaches to handle this. This is just my approach to handle this specific issue.
Currently, all of the items sharing the same state. That means if any of the items update the component state, it will affect all the items of the FlatList. To overcome this problem we need to refactor the code so every item has its own state. Here is a snippet of how to do that and fix the problem
const FriendItem = ({ item, onPressPhoto }) => {
const [requested, setRequested] = React.useState(false)
return (
<View style={styles.peopleContainer}>
<TouchableOpacity onPress={() => onPressPhoto({ visible: true, userInfo: item })}>
<Image source={item.photo} style={styles.photo} />
</TouchableOpacity>
<View style={styles.geralContent}>
<Text style={styles.name}>{item.name}</Text>
<View style={styles.buttonContainer}>
{!requested ?
<TouchableOpacity style={[styles.button, styles.add]} onPress={() => setRequested(true)}>
<Text style={{ color: "#fff", fontWeight: "bold" }}>Add Friend</Text>
</TouchableOpacity>
:
null
}
<TouchableOpacity style={[styles.button, styles.remove]}>
<Text style={{ color: "#050505", fontWeight: "bold" }}>Remove</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
export default class Friends extends Component {
state = {
visible: false,
userInfo: null,
}
onPressPhoto = ({ visible, userInfo }) => {
//write your logic here to handle on click
}
render() {
const inform = this.props.info
return (
<View>
<FlatList
data={inform}
keyExtractor={item => item.id.toString()}
ListHeaderComponent={this.topComponents()} //ignore this //with the ListHeaderComponent the components will not repeat
renderItem={({ item }) => <FriendItem item={item} onPressPhoto={this.onPressPhoto} />}
/>
</View>
);
}
}
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