Why ListItem content not showing anything - react-native

import {Avatar, ListItem} from 'react-native-elements';
<View style={{flex: 3}}>
<ListItem
key="live-jobs"
title="Live Jobs"
textStyle={{color: 'orange'}}
leftIcon={
<Icon name="access-point" size={25} style={{color: '#4BC6FF'}} />
}
onPress={() =>
this.checkPermissions(LIVE_JOB_END_POINT, 'liveJobs')
}
/>
<Text>Hiiii</Text>
<ListItem
key="notifications"
title="Notifications"
leftIcon={
<Icon name="bell-ring" size={25} style={{color: '#4BC6FF'}} />
}
onPress={() => Actions.userManagement()}
/>
</View>
My React-native version is 0.64.2 ,React native elements version 3.4.2 Why does the content inside the ListItem Not display anything?


<ListItem key="live-jobs" bottomDivider>
<Avatar source={{uri: l.avatar_url}} />
<ListItem.Content>
<ListItem.Title>Live Jobs</ListItem.Title>
<ListItem.Subtitle>Subtitle</ListItem.Subtitle>
</ListItem.Content>
</ListItem>

Related

React native elements Overlay not opening in iOS

Hi I am trying to open an overlay by clicking on a touchable inside another overlay. While it works perfectly in android it is not working in iOS. When I try and open the same overlay from a touchable on my screen it works again.Has anyone come across something like this? Thanks in advance
Code
<Overlay isVisible={clientdeetsoverlay} overlayStyle={{height:'100%'}} fullScreen={true} animationType="slide">
<SafeAreaView>
<TO style={{alignSelf:'flex-end'}} onPress={()=>{setClientdeetsoverlay(false)}}>
<Icon name="times" color="#140F79" size={50} />
</TO>
{
isclientdeetloading?
<View>
<ActivityIndicator size="large" color="red" />
</View>
:
<Address ValidateDetails={ConfirmDetails.bind(this)} editClientData={editClientData.bind(this)} clientdata={clientdata} />
}
</SafeAreaView>
</Overlay>
<Overlay animationType="slide" isVisible={addressoverlay} overlayStyle={{height:'50%',width:'90%',borderRadius:20,padding:20}} onBackdropPress={toggleOverlay}>
{
!addressesloading?
<View>
<Text style={{fontSize:20,fontFamily:'Montserrat-Bold'}}>
Select or add an address
</Text>
<ScrollView horizontal={true} contentContainerStyle={{flexGrow:1,marginTop:20,alignItems: 'center',justifyContent: 'center',alignSelf:'center'}}>
<TouchableWithoutFeedback key="new" onPress={()=>{ValidateDetails("New")}}>
<View style={{margin:10,height:200,width:200,borderWidth:1,borderColor:'black',borderRadius:1,borderStyle:'dotted',alignItems:'center',justifyContent: 'space-evenly',}}>
<Image source={require("../Assets/mail.jpg")} style={{height:150,width:150,resizeMode:'contain'}} />
<Text style={{fontSize:15,fontFamily:'Montserrat-Regular'}}>Add new address</Text>
</View>
</TouchableWithoutFeedback>
{
addresses.map((item)=>{
return(
<TouchableWithoutFeedback key={item.id} onPress={()=>{selectaddress(item)}}>
<View style={selectedaddress.id==item.id?styles.selectedAddressStyle:styles.notselectedaddress}>
{
selectedaddress.id==item.id?
<Icon name="check-square" color="#4B53F2" size={30} style={{position:'absolute',right:1}} />
:
null
}
<Text style={{flex:1,fontFamily:'Montserrat-Bold'}}>Address {item.index}</Text>
<Text style={{flex:3,fontFamily:'Montserrat-Regular'}}>{item.data.add}</Text>
<Text style={{flex:1,fontFamily:'Montserrat-Regular'}}>Phone : {item.data.Phone}</Text>
<View style={{flex:1,alignItems:'flex-start',justifyContent:'space-between',flexDirection:'row',width:'100%'}}>
<TO style={styles.controlbuttonContainerStyle} onPress={()=>ValidateDetails(item.id)}>
<Icon name="edit" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Edit</Text>
</TO>
<TO onPress={()=>{removeAddress(item.id)}} style={styles.controlbuttonContainerStyle}>
<Icon name="trash-alt" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Remove</Text>
</TO>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
</ScrollView>
<TO onPress={()=>{PlaceOrder()}} style={{alignItems: 'center',justifyContent: 'center',width:'80%',height:40,backgroundColor:'#4B53F2',marginVertical:10,alignSelf:'center'}}>
<Text style={{color:'white',fontFamily:'Montserrat-Bold',fontSize:15}}>Place Order</Text>
</TO>
</View>
:
<View style={{flex:1,backgroundColor:'white',alignItems: 'center',justifyContent: 'center',}}>
<ActivityIndicator size={15} color="red" />
</View>
}
</Overlay>

Multiple Overlays not working in react native iOS

I am using multiple overlays in my react native component. It is working great in android but in iOS my second overlay doesn't open when it is under my first overlay. When I move my second overlay over my first overlay my second overlay opens but first doesn't. How can I make it so that my second overlay opens irrespective of the first overlay? I am facing this issue only in iOS.
<Overlay isVisible={clientdeetsoverlay} overlayStyle={{height:'100%'}} fullScreen={true} animationType="slide">
<SafeAreaView>
<TO style={{alignSelf:'flex-end'}} onPress={()=>{setClientdeetsoverlay(false)}}>
<Icon name="times" color="#140F79" size={50} />
</TO>
{
isclientdeetloading?
<View>
<ActivityIndicator size="large" color="red" />
</View>
:
<Address ValidateDetails={ConfirmDetails.bind(this)} editClientData={editClientData.bind(this)} clientdata={clientdata} />
}
</SafeAreaView>
</Overlay>
<Overlay animationType="slide" isVisible={addressoverlay} overlayStyle={{height:'50%',width:'90%',borderRadius:20,padding:20}} onBackdropPress={toggleOverlay}>
{
!addressesloading?
<View>
<Text style={{fontSize:20,fontFamily:'Montserrat-Bold'}}>
Select or add an address
</Text>
<ScrollView horizontal={true} contentContainerStyle={{flexGrow:1,marginTop:20,alignItems: 'center',justifyContent: 'center',alignSelf:'center'}}>
<TouchableWithoutFeedback key="new" onPress={()=>{ValidateDetails("New")}}>
<View style={{margin:10,height:200,width:200,borderWidth:1,borderColor:'black',borderRadius:1,borderStyle:'dotted',alignItems:'center',justifyContent: 'space-evenly',}}>
<Image source={require("../Assets/mail.jpg")} style={{height:150,width:150,resizeMode:'contain'}} />
<Text style={{fontSize:15,fontFamily:'Montserrat-Regular'}}>Add new address</Text>
</View>
</TouchableWithoutFeedback>
{
addresses.map((item)=>{
return(
<TouchableWithoutFeedback key={item.id} onPress={()=>{selectaddress(item)}}>
<View style={selectedaddress.id==item.id?styles.selectedAddressStyle:styles.notselectedaddress}>
{
selectedaddress.id==item.id?
<Icon name="check-square" color="#4B53F2" size={30} style={{position:'absolute',right:1}} />
:
null
}
<Text style={{flex:1,fontFamily:'Montserrat-Bold'}}>Address {item.index}</Text>
<Text style={{flex:3,fontFamily:'Montserrat-Regular'}}>{item.data.add}</Text>
<Text style={{flex:1,fontFamily:'Montserrat-Regular'}}>Phone : {item.data.Phone}</Text>
<View style={{flex:1,alignItems:'flex-start',justifyContent:'space-between',flexDirection:'row',width:'100%'}}>
<TO style={styles.controlbuttonContainerStyle} onPress={()=>ValidateDetails(item.id)}>
<Icon name="edit" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Edit</Text>
</TO>
<TO onPress={()=>{removeAddress(item.id)}} style={styles.controlbuttonContainerStyle}>
<Icon name="trash-alt" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Remove</Text>
</TO>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
</ScrollView>
<TO onPress={()=>{PlaceOrder()}} style={{alignItems: 'center',justifyContent: 'center',width:'80%',height:40,backgroundColor:'#4B53F2',marginVertical:10,alignSelf:'center'}}>
<Text style={{color:'white',fontFamily:'Montserrat-Bold',fontSize:15}}>Place Order</Text>
</TO>
</View>
:
<View style={{flex:1,backgroundColor:'white',alignItems: 'center',justifyContent: 'center',}}>
<ActivityIndicator size={15} color="red" />
</View>
}
</Overlay>

The easiest way to do it is to nest them. Then it should work properly, just don't close the first one just open the second one above it.
<Overlay isVisible={open} overlayStyle={{height:'50%'}}>
<SafeAreaView>
</SafeAreaView>
//second overlay inside the first one
<Overlay isVisible={open1} overlayStyle={{height:'60%'}}>
<SafeAreaView>
</SafeAreaView>
</Overlay>
</Overlay>

Sub menu in drawer - React Native

Hi I am new to React native. I have developed all the screens along with navigations. In Drawer, i have a menu named Reports. If i click that, i want to show 2 sub menus, Old Report and New Report. I have customised the drawer menu for styling.
My React native version is 0.62.
I am using React Navigation(https://reactnavigation.org/) library for navigation.
Below is the attachment of my drawer menu screenshot. Kindly share you ideas.
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<View style={{flexDirection:'row'}}>
<Avatar.Image
source={require('../Assets/user.png')}
/>
<View style={{marginHorizontal:10, justifyContent:'center', width:'70%'}}>
<Text style={{color:'gray'}}>k******#gmail.com</Text>
</View>
</View>
</View>
<View style={{alignItems:'center', marginVertical:15}}>
<View
style={{borderBottomColor:'gray',borderWidth:0.5, width:'90%'}}
/>
</View>
<View>
<DrawerItem
icon={({color, size}) => (
<Icon
name="md-home"
size={size}
color={Colors.primary}
/>
)}
label="Home"
onPress={() => props.navigation.navigate('Home')}
/>
<DrawerItem
icon={({color, size}) => (
<Icon
name='ios-document'
size={size}
color={Colors.primary}
/>
)}
label='Report'
onPress={() => props.navigation.navigate('Report')}
/>
<DrawerItem
icon={({color, size}) => (
<Icon
name="ios-notifications"
size={size}
color={Colors.primary}
/>
)}
label='Notifications'
onPress={() => props.navigation.navigate('Notification')}
/>
</View>
</View>
</DrawerContentScrollView>
<Drawer.Section>
<DrawerItem
icon={({color, size}) => (
<Icon
name="ios-exit"
color="red"
size={size}
/>
)}
label="SignOut"
onPress={ () => signOut()}
/>
</Drawer.Section>
</View>

TextInput is not responding when I use TouchableWithoutFeedback in React Native

When I remove TouchableWithoutFeedback then Input text is responding otherwise not.
I tried lots but I am not getting any solution there.
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.screen}>
<Text style={styles.title}>The a New Game !</Text>
<Card style={styles.inputContainer}>
<Text>Select a Number</Text>
<Input
style={styles.input}
blurOnSubmit
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
maxLength={2}
onChange={numberInputHandler}
value={enteredValue}
/>
<View style={styles.buttonContainer}>
<View>
<Button style={styles.button} title="Reset" onPress={() => {}} color={Color.accent} />
</View>
<View>
<Button
style={styles.button}
title="Confirm"
onPress={() => {}}
color={Color.primary}
/>
</View>
</View>
</Card>
</View>
</TouchableWithoutFeedback>
);
};

Try using zIndex( style={{zIndex: 20}} ) on both TextInput and TouchableWithoutFeedback, and make sure you give a greater value to the TextInput.

How to use static navigationOptions with functional component?

How I can use something like this:
/* Imports */
import React from 'react';
import { TouchableOpacity, StatusBar, View, Text, Linking } from 'react-native';
import { Container, Header, Left, Body, Title, Button, List, ListItem, Content } from 'native-base';
import { AntDesign, MaterialCommunityIcons, Entypo, MaterialIcons, FontAwesome } from '#app/utils/Icons';
import { custom, responsive } from '#app/styles/config';
import { withTheme} from '../../theme/themeProvider';
import { styles } from '../../theme/theme';
/* /Imports/ */
class SettingsView extends React.Component {
/* Navigation Options Like (Header, Title, Menu, Icon, Style) */
static navigationOptions = ({ navigation }) => ({
title: "Настройки",
drawerIcon: ({ tintColor }) => (
<MaterialCommunityIcons name="settings" style={custom.drawerMenuIcon}/>
)
});
/* /Navigation Options Like (Header, Title, Menu, Icon, Style)/ */
For now when I export default SettingsView withTheme method static navigatioOptions don't show they don't work. Is it bug or something like that can u help me? I will be very thankful if u help me!
/* Render Method - Is Place Where You Can View All Content Of The Page */
render() {
return (
<Container>
<Header style={custom.header}>
<StatusBar backgroundColor="#425768" barStyle="default"/>
<Left>
<TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }} onPress={() => this.props.navigation.navigate('Home')}>
<Button transparent onPress={() => this.props.navigation.navigate('Home')}>
<AntDesign name="arrowleft" style={custom.headerBackIcon} onPress={() => this.props.navigation.navigate('Home')}/>
</Button>
</TouchableOpacity>
</Left>
<Body style={custom.headerSettingsBody}>
<Title style={responsive.headerTitle}>
Настройки
</Title>
</Body>
</Header>
<Content style={styles(this.props).backgroundColorTheme}>
<List style={styles(this.props).backgroundColorTheme}>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppIntro')}>
<MaterialIcons name="import-contacts" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Покажете въвеждащата страница
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ChangeTheme')}>
<MaterialIcons name="color-lens" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Промяна на темата
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<View>
<Text style={custom.settingsMenuHeader}>
Данни
</Text>
</View>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ImportData')}>
<MaterialCommunityIcons name="file-import" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Импортиране на данни
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ExportData')}>
<MaterialCommunityIcons name="file-export" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Експортиране на данни
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<View>
<Text style={custom.settingsMenuHeader}>
Относно
</Text>
</View>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AboutUs')}>
<FontAwesome name="users" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
За нас
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => Linking.openURL('mailto:takeandreturn#gmail.com')}>
<MaterialCommunityIcons name="contact-mail" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Контакти
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppVersion')}>
<MaterialIcons name="info" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Версия на приложението
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
</List>
</Content>
</Container>
);
}
/* /Render Method - Is Place Where You Can View All Content Of The Page/ */
}
export default withTheme(SettingsView);
/* Render Method - Is Place Where You Can View All Content Of The Page */
render() {
return (
<Container>
<Header style={custom.header}>
<StatusBar backgroundColor="#425768" barStyle="default"/>
<Left>
<TouchableOpacity hitSlop={{ top: 20, bottom: 20, left: 50, right: 50 }} onPress={() => this.props.navigation.navigate('Home')}>
<Button transparent onPress={() => this.props.navigation.navigate('Home')}>
<AntDesign name="arrowleft" style={custom.headerBackIcon} onPress={() => this.props.navigation.navigate('Home')}/>
</Button>
</TouchableOpacity>
</Left>
<Body style={custom.headerSettingsBody}>
<Title style={responsive.headerTitle}>
Настройки
</Title>
</Body>
</Header>
<Content style={styles(this.props).backgroundColorTheme}>
<List style={styles(this.props).backgroundColorTheme}>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppIntro')}>
<MaterialIcons name="import-contacts" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Покажете въвеждащата страница
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ChangeTheme')}>
<MaterialIcons name="color-lens" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Промяна на темата
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<View>
<Text style={custom.settingsMenuHeader}>
Данни
</Text>
</View>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ImportData')}>
<MaterialCommunityIcons name="file-import" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Импортиране на данни
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('ExportData')}>
<MaterialCommunityIcons name="file-export" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Експортиране на данни
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<View>
<Text style={custom.settingsMenuHeader}>
Относно
</Text>
</View>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AboutUs')}>
<FontAwesome name="users" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
За нас
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => Linking.openURL('mailto:takeandreturn#gmail.com')}>
<MaterialCommunityIcons name="contact-mail" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Контакти
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
<ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppVersion')}>
<MaterialIcons name="info" size={25} color={'#22364F'}/>
<Text style={custom.settingsText}>
Версия на приложението
</Text>
<Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
</ListItem>
</List>
</Content>
</Container>
);
}
/* /Render Method - Is Place Where You Can View All Content Of The Page/ */
}
export default withTheme(SettingsView);

The static keyword creates a property on the class.
Consider:
class Foo {
static bar = 42;
}
It is the same as:
class Foo {}
Foo.bar = 42;
So when you need to add static property, assign it as a property. For example, for a function component:
function MyComponent() {}
MyComponent.navigationOptions = {};
Or in your case:
const SettingsViewComponent = withTheme(SettingsView);
SettingsViewComponent.navigationOptions = {};
It'll be a better solution to add this functionality to your withTheme HOC so that it copies the property:
function withTheme(SourceComponent) {
function TargetComponent() {}
TargetComponent.navigationOptions = SourceComponent.navigationOptions;
return TargetComponent;
}
You can also use this library to copy all static properties: https://github.com/mridgway/hoist-non-react-statics