I'm with a problem with TouchableOpacity and Negative Margins inside a FlatList. On iOS works well, but on Android, when I click at the TouchableOpacity in the front of other TochableOpacity, the TouchableOpacity from behind fires. I don't know how to solve this.
iOS Image
I clicked at "Proposta 70" but fires "Proposta 78" from behind.
Android Image
The FlatList code
<View style={styles.containerList}>
<FlatList
data={proposalsList}
keyExtractor={item => item.proposta_id}
renderItem={({ item, index }) => (
<RenderItem
item={item}
index={index}
isLoweredCard={
openedCardIndex !== null && index === openedCardIndex + 1
}
changeOpenedCardIndex={changeOpenedCardIndex}
/>
)}
refreshing={loading}
onRefresh={() => getProposalsAndNotifications()}
/>
</View>
The RenderItem code
<TouchableOpacity
style={styles.container(index, isLoweredCard)}
onPress={() => changeOpenedCardIndex(index)}
>
<>
<View
style={[
styles.lineContainer,
{ marginBottom: metrics.padding * 1.5 },
]}
>
<View
style={{
width: '50%',
}}
>
<Text style={styles.proposalId}>
{`Proposta ${item.proposta_id}`}
</Text>
<Text style={styles.proposalDate}>
{dayjs(item?.proposta_data_criacao).format('DD.MM.YYYY')}
</Text>
</View>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
}}
>
<View style={styles.statusContainer}>
<Text style={{ fontSize: wp(4), fontWeight: 'bold' }}>
<TypeStatus status={item?.proposta_status} />
</Text>
</View>
</View>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Valor solicitado</Text>
<Text style={styles.proposalDetailValue}>
{formatCurrency(item?.proposta_valor_financiado)}
</Text>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Valor liberado</Text>
<Text style={styles.proposalDetailValue}>
{formatCurrency(item?.proposta_valor_financiado)}
</Text>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Parcelas</Text>
<Text style={styles.proposalDetailValue}>
{`${item?.proposta_valor_prazo}x`}
</Text>
</View>
<View style={styles.lineContainer}>
<Text style={styles.proposalDetailLabel}>Valor da parcela</Text>
<Text style={styles.proposalDetailValue}>
{formatCurrency(item?.proposta_valor_parcela)}
</Text>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={goToDetails}
title="Ver detalhes"
titleStyle={styles.proposalButtonText}
style={styles.button}
/>
</View>
</>
</TouchableOpacity>
And the style of items
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import { metrics, colors } from '../../../../constants';
const styles = StyleSheet.create({
container: (index, isLoweredCard) => ({
backgroundColor: `#00${index}F${index}C`,
marginTop: !isLoweredCard && index !== 0 ? -wp(53) : metrics.padding,
marginHorizontal: metrics.padding,
alignContent: 'center',
padding: metrics.padding,
borderRadius: metrics.radius,
zIndex: -(index + 999),
}),
lineContainer: {
width: '100%',
justifyContent: 'space-between',
flexDirection: 'row',
marginBottom: metrics.padding / 2,
},
statusContainer: {
backgroundColor: colors.white,
borderRadius: 20,
width: '70%',
paddingVertical: 3,
alignItems: 'center',
justifyContent: 'center',
},
proposalId: {
color: colors.white,
fontWeight: 'bold',
fontSize: wp(4.5),
},
proposalDate: {
color: 'rgba(0, 0, 0, 0.5)',
fontWeight: 'bold',
fontSize: wp(3.5),
},
proposalDetailLabel: {
fontSize: wp(4),
color: 'rgba(0, 0, 0, 0.9)',
},
proposalDetailValue: {
fontSize: wp(4.5),
color: colors.white,
fontWeight: 'bold',
},
proposalButtonText: {
color: colors.white,
fontWeight: 'bold',
fontSize: wp(4),
},
button: {
borderRadius: metrics.radius,
backgroundColor: '#002F6C',
paddingHorizontal: metrics.padding * 3,
},
buttonContainer: {
width: '100%',
marginTop: metrics.padding,
alignItems: 'center',
},
});
export default styles;
I encountered exactly the same problem on Android. My FlatList rendered items with negative margin to superimpose them on each other. The touchable on iOS is perfect but on Android it press the lowest item behind.
Finally I solved this by replacing
import { TouchableOpacity } from 'react-native';
with
import { TouchableOpacity } from 'react-native-gesture-handler';
Using react-native 0.63.4 and react-native-gesture-handler 1.9.0 in my case.
The only solution for my case was inverting the negative margin (top / bottom).
In my case the View component was with negative marginBottom and the touchable part that I wanted was on the bottom as well, so I inverted it and put the View inside the next component and gave a negative marginTop. So the part that I wanted to be touchable worked fine.
A little strange but for me it worked out well...
Related
I wanna achieve what you can see in image below, but I have no idea to make flat list items overlap each other:
forget about the right and left icons, I'm just asking for a way for a middle container which has cards rendering on each other. tnx in advance
Working example: https://snack.expo.io/#msbot01/sponaneous-salsa
export default function App() {
return (
<View style={styles.container}>
<View style={{flexDirection:'row', justifyContent:'flex-end', backgroundColor:'white', paddingTop:10, paddingBottom:10}}>
<View style={{backgroundColor:'transparent'}}>
<View style={[styles.shadow, {backgroundColor:'red', borderTopLeftRadius:40, borderBottomLeftRadius:40}]}>
<Text style={styles.paragraph}>
First
</Text>
</View>
</View>
<View style={{backgroundColor:'red', borderBottomWidth:0, borderColor:'white'}}>
<View style={[styles.shadow, {backgroundColor:'red', borderTopLeftRadius:40, borderBottomLeftRadius:40}]}>
<Text style={styles.paragraph}>
second
</Text>
</View>
</View>
<View style={{backgroundColor:'red', borderBottomWidth:0, borderColor:'white'}}>
<View style={[styles.shadow, {backgroundColor:'red', borderTopLeftRadius:40, borderBottomLeftRadius:40}]}>
<Text style={styles.paragraph}>
third
</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
shadow:{
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 4,
elevation: 5
}
});
I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react-native-keyboard-aware-scroll-view) show white spaces at the bottom of the screen. How do I fix this?
(https://i.stack.imgur.com/1c0M6.jpg) have tried KeyboardAvoidingView and react-native-keyboard-aware-scroll-view but the problem still persist
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-
navigation';
import { KeyboardAwareView } from 'react-native-keyboard-aware-
view';
import { AsyncStorage } from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}>
<View style={styles.container}>
<ScrollView style={{flex: 1}}>
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: "100%",resizeMode: "cover"}} source={require('./bg.jpg')}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={styles.formContainer}>
<ScrollView style={{flex:1}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</ScrollView>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</ImageBackground>
</ScrollView>
</View>
</KeyboardAwareView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
height: "30%"
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
I checked and modify your code in react native ios. The following code might be helpful for you.
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Dimensions,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
let {height, width} = Dimensions.get('window');
export default class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView behavior={"padding"} enabled style= .
{{flexGrow:1,height:'100%'}}>
<ScrollView bounces={false} >
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: height}} source={require('./bg.jpg')}>
<View style={{flex:1}}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={{flex:2}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</View>
</ImageBackground>
</ScrollView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
// height:'30%'
flex:1
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
If you run the above code in android then change behavior={"height"}
I have a component it has a view of flex: 1 with a status bar component and a child component, when the status bar element isn't there the indicator shows, but when I add the status bar element, the indicator goes hidden, Please how can i make the indicator show while the status bar is added, what is making it go hidden
With the StatusBar(The indicator goes hidden)
Without the StatusBar(The Indicator shows)
THE CODE
CHILD COMPONENT(On)
import {BoxShadow} from 'react-native-shadow';
export default class On extends Component {
render() {
const shadowOpt = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height / 10,
color: "#000",
border: 10,
opacity: '0.15',
radius: 20,
x: 0,
y: 5,
}
const dimensions = Dimensions.get('window');
const Height = (dimensions.height);
const Width = dimensions.width;
return (
<View style={{flex: 1}}><View name="indicator" style={{flexDirection: 'row',}}>
<View style={{backgroundColor: '#cbcdda', width: Width, height: Height / 60}}>
</View>
<View style={{
backgroundColor: '#EFB879',
width: (this.state.width),
height: Height / 60,
position: 'absolute'
}}>
</View>
</View>
<ViewPagerAndroid
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}
style={{height: Height - ((Height / 30) + (Height / 10))}}
initialPage={0}>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="1">
<Image style={{marginBottom: 50,}} source={require('../on1.png')}/>
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
Welcome to Sẹlẹ
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
Hire services and buy and sell {'\n'} on Sẹlẹ
</Text>
</View>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="2">
<Image style={{marginBottom: 50, width: '35%', height: '35%'}}
source={require('../sele2.png')}/>
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
With Sẹlẹ, you can
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
Hire services and buy and sell {'\n'} on Sẹlẹ
</Text>
</View>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="3">
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
Select your School
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
You've made it this far {'\n'} select your school on the next page {'\n'} and let's get
started
</Text>
</View>
</ViewPagerAndroid>
<BoxShadow setting={shadowOpt}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: 1,
backgroundColor: 'white',
}}>
<TouchableNativeFeedback>
<Text style={{
fontSize: 18,
marginLeft: 25,
fontFamily: 'mont',
color: '#615D5D',
marginBottom: 10
}}>Skip</Text>
</TouchableNativeFeedback>
<View style={{flexDirection: 'row'}}><View
style={{marginRight: 14, alignSelf: 'center'}}>
<View style={this.state.no == "0" ? styles.selected : styles.unselected}>
</View>
</View>
<View style={{marginRight: 14}}>
<View
style={this.state.no == "1" ? styles.selected : styles.unselected}>
</View>
</View>
<View
style={this.state.no == "2" ? styles.selected : styles.unselected}>
</View></View>
<TouchableNativeFeedback onPress={this.update.bind(this)}>
<Text style={{
fontFamily: 'mont',
color: '#EFB879',
fontSize: 18,
marginRight: 25,
marginBottom: 10
}}>Next</Text>
</TouchableNativeFeedback>
</View>
</BoxShadow>
</View>
);
}
}
PARENT ELEMENT
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
timePassed: false,
};
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='#EE8F62' translucent={true} barStyle='light-content'/><On/>
</View>
);
}
}
We had similar problem for android, This is how we handle it was, may be this will help you to find a better solution.
You need to create a const and assign status bar size as a value.
const NAVBAR_HEIGHT = Platform.select({
ios: { marginTop: 0 },
android: { marginTop: window.height / 8 }
});
Then in the style section should add this line,
marginTop: NAVBAR_HEIGHT.marginTop
Like this,
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#E7EBF0",
marginTop: NAVBAR_HEIGHT.marginTop
}
});
This is how we create status bar for our application,
<View style={styles.container}>
{/* if ios status bar will be added to the screen */}
{Platform.OS === "ios" ? (
<Statusbar backgroundColor="#000000" barStyle="light-content" />
) : null}
</View>
I'm trying to make two nested swipers on Android with React Native, using react-native-swiper. Each swiper works correctly when is separate, but when I add one to the other, the inner nested swiper doesn't show any content. It's a little bit weird, it recognized its children, I can swipe but Views are not rendered. Here is my simple demonstration example:
import React from 'react'
import {
Text,
View
} from 'react-native'
import Swiper from 'react-native-swiper'
const Dimensions = require('Dimensions');
const window = Dimensions.get('window');
var styles = {
wrapper: {
backgroundColor: 'transparent'
},
innerSwiper: {
width: window.width,
height: window.height / 3,
marginTop: 60,
backgroundColor: '#92BBD9'
},
slide1: {
flex: 1,
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
}
}
export default () =>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<View style={styles.innerSwiper}>
<Swiper style={styles.wrapper} showsButtons>
<View style={styles.slide1}>
<Text style={styles.text}>Hello Swiper</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
</View>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Beautiful</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
I'm trying to a implement a logic to display some data fetched from a simple REST API. So i'm grabbing the JSON object in the RanjoorExplore class and the data is sent into the data to the ExploreCard in the other class. So the this.props.data must be referencing the passed variable. By mapping that variable, I'm displaying the title attribute of the response object in a simple Text Component.
I'm facing this error:
undefined is not a function(evaluating this.props.data.map).
RanjoorExplore:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
Alert
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ExploreCard from '../../elements/cards/ExploreCard';
import ExploreHeader from '../../elements/headers/ExploreHeader';
class RanjoorExplore extends Component {
constructor(){
super();
this.state = {
rawData: []
}
}
static navigationOptions = {
header: null,
title: 'Explore',
tabBarIcon: ({ tintColor, focused }) => (
<Icon
name="bandcamp"
size={24}
color={focused ? '#4ab367' : 'white'}
/>
),
headerStyle: { backgroundColor: '#202026' },
headerTitleStyle: {
color: 'white'
}
};
fetchGanjoorData() {
return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((responseJson) => {
this.setState({rawData: responseJson})
})
.catch((error) => {
console.error(error);
});
}
componentDidMount() {
this.fetchGanjoorData();
}
render() {
return (
<View style={styles.ExploreContainer}>
<ExploreHeader />
<ScrollView>
<ExploreCard data={this.state.rawData} />
</ScrollView>
</View>
);
}
}
var styles = StyleSheet.create({
ExploreContainer: {
backgroundColor: '#303036',
height: '100%',
width: '100%'
},
})
export default RanjoorExplore
ExploreCard:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Alert
} from 'react-native';
import { Card, ListItem, Button, Icon, Avatar } from 'react-native-elements';
export default class ExploreCard extends Component {
render() {
/* Mapped data will be processed right here */
let mappedData = this.props.data.map(function (data1) {
return (
<View>
{data1.title}
</View>
)
})
return (
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}></View>
<Card
containerStyle={{
width: '85%', height: 250, backgroundColor: '#202026', shadowOpacity: 0.7,
shadowOffset: { height: 5 }, shadowColor: 'black', borderWidth: 0, borderRadius: 8, flexDirection: 'row'
}}
wrapperStyle={{ alignSelf: 'flex-end' }} >
<View style={{ flex: 2, alignSelf: 'flex-end' }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
<Text style={{ fontFamily: 'IRANSans', marginRight: 5, marginTop: 12, color: '#505056' }}>حافظ</Text>
<Avatar
medium
rounded
source={require('../../img/avatars/ferdowsi.jpg')}
containerStyle={{
alignSelf: 'flex-end', marginRight: 15,
shadowOpacity: 0.7,
shadowOffset: { height: 5 }, shadowColor: 'black'
}}
/>
</View>
<View>
<Text style={{ alignSelf: 'flex-end', fontFamily: 'IRANSans', color: 'white', marginTop: '10%', marginRight: '5%' }}>
{mappedData}
</Text>
<Text style={{ alignSelf: 'flex-start', fontFamily: 'IRANSans', color: 'white' }}>
تا دمی برآساییم زین حجاب ظلمانی
</Text>
</View>
</View>
<View style={{ alignSelf: 'flex-end', backgroundColor: 'transparent', flexDirection: 'row' }}>
<Icon
name='favorite' size={24} color="#34343a" style={{ marginLeft: 5 }}
/>
<Icon
name='grade' size={24} color="#34343a" style={{ marginLeft: 5 }}
/>
<View>
<Button
textStyle={{ fontSize: 15 }}
iconRight
backgroundColor='#4ab367'
fontFamily='IRANSans_UltraLight'
buttonStyle={{
height: 15, width: 110,
borderRadius: 8
}}
title='ادامه مطلب'
/>
</View>
</View>
</Card>
<View style={{ flex: 1 }}></View>
</View>
);
}
}
Can someone please help me solve this issue?
Thanks in advance.
https://jsonplaceholder.typicode.com/posts/1 returns an object, not an array. Therefore, map is not a valid operation
Perhaps you meant to use https://jsonplaceholder.typicode.com/posts/? That returns an array