I have a react native flat list that renders some data from a Wordpress website using wp rest api. The flat list is displaying the post correctly, and when clicked, it opens the modal, but I am having some trouble pushing the state to the modal.
Currently, when the modal opens, it shows the same (last post/item) for every item in the flat list. Any suggestions? Any help appreciated.
import React, { Component } from 'react';
import {
Image, Dimensions, View, ActivityIndicator, TouchableOpacity, TouchableHighlight,
WebView, ScrollView, StyleSheet, ImageBackground, FlatList, Text
} from 'react-native';
import Moment from 'moment';
import HTML from 'react-native-render-html';
import Modal from "react-native-modal";
export default class LatestNews extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
isLoading: true,
posts: [],
id: null,
};
}
componentDidMount() {
fetch(`http://mywebsite.com/wp-json/wp/v2/posts/?_embed&categories=113`)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
posts: responseJson,
})
})
.catch((error) => {
console.error(error);
});
}
_toggleModal = () =>
this.setState({
isModalVisible: !this.state.isModalVisible,
});
_renderItem = ({item}) => {
return (
<TouchableOpacity onPress={() => this._onPressItem(item.id)} key={item.id}>
<View>
{item._embedded['wp:featuredmedia'].filter(
element => element.id == item.featured_media
).map((subitem, index) => (
<View style={{
margin: '5%',
borderWidth: 1,
borderColor: '#d8d8d8',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.2,
shadowRadius: 8,
elevation: 1,
}}>
<ImageBackground
style={styles.news}
source={{ uri: subitem.media_details.sizes.medium.source_url }}
key={item.id}>
<View style={styles.itemTitle}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
{item.title.rendered}
</Text>
</View>
</ImageBackground>
</View>
))}
</View>
</TouchableOpacity>
)
};
_onPressItem(id) {
this.setState({
isModalVisible: true,
id: id,
});
};
render() {
if (this.state.isLoading == true) {
return (
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }}>
<ActivityIndicator size="large" color="#1C97F7" />
</View>
)
}
else {
Moment.locale('en');
return (
<View>
{this.state.posts.map((item, index) => (
<Modal isVisible={this.state.isModalVisible} id={this.state.id}>
{item._embedded['wp:featuredmedia'].filter(
element => element.id == item.featured_media
).map((subitem, index) => (
<ScrollView style={
{ flex: 1, backgroundColor: 'white', padding: 20, paddingBottom: 40,}
}>
<ImageBackground
style={styles.news}
source={{ uri: subitem.media_details.sizes.medium.source_url }}
key={item.id} />
<TouchableOpacity onPress={this._toggleModal}>
<Text>Hide me!</Text>
</TouchableOpacity>
<HTML
tagsStyles={{
body: {fontSize: 16, paddingBottom: 20,},
p: {fontSize: 16, fontWeight: "normal", marginTop: 10, marginBottom: 20},
strong: {fontSize: 20,},
blockquote: {fontSize: 20},
a: {fontSize: 16, color: "#0044e2"},
em: {fontSize: 20,},
img: {height: 250, width: 350},
}}
key={item.id}
styleName="paper md-gutter multiline"
html={item.content.rendered}
imagesMaxWidth={Dimensions.get('window').width * .9}
ignoredStyles={['width', 'height', 'video']}
/>
</ScrollView>
))}
</Modal>
))}
<FlatList
data={this.state.posts}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
/>
</View>
)
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop: 0,
},
h1: {
color: 'black',
fontSize: 24,
paddingTop: 20,
fontWeight: 'bold',
},
h2: {
color: 'black',
fontSize: 24,
paddingTop: 20,
fontWeight: 'bold',
},
h3: {
fontSize: 13,
},
button: {
width: '45%',
margin: 5,
backgroundColor: '#492661',
padding: 8,
height: 36,
borderRadius: 18,
},
buttonGrey: {
width: '45%',
margin: 5,
backgroundColor: '#353535',
padding: 8,
height: 36,
borderRadius: 18,
},
buttonText: {
color: 'black',
alignSelf: 'center',
},
highlight: {
backgroundColor: '#f5f5f5',
borderRadius: 50,
width: 100,
height: 100,
marginRight: 20,
alignItems: 'center',
justifyContent: 'center',
borderColor: 'gold',
borderWidth: 0,
},
news: {
backgroundColor: '#f5f5f5',
borderRadius: 10,
width: '100%',
height: 200,
overflow: 'hidden',
},
hero: {
backgroundColor: '#492661',
width: '110%',
height: 260,
alignSelf: 'center',
marginTop: 0,
overflow: 'hidden'
},
itemTitle: {
backgroundColor: 'rgba(255,255,255,0.9)',
paddingVertical: 10,
position: 'absolute',
bottom: 0,
right: 0,
width: '100%',
paddingHorizontal: 10,
},
});
In FlatList, this is the issue it can't re-render again if dataModel is being there. For this You can use this :
in FlatList there is a propsTypes: ExtraData={} in this you should add a new boolean state, and wherever you again add the data in flatlist . set the state for that boolean key , that would help you :
<FlatList
data={this.state.posts}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
extraData={this.state.extraData}
/>
where you want add flatList data again add this line:
this.setState({extraData:!this.state.extraData})
by this line render method run again , and you will find a new update records.
Use this, this help me.
Related
I am trying to implement text change and edit ends in TextInput using react-native but it's not quite working.
See the Screenshot Here
Currently, when changing the price by touch input, the price is not affected when click off.
Here are my files
CartItem.js:
import React from "react";
import {
View,
TextInput,
Image,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
} from "react-native";
//Colors
import Colors from "../../../utils/Colors";
//NumberFormat
import NumberFormat from "../../../components/UI/NumberFormat";
//Icon
import { MaterialCommunityIcons } from "#expo/vector-icons";
import CustomText from "../../../components/UI/CustomText";
//PropTypes check
import PropTypes from "prop-types";
export class CartItem extends React.PureComponent {
render() {
const { item, onAdd, onDes, onRemove } = this.props;
const AddItemHandler = async () => {
await onAdd();
};
const sum = +item.item.price * +item.quantity;
const checkDesQuantity = async () => {
if (item.quantity == 1) {
Alert.alert(
"Clear cart",
"Are you sure you want to remove the product from the cart?",
[
{
text: "Cancel",
},
{
text: "Yes",
onPress: onRemove,
},
]
);
} else {
await onDes();
}
};
return (
<View style={styles.container}>
<View style={styles.left}>
<Image
style={{
width: "100%",
height: 90,
resizeMode: "stretch",
borderRadius: 5,
}}
source={{ uri: item.item.thumb }}
/>
</View>
<View style={styles.right}>
<View
style={{ flexDirection: "row", justifyContent: "space-between" }}
>
<CustomText style={styles.title}>{item.item.filename}</CustomText>
<View>
<TouchableOpacity onPress={onRemove}>
<MaterialCommunityIcons name='close' size={20} color='#000' />
</TouchableOpacity>
</View>
</View>
<CustomText style={{ color: Colors.grey, fontSize: 12 }}>
Provided by Brinique Livestock LTD
</CustomText>
<NumberFormat price={sum.toString()} />
<View style={styles.box}>
<TouchableOpacity onPress={checkDesQuantity} style={styles.boxMin}>
<MaterialCommunityIcons name='minus' size={16} />
</TouchableOpacity>
Code that I would like to be fixed starts here.
<View>
<TextInput
keyboardType='numeric'
onEndEditing={AddItemHandler}
style={styles.boxText}>{item.quantity}</TextInput>
</View>
Code that I would like to be fixed ends here.
<TouchableOpacity
onPress={AddItemHandler}
style={styles.boxMin}>
<MaterialCommunityIcons name='plus' size={16} />
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
CartItem.propTypes = {
item: PropTypes.object.isRequired,
onAdd: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
onDes: PropTypes.func.isRequired,
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 10,
height: 110,
borderBottomWidth: 1,
borderBottomColor: Colors.light_grey,
flexDirection: "row",
paddingVertical: 10,
alignItems: "center",
backgroundColor: "#fff",
paddingHorizontal: 10,
borderRadius: 5,
marginTop: 5,
},
left: {
width: "35%",
height: "100%",
alignItems: "center",
},
right: {
width: "65%",
paddingLeft: 15,
height: 90,
// overflow: "hidden",
},
title: {
fontSize: 14,
},
box: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: Platform.OS === "ios" ? 30 : 25,
backgroundColor: Colors.grey,
width: 130,
borderRadius: 5,
paddingHorizontal: 15,
marginTop: 5,
},
boxMin: {
width: "30%",
alignItems: "center",
},
boxText: {
fontSize: 16,
backgroundColor: Colors.white,
padding: 5,
},
});
Use onBlur instead of onEndEditing.
How should the input end triggered?
After a time?
When user hits enter?
When user taps anywhere to close software keyboard?
Instead of
onEndEditing={AddItemHandler}
Use:
onBlur={(e) => {AddItemHandler(e.nativeEvent.text)}}
And ensure that AddItemHandler can handle the value in e.nativeEvent.text.
I have only two buttons, and I want their backgroundColor to be changed when pressing. I don't want to use map as there are only two buttons. I have tried some ways to approach what I expect, but I am at a loss what to do.
RoundedButtonSet :
const styles = StyleSheet.create({
container: {
marginBottom: 20,
},
});
const RoundedButtonSet = ({ firstBtn, secondBtn, contentStyle }) => {
return (
<View style={[styles.container, contentStyle]}>
<RoundedButtons firstBtn={firstBtn} secondBtn={secondBtn} />
</View>
);
};
RoundedButtons :
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
marginHorizontal: 15,
height: 40,
alignItems: 'center',
},
btn: {
flex: 1,
borderWidth: 1,
borderColor: colors.very_light_pink,
borderRadius: 6,
paddingVertical: 13,
height: 40,
},
btnTextStyle: {
fontSize: 12,
fontWeight: 'normal',
color: colors.very_light_pink_five,
textAlign: 'center',
},
left: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
borderColor: colors.very_light_pink,
},
right: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeftWidth: 0,
},
backgroundColor: {
backgroundColor: colors.iris,
},
textColor: {
color: colors.white_two,
},
});
const RoundedButtons = ({ firstBtn, secondBtn, contentStyle, onPress }) => {
const [isClicked, setIsClicked] = useState(true);
return (
<View style={[styles.container, contentStyle]}>
<TouchableOpacity
style={[styles.btn, styles.left, isClicked && styles.backgroundColor]}
onPress={() => setIsClicked(!isClicked)}
>
<Text style={[styles.btnTextStyle, isClicked && styles.textColor]}>
{firstBtn}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.btn, styles.right]}
onPress={() => setIsClicked()}
>
<Text style={[styles.btnTextStyle]}>{secondBtn}</Text>
</TouchableOpacity>
</View>
);
};
RoundedButtons.propTypes = {
firstBtn: Text.propTypes,
secondBtn: Text.propTypes,
};
export default RoundedButtons;
Should I give index directly to each button? I have got this idea, but the problem is I have no idea how to access..
You can have a simple state to keep track of which button is pressed and use that to apply styles conditionally.
Here is the working example: Expo Snack
import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
marginHorizontal: 15,
height: 40,
alignItems: 'center',
},
btn: {
flex: 1,
borderWidth: 1,
borderColor: 'pink',
borderRadius: 6,
paddingVertical: 13,
height: 40,
},
btnTextStyle: {
fontSize: 12,
fontWeight: 'normal',
color: 'pink',
textAlign: 'center',
},
left: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
borderColor: 'pink',
},
right: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeftWidth: 0,
},
backgroundColor: {
backgroundColor: 'black',
},
textColor: {
color: 'white',
},
});
const RoundedButtons = ({ firstBtn, secondBtn, contentStyle, onPress }) => {
const [clickedBtn, setIsClicked] = useState(null);
React.useEffect(() => {
console.log(clickedBtn);
}, [clickedBtn]);
return (
<View style={[styles.container, contentStyle]}>
<TouchableOpacity
style={[
styles.btn,
styles.left,
clickedBtn == 1 && styles.backgroundColor,
]}
onPress={() => setIsClicked(1)}>
<Text
style={[styles.btnTextStyle, clickedBtn == 1 && styles.textColor]}>
firstBtn
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.btn,
styles.right,
clickedBtn == 2 && styles.backgroundColor,
]}
onPress={() => setIsClicked(2)}>
<Text
style={[styles.btnTextStyle, clickedBtn == 2 && styles.textColor]}>
secondBtn
</Text>
</TouchableOpacity>
</View>
);
};
RoundedButtons.propTypes = {
firstBtn: Text.propTypes,
secondBtn: Text.propTypes,
};
export default RoundedButtons;
I am designing an app in React Native and the problem I am facing right now is when I try to type in the TextBox, the keypad comes up and it pushes up or out the view changing height dynamically of other views too. Please check the Before and After image below:
The Code:
import React, { Component } from 'react';
import t from 'tcomb-form-native'; // 0.6.9
const Form = t.form.Form;
import {
StyleSheet,
View,
KeyboardAvoidingView,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
const styles = StyleSheet.create({
parentSectionContainer: {
flex: 1,
justifyContent: 'space-evenly',
backgroundColor: '#F1F0F2'
},
SignupFormParent: {
marginTop: 100,
alignSelf: 'center',
backgroundColor: '#FFFFFF',
height: '45%',
width: '85%',
borderRadius: 100,
shadowColor: '#2AC062',
shadowOpacity: 0.4,
shadowOffset: { height: 10, width: 0 },
shadowRadius: 20,
},
textMelow: {
width: RFPercentage(10),
fontSize: RFPercentage(2),
fontWeight: "normal",
color: '#FFFFFF',
textTransform: 'uppercase',
fontStyle: 'normal'
},
textBold: {
width: RFPercentage(10),
fontSize: RFPercentage(2),
fontWeight: "bold",
color: '#FFFFFF',
textTransform: 'uppercase',
fontStyle: 'normal'
},
btnContainer: {
paddingTop: 8,
width: '100%',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignContent: 'center'
},
signupBodyStyle: {
position: "absolute",
bottom: 0,
width: '90%',
marginBottom: 20,
},
signinSignupButtonsBtnsContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%'
},
signupButtonBodyStyle: {
flex: 1,
backgroundColor: '#8A56AC',
borderRadius: 100,
alignItems: 'center',
padding: 25
},
signinSignupTextStyle: {
color: '#FFFFFF',
fontSize: 18,
}
});
const User = t.struct({
name: t.String,
email: t.String,
password: t.String,
"Confirm Password": t.String,
location: t.String
});
const SignupForm = (props) => {
const options = {
auto: 'placeholders',
};
return (
<View style={styles.SignupFormParent}>
<View style={{ paddingLeft: 20, paddingRight: 20, marginTop: 80 }}>
{/* <Text style={styles.text}>FORM</Text> */}
<Form type={User} options={options}/>
</View>
</View>
);
};
const ContinueButton = (props) => {
const { onPress, style } = props;
return (
<TouchableOpacity onPress={onPress} style={style.bodyStyle}>
<View
style={style.buttonStyle}>
<Text style={style.textStyle}>{props.title}</Text>
</View>
</TouchableOpacity>
);
}
export default class SignUpView extends Component {
// constructor(props) {
// }
fetch('${Config.IP}:${Config.PORT}/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: 'jayndoe#foobar.com',
password: "jynd1234",
}),
})
.then(response => response.json())
.then(responseJson => {
ToastAndroid.showWithGravity(
JSON.stringify(responseJson),
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
})
.catch(error => {
ToastAndroid.showWithGravity(
JSON.stringify(error),
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
})
}
render() {
return(
<View style={styles.parentSectionContainer}>
<KeyboardAvoidingView style={{ position: 'absolute', top: 0, width: '100%', backgroundColor: '#8A56AC', height: '30%', borderBottomLeftRadius: 120 }}/>
<View style={{ position: 'absolute', top: 50, width: '100%', flexDirection: 'row', justifyContent: 'space-evenly', margin: 'auto' }}>
<Text style={styles.textBold}>LOG IN</Text>
<Text style={styles.textMelow}>SIGN UP</Text>
</View>
<SignupForm
title="SIGN UP USING INSTAGRAM"
onPress={() => {this.instagramSSO()}}
style={{formStyles: styles.formStyles}}
/>
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center' }}>
<ContinueButton
title="CONTINUE"
style={{ bodyStyle: styles.signinBodyStyle, buttonStyle: styles.signinButtonBodyStyle, textStyle: styles.signinSignupTextStyle }}
onPress={() => Alert.alert('Please sign-in!!')}
/>
</View>
</View>
);
}
}
Appreciate any help in resolving this issue :)
This is because of the absolute positionning of your views,
I think you used it because you needed to put the white input wrapper on top of the purple one view. Maybe you could remove the absolute positionning and use negative paddingTop on the white wrapper instead ? I am not sure how to achieve this using good practices, but that could prevent the keyboardavoidingview to push your other components.
I have a component Logitem.js which has a DatePickerIOS component.
The component works as expected but for some reason the datepicker component's layout is messed up as shown below.
Ideally the datepicker component should be on top followed by the two buttons (with adequate space between datepicker component and the buttons)
Logitem.js code
import React, { Component } from 'react';
import { Text, View, Modal, DatePickerIOS, TextInput, TouchableHighlight } from 'react-native';
export default class Logitem extends Component {
state = {
//selecteddate: '1',
selectedweight: this.props.weight,
showmodal: false,
selecteddate: new Date(86400000 * this.props.logdate),
}
componentDidMount() {
console.log('State ==> '+this.state.selecteddate+' Logstring date ==> '+this.props.logstringdate);
}
deleteSelectedRecord(){
this.setState({ showmodal: false });
this.props.invokedelete(this.state.selecteddate);
}
saveSelectedRecord(){
this.setState({ showmodal: false });
this.props.invokesave(this.state.selecteddate, this.state.selectedweight);
}
onWeightClick = () => {
this.setState({ showmodal: true }, () => {
});
}
onDateChange(date) {
this.setState({
selecteddate: date
});
}
render() {
return (
<View style={styles.containerStyle}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.showmodal}
onRequestClose={() => { alert("Modal has been closed.") }}
>
<View style={{ marginTop: 22 }}>
<DatePickerIOS
date={this.state.selecteddate}
mode="date"
onDateChange={(date) => this.onDateChange(date)}
style={{ height: 100, width: 300 }}
/>
</View>
<View style={{ marginTop: 22, borderColor: '#ddd', borderWidth: 5 }}>
<TextInput
returnKeyType="done"
keyboardType='numeric'
style={{
height: 40,
width: 60,
borderColor: 'gray',
borderWidth: 1,
}}
onChangeText={(text) => this.setState({ selectedweight: text })}
value={this.state.selectedweight.toString()}
/>
<Text>KG</Text>
<TouchableHighlight style={styles.buttonstyle} onPress={this.deleteSelectedRecord.bind(this)}>
<Text style={styles.buttontextstyle}>Delete</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.buttonstyle} onPress={this.saveSelectedRecord.bind(this)}>
<Text style={styles.buttontextstyle}>Save</Text>
</TouchableHighlight>
</View>
</Modal>
<View style={styles.headerContentStyle}>
<Text>{this.props.logstringdate}</Text>
<Text>{this.props.bmi}</Text>
</View>
<View style={styles.thumbnailContainerStyle}>
<Text onPress={this.onWeightClick}>{this.props.weight}</Text>
</View>
</View>
);
}
};
const styles = {
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 1,
//shadowColor: '#000',
//shadowOffset: { width: 0, height: 2},
//shadowOpacity: 0.1,
//shadowRadius: 2,
//elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop:10,
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
marginRight: 10,
flexDirection: 'row'
},
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
buttonstyle: {
marginRight: 40,
marginLeft: 40,
marginTop: 10,
paddingTop: 20,
paddingBottom: 20,
backgroundColor: '#68a0cf',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
buttontextstyle: {
color: '#fff',
textAlign: 'center',
}
};
I'm making an app in React Native and I want align a circle with the end of page.
I want to make this:
But it's currently like this and only stays this way:
The complete view:
[
I already tried alignSelf, justifyContent and others but it doesn't work.
I tested this: How to align 2 react native elements, 1 being in the center and 1 on the beginning
But it won't work.
My code:
const ListProductsHeader = () => (
<View>
<View style={style.containerInfo}>
<View style={style.circle} />
<View>
<Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
<Text style={style.subInfo}>Categoria: Mercado</Text>
<Text style={style.subInfo}>Pedido Nº: 1245</Text>
</View>
</View>
<View style={style.containerProducts}>
<Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
<View style={style.minus}></View>
</View>
</View>
);
CSS:
containerProducts:{
paddingTop: 40,
paddingLeft: 15,
flexDirection: 'row',
},
productName: {
alignSelf: 'flex-start',
},
minus:{
width: 20,
height: 20,
borderRadius: 20/2,
backgroundColor: 'red',
},
containerInfo:{
paddingTop:15,
flexDirection:'row',
paddingLeft: 15,
},
unityName:{
fontWeight: 'bold',
paddingLeft: 15,
},
subInfo:{
color: 'gray',
paddingLeft: 15,
},
circle: {
width: 50,
height: 50,
borderRadius: 50/2,
backgroundColor: 'red',
justifyContent: 'flex-end',
},
Lkke to suggest one thing that can help you with this problem
what you need to do is. Everthing is correct except the main view css
<View style={flexDirection:'row',justifyContent : 'space-between'}>
<View style={style.circle} />
<View>
<Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
<Text style={style.subInfo}>Categoria: Mercado</Text>
<Text style={style.subInfo}>Pedido Nº: 1245</Text>
</View>
</View>
<View style={style.containerProducts}>
<Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
<View style={style.minus}></View>
</View>
try this may be it can help you
containerProducts: {
paddingTop: 40,
paddingLeft: 15,
flexDirection: 'row',
justifyContent: 'space-between',
},
Fully Customisable chat in React Native
import React, {Component} from 'react';
import {
Text,
StyleSheet,
View,
TextInput,
TouchableOpacity,
SafeAreaView,
FlatList,
} from 'react-native';
export default class CustomChatScreen extends Component {
state = {
messages: [
{
msg: 'Heloo',
id: Math.random(),
token: '',
email: '',
type: 'server',
},
{
msg: 'Server Message',
id: Math.random(),
token: '',
email: '',
type: 'server',
},
],
value: '',
};
sendMessageToServer = () => {
if (this.state.value !== '') {
let payload = {
msg: this.state.value,
id: Math.random(),
token: '',
email: '',
type: 'client',
};
let mydata = this.state.messages;
mydata.push(payload);
this.setState({
messages: mydata,
value: '',
});
}
};
renderFlatListItem = rowData => {
return (
<View style={styles.flatListContainerStyle}>
{rowData.item.type === 'client' ? (
<View style={styles.clientMsgStyle}>
<Text>{rowData.item.msg}</Text>
</View>
) : (
<View style={styles.serverMsgStyle}>
<Text>{rowData.item.msg}</Text>
</View>
)}
</View>
);
};
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.messages}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderFlatListItem}
/>
<View style={styles.sendMessageConatinerStyle}>
<TextInput
style={styles.sendMsgTextInputStyle}
value={this.state.value}
placeholder = {"please type here!"}
placeholderTextColor = {"#000"}
onChangeText={val => this.setState({value: val})}></TextInput>
<TouchableOpacity
style={styles.sendMsgButtonStyle}
onPress={this.sendMessageToServer}>
<Text>Send Message</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
sendMessageConatinerStyle: {
width: '100%',
height: 60,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'white',
flexDirection: 'row',
},
sendMsgTextInputStyle: {
backgroundColor: '#e0f2f1',
flex: 0.8,
borderTopLeftRadius: 62.5,
borderBottomLeftRadius: 62.5,
padding: 20,
},
sendMsgButtonStyle: {
flex: 0.2,
backgroundColor: '#80cbc4',
borderBottomRightRadius: 62.5,
borderTopRightRadius: 62.5,
fontSize: 18,
justifyContent: 'center',
alignItems: 'center',
},
flatListContainerStyle: {
backgroundColor: '#e0f7fa',
marginTop: 10,
},
clientMsgStyle: {
backgroundColor: '#ffab91',
borderRadius: 20,
padding: 15,
alignSelf: 'flex-end',
},
serverMsgStyle: {
backgroundColor: '#4fc3f7',
borderRadius: 20,
padding: 15,
alignSelf: 'flex-start',
},
});