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.
Related
i'm using react-native-elements on my new project and decided to use floating action button on home screen. but there is an issue im facing. in home screen there is scrollView and FAB is placing itself to bottom of when i write in scroll. outside of scroll i cant see it. how to solve this problem
this is FAB
readBarcode() {
return (
<View>
<FAB title="Barkod Okut" placement="right" />
</View>
);
}
and this is render
render() {
return (
<View style={Styles.Container}>
{this.readBarcode()}
<ScrollView style={Styles.MainScroll}>
{slider()}
{banner()}
{categoryButtons()}
</ScrollView>
</View>
);
}
this is how i figure it out
this is render
render() {
return (
<View style={Styles.Container}>
<ScrollView style={Styles.MainScroll}>
{slider()}
{banner()}
{categoryButtons()}
</ScrollView>
{this.readBarcode()}
</View>
);
}
and this is FAB
readBarcode() {
return (
<View>
<FAB title="Barkod" placement="left" color="#005F8E" />
</View>
);
}
placement right wont work but when i do it left i work perfectly
My code:
{this.state.News.slice(0, this.state.currentShow).map((item) => {
return (
<View>
<View>
<View>
<Text>{item.Title}</Text>
<Text>{item.Content}</Text>
</View>
<View>
<Image source={{uri: item.Image}} />
</View>
</View>
<View>
<Text>{item.creationTime}</Text>
<Button onPress={this.gotoNews(item.Id.toString())}>
<Text>Load More</Text>
</Button>
</View>
</View>
)
})}
Whenever this page is run, Everything is right But why the button onPress runs when the react native screen is loaded!!
Try to change your button handler call from a function call to a function
you can use ES6 arrow functions to do this :
<Button onPress={()=>this.gotoNews(item.Id.toString())}>
<Text>Load More</Text>
</Button>
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've tried several times with , but didn't work. Maybe I don't know where to put it in code. I'm a beginner in react-native, but I need your help. Please share your answers!
render() {
console.log('render register -> renderComponent');
return (
<View style={styles.container}>
<Image source={require('../components/logo.png')} />
<KeyboardAvoidingView style={styles_register.containerView} behavior="padding">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles_register.registerScreenContainer}>
<View style={styles_register.registerFormView}>
<ThemeProvider theme={theme}>
<Button
buttonStyle={styles.loginButtonn}
onPress={() => {
this.registerWithFacebook();
}}
title = "Login with Facebook"
/>
</ThemeProvider>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</View>
);
}
}
First of all, make sure that your image is in that path ../components/logo.png, also set the size to your image component. Since you are beginner always start with the documentation
<Image
style={{width: 50, height: 50}}
source={require('../components/logo.png')}
/>
render() {
console.log('render register -> renderComponent');
return (
I am trying design like below image with react native.If anyone have worked like this modal design over the toolbar then please help me.
1
You will need a Modal with a embedded TouchableOpacity combined with some styling for positioning.
Please refer this
https://snack.expo.io/SJrDAC8Qr
render() {
return (
<>
<View>
<Appbar.Header>
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="search" onPress={() => this.setState({displayModal: true})} />
</Appbar.Header>
<View>
<Text>Main content!</Text>
</View>
</View>
{/*Modal code*/}
<Modal transparent={true} visible={this.state.displayModal}>
{/*Container .. clicking this closes the modal*/}
<TouchableOpacity style={{flex:1}} onPress={() => this.setState({displayModal:false})}>
<View style={{backgroundColor:'blue', position:'absolute', right:0, width:200, height: 200}}>
<Text style={{color:'#ffffff'}}>Hello World!</Text>
</View>
</TouchableOpacity>
</Modal>
</>
);
}
Not very nicely styled but I guess it does what you want