I'm using react-navigation and implementing drawer.
It worked on the iOS but it's not working on the android.
When I call _drawToggle,
_drawerToggle = () => {
this.props.navigation.navigate('DrawerOpen');
}
The screen gets darker(seems like working, but not quite).
Here is return value of the render() function.
<View style={{flex:1}}>
<Header
headerText="Restaurant List"
navigation={this.props.navigation}
drawerToggle={this._drawerToggle}
/>
<ScrollView>
<FlatList
data={restaurants}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</ScrollView>
</View>
Related
Why does the following Button not work on android?
render() {
return (
<View>
<View style={{height:50}}>
<Text>if this is here, the button will not work</Text>
</View>
<View>
<Button
title="Confirm"
onPress={() => alert('click')}
/>
</View>
</View>
)
}
When I remove the top view, the button works. (no problems on ios)
render() {
return (
<View>
<View>
<Button
title="Confirm"
onPress={() => alert('click')}
/>
</View>
</View>
)
}
Ok, the part, I posted does work. The cause for my problem was nesting it from another (parent) view.
I am trying to to data using Flatlist inside a Modal. But sometimes (Not always) data is not displayed at all. Just empty screen. I am using expo client for test. Below is my code. This render() method is actually in a custom component. So, Modal is inside a custom component. I am not sure Modal has to cause any issue here.
// sometime flatlist does not work when inside a modal
render(){
return (
<View>
{ this.props.visible && this.renderChildModal()}
{ this.props.visible &&
<Modal
animationType="slide"
transparent={false}
visible={true}
onRequestClose={() => {
//Alert.alert('Modal has been closed.');
}}>
<View>
<View style={this.styles.buttonContainer}>
<TouchableOpacity style={this.styles.button}
onPress={this.props.onDone}>
<Text style={styles.labelButton}>Done</Text>
</TouchableOpacity>
</View>
<FlatList
data={this.state.items}
extraData ={this.state}
renderItem={({ item }) => (
<CheckBox
title={item.name}
checked={item.checked}
onPress={()=>this.onSelect(item.id-1)}
/>
)}
keyExtractor={item => item.id.toString()}
/>
</View>
</Modal>
}
</View>
)
}
It was not a problem with Modal. I was calling component named MultiSelect in screen as below,
<MultiSelect
items={specialities}
selectedItems={profile.specialities}
onItemSelected={this.onSelectedSpecialitiesChange}
visible={this.state.specialitiesModalVisible}
onDone={this.specialityMultiSelectDone}
>
</MultiSelect>
Sometime specialities is empty as it is retrieved from server asynchronously.
So, I changed my code as below,
{specialities.length>0 &&
<MultiSelect
items={specialities}
selectedItems={profile.specialities}
onItemSelected={this.onSelectedSpecialitiesChange}
visible={this.state.specialitiesModalVisible}
onDone={this.specialityMultiSelectDone}
>
</MultiSelect> }
That solves the issue.
i'm working on a react native app and i updated my react version.
I use Flatlist inside a ScrollView.
I got this warning :
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
My component :
return (
<KeyboardAvoidingView behavior="padding" enabled style={styles.keyboardAvoidingView}>
<SafeAreaView style={styles.keyboardAvoidingView}>
<Header
..
}}
containerStyle={styles.headerContainer}
rightComponent={{
...
}}
/>
<ScrollView style={styles.body}>
<View style={styles.titleSection}>
<Text style={styles.stepTitle}>Étape 1/3</Text>
<Text style={styles.questionTitle}>Quel contact voulez-vous partager ?</Text>
</View>
<View>
<FlatList
data={contacts}
renderItem={({ item, index }) => (
<TouchableHighlight onPress={() => this.onItemClickHandler(index, item.id, item.firstName, item.lastName)} style={styles.touchableHighlight}>
<View>
<ListItem
chevron={
(
<Icon
color={this.state.selectedIndex === index
? `${defaultTheme.palette.white.main}`
: `${defaultTheme.palette.primary.dark}`}
name="chevron-right"
size={40}
type="material"
/>
)
}
containerStyle={
this.state.selectedIndex === index
? styles.selected
: styles.notSelected
}
leftElement={
(
<Icon
...
/>
)
}
title={`${item.firstName} ${item.lastName}`}
titleStyle={this.state.selectedIndex === index
? [styles.titleStyle, styles.titleSelected]
: [styles.titleStyle, styles.defaultTitle]}
/>
</View>
</TouchableHighlight>
)}
extraData={this.state.selectedIndex}
keyExtractor={(item) => item.email}
ListHeaderComponent={this.renderHeader(searchValue)}
style={styles.flatListStyle}
ListFooterComponent={this.renderFooter}
/>
{
(contacts.length > 0 && page > 0)
&& <CustomButton title="Afficher la suite" onPress={() => this.makeRemoteRequest()} loading={loading} disabled={loading} />
}
</View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
);
I had the same issue. See my code
What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning.
Below is the previous code:
<ScrollView >
<ReadCard data={this.state.data}/>
<FlatList
data={this.state.data.related}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={ListSeprator}
/>
</ScrollView>
Below is the changed code without any warning:
<FlatList
data={this.state.data.related}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={ListSeprator}
ListHeaderComponent={
<ReadCard data={this.state.data}/>
}
/>
I am using nativebase.
I want to have a pull refresh flatlist.
I have a AppContainer with the header, footer and content:
<Container>
<StatusBar backgroundColor={colors.primary} />
{renderHeader(this.props)}
<Content contentContainerStyle={{ flexGrow: 1 }}>{this.props.children}</Content>
{renderFooter(this.props)}
</Container>
Then I have the flatlist in the AppContainer:
<AppContainer>
<TransactionList />
</AppContainer>
The TransactionList is the flatlist:
<View style={styles.container}>
<FlatList
data={datas}
extraData={this.state}
renderItem={this.renderList}
keyExtractor={item => item.item}
onRefresh={this.refreshList}
refreshing={this.state.refreshing}
/>
</View>
But it does not show the pull refresh because AppContent Content is a ScrollList.
How Can I solve it?
RefreshControl is react-native component, the official react-native documentation has shown an example of it with ScrollView ( https://facebook.github.io/react-native/docs/refreshcontrol ), but it is the exact same props for FlatList :
return (
<SafeAreaView style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<Text>Pull down to see RefreshControl indicator</Text>
</ScrollView>
</SafeAreaView>
);
}
i have a component in which on button click i render a component
<View style={styles.container}>
<Text> in Default component!</Text>
<Button title="add"
onPress={this.handelSubmit} />
{items.map((item, index) => (
<Home key={index} data={index} />))}
</View>
and my home component look like
<View style={styles.container}>
<Text onPress={() => { this.props.navigation.navigate("Calculator")}}>Semester {this.props.data +1}</Text>
</View>
onPress event i want to navigate to other screen i.e 'Calculator.js' but i got an error
i am using react-navigation for navgation
If you want to navigate from a component, you have to use your component like this:
<Home key={index} data={index} navigation={this.props.navigation} />