So whenever i try put any images in flatlist or data.map to display the images its not working , it works fine with emulator but when i make build it doesnt show images
'the code is :
{this.state.symptoms_second.map((row, index) => (
<View>
<TouchableOpacity
activeOpacity={1}
onPress={() => this.symptoms_doctor_list(row.id)}>
<View style={styles.home_style26}>
<Image
style={styles.home_style27}
source={{uri: img_url + row.service_image}}
/>
</View>
</TouchableOpacity>
{/* </Card> */}
<Text style={styles.home_style28}>{row.service_name}</Text>
</View>
))}
flatlist code
<FlatList
horizontal={true}
data={this.state.symptoms_first}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => (
<View>
<TouchableOpacity
activeOpacity={1}
style={{margin: 2}}
onPress={() =>
this.symptoms_doctor_list(item.name)
}>
<View style={styles.home_style20}>
<Image
style={styles.home_style21}
source={{uri: item.image}}
/>
</View>
</TouchableOpacity>
<Text style={styles.home_style22}>{item.name}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
it does load the api content of text but not images and images do have style property for height and width... also images are not loading in general case when the image is passed through uri
Related
How to use if condition in flatlist of react native . I am creating a social app in react native so I created a screen in which I render all users by using flatlist so i just want that whenever status with that user is zero which mean he is no longer friend of that user then my button in flatlist should be 'add friend' else it should be 'unfriend'. or in simpler words when item.status===0 then add friend button display else unfriend button display .My flatlist is like that.
<FlatList
data={this.state.user}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return (
<View>
<View style={{ flexDirection: 'row', marginTop: 10, }}>
<Image style={{...}} source={{ uri: '' }} />
<View>
<Text style={{..}}>{item.full_name}</Text>
<View>
//if item.status==0 below code works
<View>
<TouchableOpacity style={..} onPress={() => this.sendRequest}>
<Text style={styles.submitButtonText}>{item.status = 0 }Add Friend</Text>
</TouchableOpacity>
</View>
<View style={styles.space} />
<View>
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>Remove</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
)
}}
/>
You could write something like:
<FlatList
data={this.state.user}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return (
<View>
<View style={{ flexDirection: 'row', marginTop: 10, }}>
<Image style={{...}} source={{ uri: '' }} />
<View>
<Text style={{..}}>{item.full_name}</Text>
<View>
{item.status === 0 && <View>
<TouchableOpacity style={..} onPress={() => this.sendRequest}>
<Text style={styles.submitButtonText}>Add Friend</Text>
</TouchableOpacity>
</View>}
<View style={styles.space} />
{item.status !== 0 && <View>
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>Remove</Text>
</TouchableOpacity>
</View>}
</View>
</View>
</View>
</View>
)
}}
/>
This is how you can conditional render button based on item.status value.
Explanation: if you want to conditional render something (button, div...) in React you have to embrake html component into {} bracket and then add boolean condition.
So in your case:
{item.status === 0 && //<-- this html will be rendered only if item.status is equal to 0
<View>
<TouchableOpacity style={..} onPress={() => this.sendRequest}>
<Text style={styles.submitButtonText}>Add Friend</Text>
</TouchableOpacity>
</View>}
{item.status !== 0 && //<-- this html will be rendered only if item.status is different from 0
<View>
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>Remove</Text>
</TouchableOpacity>
</View>}
You can do it this way:
{item.status === 0 && (
// ... code to render
)}
I am using a ScrollView in my react-native app. The App work fine in my iOS simulator but when I test in my Android emulator the ScrollView does not work.
Here is what my React Components returns
<SafeAreaView style={styles.container}>
<Image
source={require('../assets/images/logo.png')}
style={styles.logo}
/>
<Androw style={styles.shadow}>
<Text style={[styles.logoText, styles.shadow]}>{NAME}</Text>
</Androw>
<Text style={styles.title}>Welcome Back</Text>
<View style={styles.subContainer}>
<ScrollView showsVerticalScrollIndicator={false}>
<Text style={styles.loginText}>Login</Text>
<View style={styles.textBox}>
<Input
// icon="email"
placeholder="Email or username"
autoCapitalize="none"
autoCompleteType="email"
value={this.state.email}
onChangeText={(txt) => this.setState({email: txt})}
/>
<View style={styles.textInput}>
<Input
// icon="pass"
placeholder="Password"
autoCapitalize="none"
autoCompleteType="password"
value={this.state.password}
onChangeText={(txt) => this.setState({password: txt})}
/>
</View>
</View>
<TouchableOpacity>
<Text style={styles.forgotPasswordText}>
Don't remember your password?
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => console.log(this.state)}>
<Button text="Login" />
</TouchableOpacity>
<Text style={styles.noAccountText}>
Don't have an account?{' '}
<Text style={styles.signupText}>Signup</Text>
</Text>
</ScrollView>
</View>
</SafeAreaView>
you should wrap your child views inside like
<ScrollView>
<View>
.....
</View>
</ScrollView>
Top <View> must have style flex:1. Alternate try doing like this
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
...
</ScrollView>
SafeAreaView that does not require flex: 1. Also try removing it from ScrollView too if it is there.
This is what i assume. Would be more helpful if you share your stylesheet also.
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.
I have two buttons which i'm trying to render in a flatlist so that it iterates and displays multiple times as a list. How should i do it?
<FlatList
data={this.state.data}
extraData={this.state}
renderItem={this.renderItem}
keyExtractor={items => items.id}
/>
<TouchableOpacity onPress={this.onPressButtonPlay.bind(this)}>
<Text style={styles.buttonText}> </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onPressButtonPause.bind(this)}>
<Text style={styles.buttonText}>{this.state.pause ? 'Resume' : 'Pause'}</Text>
</TouchableOpacity>
Just simply insert it within your renderItem function:
renderItem = ({item}) => {
return(
<TouchableWithoutFeedback>
<TouchableOpacity>
{this.renderButton()}
</TouchableOpacity>
<TouchableWithoutFeedback>
);
}
My FlatList triggers onendreached not as expected. onEndReached gets called again and again. I have read some suggestion to wrap flatlist in a view with flex:1 but I still doesn't work properly. Also removing the scrollView didn't work-
This didn't help https://github.com/GeekyAnts/NativeBase/issues/1736#issuecomment-401815949
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<SearchBar
onChangeText={(query) => this.setState({query})}
placeholder='Hier suchen...'
showLoading
/>
</View>
</View>
<View style={{flex:1}}>
<ScrollView style={{flex: 1, flexDirection:'column'}}>
<View style={{flex:1}}>
<FlatList
data={articlesData}
renderItem={renderFunction}
onEndReached={this._onEndReached}
onEndThreshold={0}
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
keyExtractor={item => item.slug}
/>
</View>
<View style={{marginBottom:10}}>
<Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
</View>
</ScrollView>
</View>
</View>
If it is loading or error you can try to use onEndReached={this.state.isLoading ? () => {} : this._onEndReached}; just let onEndReached do nothing when the state is loading. I've tried serveral way (debounce, await setState, using flag) but only this way work as expected.
<View style={baseStyles.body}>
<View style={{flexDirection:"row", backgroundColor:theme.button.tertiary}}>
<View style={{flex:1}}>
<SearchBar
onChangeText={(query) => this.setState({query})}
placeholder='Hier suchen...'
showLoading
/>
</View>
</View>
<View style={{flex:1}}>
<ScrollView style={{flex: 1, flexDirection:'column'}}>
<View style={{flex:1}}>
<FlatList
data={articlesData}
renderItem={renderFunction}
onEndReached={this.state.isLoading ? () => {} : this._onEndReached}
onEndThreshold={0}
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
keyExtractor={item => item.slug}
/>
</View>
<View style={{marginBottom:10}}>
<Text style={{color:this.state.theme.text.primary,textAlign:"center",fontSize:16}}>Gefunden: {rowCount}</Text>
</View>
</ScrollView>
</View>
</View>