I'm creating a login, and to solve the problem with the virtual keyboard covering my text inputs I'm using KeyboardAvoidingView. I thought that the logo would animate nicely since I define both the form and the logo as flex: 1 (shrink/grow as much as possible in the available space) Since opening a keyboard diminishes the available space on the screen, the logo does change, but shrinks too much and then an overlap occurs. What I am missing?
This is my LoginScreen:
import React, { Component } from 'react'
import { Image, StyleSheet, View, KeyboardAvoidingView, Button } from 'react-native'
import FormTextInput from '../components/FormTextInput'
class LoginScreen extends Component {
state = { email: '', password: '' }
handleEmailUpdate = email => {
this.setState({ email })
}
handlePasswordUpdate = password => {
this.setState({ password })
}
handleLoginPress = () => {
console.log('Login button pressed')
}
render() {
return (
<KeyboardAvoidingView style={styles.container} behavior="padding">
<Image style={styles.logo} source={require('../assets/images/test.png')} />
<View style={styles.form}>
<FormTextInput
value={this.state.email}
onChangeText={this.handleEmailChange}
placeholder="Email"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
/>
<FormTextInput
placeholder="Password"
value={this.state.password}
onChangeText={this.handlePasswordChange}
secureTextEntry
returnKeyType="done"
/>
<Button title="LOGIN" onPress={this.handleLoginPress} />
</View>
</KeyboardAvoidingView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
},
logo: {
flex: 1,
width: '80%',
resizeMode: 'contain',
alignSelf: 'center',
},
form: {
flex: 1,
justifyContent: 'center',
width: '80%',
},
})
export default LoginScreen
*EDIT: after adding the line android:windowSoftInputMode="adjustPan", the keyboard overlaps the login button:
Use this is your android manifest
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:screenOrientation="portrait"
android:launchMode="singleTop"
android:windowSoftInputMode="adjustPan" //add this line
android:exported="true">
try this it will solve this problem
try this.
{Platform.OS === 'ios' ?
<KeyboardAvoidingView style={styles.container} behavior="padding">
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingVertical: 10}}
keyboardShouldPersistTaps='handled'>
<Image style={styles.logo} source={require('../assets/images/test.png')} />
<View style={styles.form}>
<FormTextInput
value={this.state.email}
onChangeText={this.handleEmailChange}
placeholder="Email"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
/>
<FormTextInput
placeholder="Password"
value={this.state.password}
onChangeText={this.handlePasswordChange}
secureTextEntry
returnKeyType="done"
/>
<Button title="LOGIN" onPress={this.handleLoginPress} />
</View>
</ScrollView>
</KeyboardAvoidingView>
: <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{paddingVertical: 10}}
keyboardShouldPersistTaps='handled'>
<Image style={styles.logo} source={require('../assets/images/test.png')} />
<View style={styles.form}>
<FormTextInput
value={this.state.email}
onChangeText={this.handleEmailChange}
placeholder="Email"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
/>
<FormTextInput
placeholder="Password"
value={this.state.password}
onChangeText={this.handlePasswordChange}
secureTextEntry
returnKeyType="done"
/>
<Button title="LOGIN" onPress={this.handleLoginPress} />
</View>
</ScrollView>
}
and style is
const styles = StyleSheet.create({
container: {
flex: 1, paddingVertical: 30,
alignItems: 'center', justifyContent: 'center',
backgroundColor: '#FFFFFF',
},
logo: {
flexGrow: 1,
width: '80%',
resizeMode: 'contain',
alignSelf: 'center',
},
form: {
flexGrow: 1,
justifyContent: 'center',
width: '80%',
},
});
Related
Friends, I would like to overlay a button on a webview in react native to redirect routes manually.
The react native buttons should be invisible on top of the webview buttons
The following image shows the buttons on the web page and below the react native buttons.
1
another problem is that the keyboard does not open when clicking on an input within the webview
here's my code:
const App = () => {
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width
const [url, setUrl] = useState('https://rootroute.com.br/');
return (
<KeyboardAvoidingView
behavior={ Platform.OS === 'ios' ? 'padding' : undefined }
style={styles.keyboardAvoidingView}
>
<View style={{ flex: 1}}>
<WebView
source={{ uri: url }}
onError={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
Alert.alert('WebView error: ', "" + nativeEvent);
}}
onHttpError={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
console.warn(
'WebView received error status code: ',
nativeEvent.statusCode,
);
}}
mixedContentMode={'always'}
geolocationEnabled={true}
ignoreSslError={true}
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
startInLoadingState={false}
style={{ flex: 1, width: deviceWidth, height: deviceHeight, marginTop: 15 }}
/>
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={() => setUrl('https://rootroute.com.br/1')}
title="Home"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => setUrl('https://rootroute.com.br/2')}
title="Alerta"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => setUrl('https://rootroute.com.br/3')}
title="Explore"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => setUrl('https://rootroute.com.br/4')}
title="Carrinho"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => setUrl('https://rootroute.com.br/5')}
title="Conta"
/>
</View>
</View>
</View>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 50
},
buttonContainer: {
flex: 1,
},
keyboardAvoidingView: { flexGrow: 1, flexShrink: 1 },
});
export default App; ```
I think you don't need KeyboardAvoidingView in your case
Just use WebView and View
Because KeyboardAvoidingView use to handle TextInput keyboard on normal View
I use react-native-vector-icons.
Click the input
Keyboard goes up
When pressing the icon, icon doesn't trigger, the keyboard will go down first rather than the onpress method icon triggers while having the keyboard is on
Expected Result would like a live chat, while keyboard is up submit icon will always trigger.
I tried to enwrap it in scrollview with keyboardshouldpersisttaps and it doesn't work.
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={{ flex: 1 }}
keyboardVerticalOffset={64}
>
<View style={styles.slide} key={i}>
<TouchableHighlight
style={styles.video}
onPress={this.handleDoubleTap}
onLongPress={this.handlePlayAndPause}
>
<ViewportAwareVideo
key={i}
source={{ uri: firstVideoUri }}
shouldPlay={this.state.shouldPlay}
isLooping
preTriggerRatio={-0.4} // default is 0
retainOnceInViewport={false} // default is false
style={styles.video}
onPlaybackStatusUpdate={this._onPlaybackStatusUpdate}
progressUpdateIntervalMillis={1000}
resizeMode='contain'
innerRef={ref => (this._videoRef = ref)}
onViewportEnter={() => {
this.setState({ shouldPlay: true });
}}
onViewportLeave={() => {
this.setState({ shouldPlay: false });
}}
/>
</TouchableHighlight>
{this.state.shouldPlay ? null : (
<TouchableHighlight
onPress={this.handlePlayAndPause}
style={styles.pauseBtn}
>
<IconComponent name='play-circle' size={50} color='black' />
</TouchableHighlight>
)}
<CopilotStep
name='swipeUp'
text='Swipe up to view next video'
order={5}
>
<WalkthroughableView style={styles.topSection}>
<Text style={styles.imageHeadingText}>{product.name}</Text>
{product.short_description === '' ? null : (
<HTML
html={product.short_description}
imagesMaxWidth={Dimensions.get('window').width}
containerStyle={styles.imageDescText}
baseFontStyle={styles.htmlStyle}
/>
)}
<CopilotStep
name='swipeRight'
text='Swipe right to view product details'
order={6}
>
<WalkthroughableView
style={{
flexDirection: 'row',
flexWrap: 'wrap',
paddingHorizontal: 20,
paddingVertical: 5
}}
>
{product.tags.map((value, index) => {
return (
<Text key={index} style={styles.tagText}>
{value.name.charAt(0) === '#'
? value.name
: '#' + value.name}
</Text>
);
})}
</WalkthroughableView>
</CopilotStep>
{product.total_sales > 0 ? (
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
paddingHorizontal: 20,
paddingVertical: 5
}}
>
<Text style={styles.totalSales}>
{product.total_sales +
(product.total_sales > 100
? '+ bought'
: ' bought in the last 24 hours')}
</Text>
</View>
) : null}
</WalkthroughableView>
</CopilotStep>
<View style={styles.bottomSection}>
<View style={{ flex: 1, justifyContent: 'flex-end', height: 30 }}>
{this.state.messages.map((message, index) => (
<React.Fragment key={index}>
<View
key={index}
style={{
flexDirection: 'row',
alignItems: 'center',
marginHorizontal: 5,
marginVertical: 5,
paddingLeft: 10,
height: 20
}}
>
<Image
style={{ width: 20, height: 20, borderRadius: 20 / 2 }}
source={{ uri: 'https://picsum.photos/20/20' }}
/>
<Text
style={{
fontFamily: Constants.fontHeader,
marginHorizontal: 5,
color: '#007AFF'
}}
>
{message.user.name}
</Text>
<Text
style={{
fontFamily: Constants.fontHeader,
marginHorizontal: 5,
color: 'white'
}}
>
{message.text}
</Text>
</View>
</React.Fragment>
))}
</View>
<CopilotStep
name='chatOnFeed'
text='Click here to chat on video feed'
order={7}
>
<WalkthroughableTextInput
style={{
// position: 'absolute',
// bottom: 0,
// left: 0,
fontFamily: Constants.fontFamily,
marginBottom: 110,
marginHorizontal: 5,
marginVertical: 5,
paddingRight: 35,
paddingLeft: 20,
height: 35,
width: width - 60,
backgroundColor: 'white',
borderRadius: 25
}}
onChangeText={messageText => this.setState({ messageText })}
value={this.state.messageText}
placeholder='Share your thoughts'
placeholderTextColor='#9B9B9B'
/>
</CopilotStep>
<IconComponent
style={{ position: 'absolute', bottom: 115, right: 10 }}
name='arrow-right'
size={25}
color='black'
onPress={product => this.sendMessage(product)}
/>
</View>
<View style={styles.iconBar}>
<CopilotStep
name='productDetail'
text='Click here to got to product details'
order={8}
>
<WalkthroughableText>
<IconComponent
style={styles.iconBarIcon}
name='shopping-cart'
size={iconSize}
color='white'
onPress={() => {
this.props.onViewProductScreen({ product });
this.setState({ shouldPlay: false });
}}
/>
</WalkthroughableText>
</CopilotStep>
<Text style={styles.iconBarText}>Shop</Text>
<CopilotStep
name='like'
text='Click here to like this product'
order={9}
>
<WalkthroughableText>
<Entypo
style={styles.iconBarIcon}
name='heart'
size={30}
color={this.state.isInWishList ? 'red' : 'white'}
onPress={() => {
this.state.isInWishList
? this.props.removeWishListItem(product)
: this.props.addWishListItem(product);
this.setState(prevState => ({
isInWishList: !prevState.isInWishList
}));
}}
/>
</WalkthroughableText>
</CopilotStep>
<Text style={styles.iconBarText}>Like</Text>
<CopilotStep
name='share'
text='Click here to share this product'
order={10}
>
<WalkthroughableText>
<IconComponent
style={styles.iconBarIcon}
name='share'
size={iconSize}
color='white'
onPress={this.onShare}
/>
</WalkthroughableText>
</CopilotStep>
<Text style={styles.iconBarText}>Share</Text>
<CopilotStep
name='fullChat'
text='Click here to view full chat'
order={11}
>
<WalkthroughableText>
<IconComponent
style={[styles.iconBarIcon, { paddingTop: 4 }]}
name='message-circle'
size={iconSize}
color='white'
onPress={product => this.sendChat(product)}
/>
</WalkthroughableText>
</CopilotStep>
</View>
</View>
</KeyboardAvoidingView>
);
You can see my problem is on IconComponent after the WalkthroughableTextInput
If you are using NativeBase component use it like this
<Content keyboardShouldPersistTaps={'handled'}>
...
</Content>
For ReactNative <ScrollView/>
<ScrollView keyboardShouldPersistTaps={'handled'}>
...
</ScrollView>
Iam developing a mobile app using React Native and Native Base with react-native-vector-icons as well. And Iam trying to add some inline label icons to my login-form, but for some reason they keep getting cut off on the right side.
I have tried taking away the padding from the Item, Icon, and Inputs but the icons are still cut off.
I then went to change the font size of the icons themselves and that still did nothing.
Does anyone know why this is caused. I've uploaded an image of my screen and the code for it as well.
Any help on this matter would be greatly appreciated.
Here is a picture of my app emulated on my Android LG V30+App Screenshot
import React, { Component } from "react";
import { Image, View, ImageBackground } from "react-native";
import {
Container,
Header,
Title,
Body,
Content,
Thumbnail,
Card,
CardItem,
Footer,
FooterTab,
Button,
Left,
Right,
Icon,
Form,
Item,
Input,
Text,
InputGroup,
List,
ListItem
} from "native-base";
class LoginScreen extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon
name="menu"
onPress={() =>
this.props.navigation.navigate("DrawerOpen")
}
/>
</Button>
</Left>
<Body>
<Title>Run For A Reason</Title>
</Body>
<Right />
</Header>
<Content
contentContainerStyle={{ flex: 1, flexDirection: "column" }}
>
<View style={{ flex: 1 }}>
<ImageBackground
source={require("../../img/background.jpg")}
style={{ flex: 1 }}
>
<View
style={{
justifyContent: "center",
alignItems: "center"
}}
>
<Image
source={require("../../img/logo.jpg")}
style={styles.logoStyle}
/>
</View>
<View
style={{
paddingTop: 150,
paddingLeft: 20,
paddingRight: 20
}}
>
<Form style={{ backgroundColor: "white" }}>
<Item
style={{
marginLeft: 0,
paddingLeft: 0
}}
>
<Icon
style={styles.iconStyles}
name="mail"
/>
<Input
style={{ paddingLeft: 0 }}
placeholder="Email"
/>
</Item>
<Item>
<Icon
style={styles.iconStyles}
name="lock"
/>
<Input placeholder="Password" />
</Item>
</Form>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<Button
primary
style={{ borderRadius: 15, marginTop: 20 }}
>
<Text>Login</Text>
</Button>
</View>
</ImageBackground>
</View>
</Content>
</Container>
);
}
}
const styles = {
iconStyles: {
color: "blue",
paddingRight: 0
},
logoStyle: {
paddingTop: 20,
width: 250,
height: 200,
alignItems: "center",
justifyContent: "center",
resizeMode: "contain"
}
};
Replace Icon with Button containing Icon and apply your style on Button component.
<Button iconLeft>
<Icon name='arrow-back' />
</Button>
can you try this
<Form style={{ backgroundColor: 'white' }}>
<Item>
<Icon style={styles.iconStyles} name='mail' />
<Input placeholder='Email' />
</Item>
<Item>
<Icon style={styles.iconStyles} name='lock' />
<Input placeholder='Password' />
</Item>
</Form>
I fixed this by increasing the width in percentages on the icon as such:
style={{width: '115%'}}
I was having the same issue because of fontSize style.
Don't use the fontSize style, instead use the size and boxSize props of the Icon component.
<Icon size={10} boxSize={20} as={MaterialIcons} name="share" />
How to enable ScrollView in horizontally and vertically both. But i don't want to use ListView. Please suggest how can i do that. I want to scroll whole render method View in both directions.
Here is my code. In this, all the TextView and TextInput appears in one line after ScrollView Settings. I want each view separately.
render() {
const { navigate } = this.props.navigation;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainerViewCamp}>
<Text style={{ padding: 5, fontSize: 35, backgroundColor: '#00BCD4', marginBottom: 7 }}>Data Slabs</Text>
<ScrollView keyboardShouldPersistTaps='always' style={styles.container}
directionalLockEnabled={false}
horizontal={true}>
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textViewContainer}>A(1,1) </Text>
<TextInput placeholder="CPR*" value={this.state.cpr1} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpr1 => this.setState({ cpr1 })} underlineColorAndroid='transparent' />
<TextInput placeholder="CPM*" value={this.state.cpm1} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpm1 => this.setState({ cpm1 })} underlineColorAndroid='transparent' />
</View>
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textViewContainer}>B(0.75,0.75) </Text>
<TextInput placeholder="CPR*" value={this.state.cpr2} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpr2 => this.setState({ cpr2 })} underlineColorAndroid='transparent' />
<TextInput placeholder="CPM*" value={this.state.cpm2} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpm2 => this.setState({ cpm2 })} underlineColorAndroid='transparent' />
</View>
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textViewContainer}>C-Default(0.5,0.5) </Text>
<TextInput placeholder="CPR*" value={this.state.cpr3} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpr3 => this.setState({ cpr3 })} underlineColorAndroid='transparent' />
<TextInput placeholder="CPM*" value={this.state.cpm3} style={styles.TextInputStyleClass}
editable={this.state.bud} keyboardType='numeric'
onChangeText={cpm3 => this.setState({ cpm3 })} underlineColorAndroid='transparent' />
</View>
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textViewContainer}>D(0.25,0.25)</Text>
<TextInput placeholder="CPR*" value={this.state.cpr4} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpr4 => this.setState({ cpr4 })} underlineColorAndroid='transparent' />
<TextInput placeholder="CPM*" value={this.state.cpm4} style={styles.TextInputStyleClass}
editable={this.state.bud} keyboardType='numeric'
onChangeText={cpm4 => this.setState({ cpm4 })} underlineColorAndroid='transparent' />
</View>
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textViewContainer}>E(0,0)</Text>
<TextInput placeholder="CPR*" value={this.state.cpr5} style={styles.TextInputStyleClass}
keyboardType='numeric'
onChangeText={cpr5 => this.setState({ cpr5 })} underlineColorAndroid='transparent' />
<TextInput placeholder="CPM*" value={this.state.cpm5} style={styles.TextInputStyleClass}
editable={this.state.bud} keyboardType='numeric'
onChangeText={cpm5 => this.setState({ cpm5 })} underlineColorAndroid='transparent' />
</View>
<TouchableOpacity
style={styles.SubmitButtonStyle}
activeOpacity={.5}
onPress={this.onSaveDataSlabs} >
<Text style={styles.TextStyle}> SAVE </Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
And here is the stylesheet:-
const styles = StyleSheet.create({
MainContainerViewCamp: {
justifyContent: 'center',
paddingTop: (Platform.OS === 'ios') ? 20 : 30,
padding: 5,
},
SwitchOuterSectionStyle: {
flexDirection: 'row',
padding: 4,
justifyContent: 'center',
alignItems: 'center'
},
textViewContainer: {
padding: 7,
fontSize: 17,
width: 150,
},
TextInputStyleClass: {
textAlign: 'left',
paddingLeft: 7,
margin: 10,
width: 150,
height: 40,
borderWidth: 1,
borderColor: '#00BCD4',
},
listViewStyle: {
borderWidth: 1,
height: 360,
borderColor: '#87ceeb',
},
SubmitButtonStyle: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
backgroundColor: '#00BCD4',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
TextStyle: {
color: '#fff',
textAlign: 'center',
}
});
Just set both directionalLockEnabled and horizontal to make it work
<ScrollView
style={styles.container}
directionalLockEnabled={false}
horizontal={true}
>
And there is a library that you can use. It's Four-way scrolling Scroller View for react-native.
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