I am trying to make a 1:1 chat, however when I try to tap on the TextInput the KeyboardAvoidingView is not working, I am not sure if this is something with my styles or if I am not using it correctly, here you can find my snack
And this is the code:
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: 'Write a message...',
text: ''
};
}
render() {
return (
<KeyboardAvoidingView style={{flex: 1, marginTop: 20}} behavior="padding" enabled>
<View style={styles.messageView}>
<Message
message="Hi! First Message"
styleMessage={'one'}
/>
<Message
message="Hi! Second Message"
styleMessage={'two'}
/>
</View>
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
selectionColor={BLUE}
placeholderTextColor={LIGHT_GRAY}
onChangeText={(text) => this.setState({text})}
placeholder={this.state.placeholder}
value={this.state.text}
onEndEditing={() => {console.log(1+1)}}
/>
</View>
<TouchableHighlight style={styles.sendButton}>
<Ionicons name="md-send" size={25} color='#FFFFFF' style={{textAlign: 'center'}}/>
</TouchableHighlight>
</View>
</KeyboardAvoidingView>
);
}
}
in this Context you only need to change
behavior="padding"
for
behavior="height"
and it will starts working correctly on both plataforms (Android/iOS)
Personally I recommend you to use instead KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view package (Link) because it let you configure easier and faster the behavior of it.
Related
I made 2 screens one home screen and 2nd edit screen I need to edit data of home screen from edit screen and save it and that data should also update in home and detail screen. How can I do this without redux or context. Can anyone tell me.
Home.js
class Home extends Component {
state = {
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
],
};
render() {
return (
<FlatList
data={this.state.post}
renderItem={({ item }) => (
<>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.props.navigation.navigate("Edit", item)}
style={styles.Edit}
>
<MaterialCommunityIcons
name="playlist-edit"
color="green"
size={35}
/>
</TouchableOpacity>
<Card
title={item.title}
subTitle={item.des}
image={item.image}
onPress={() => this.props.navigation.navigate("Details", item)}
/>
</>
)}
/>
Edit.js
class ListDetails extends Component {
render() {
const listing = this.props.route.params;
return (
<View>
<Image style={styles.image} source={listing.image} />
<View style={styles.detailContainer}>
<AppTextInput value={listing.title} />
<AppTextInput value={listing.des} />
</View>
<AppButton
text="Save"
onPress={() => this.props.navigation.goBack("Home")}
/>
</View>
Details.js
const listing = this.props.route.params;
return (
<View>
<Image style={styles.image} source={listing.image} />
<View style={styles.detailContainer}>
<Text style={styles.title}>{listing.title}</Text>
<Text style={styles.des}>{listing.des}</Text>
</View>
</View>
);
You can pass a function from your home screen to setState for it in your edit screen. In case navigating to edit screen causes the home screen unmounted, you can change the navigate method to push of stack navigator (I haven't tested yet). The code now should look like:
HomeScreen.js:
onEdit=(data)=>{
setState(...);
}
...
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.props.navigation.navigate("Edit", {item, onEdit})} //use push instead if error occured
style={styles.Edit}
>
...
Edit.js
class ListDetails extends Component {
render() {
const {item:listing, onEdit} = this.props.route.params;
return (
<View>
<Image style={styles.image} source={listing.image} />
<View style={styles.detailContainer}>
<AppTextInput value={listing.title} />
<AppTextInput value={listing.des} />
</View>
<AppButton
text="Save"
onPress={() => { onEdit(...); this.props.navigation.goBack("Home");}}
/>
</View>
Dynamically generate a TextInput when you press a button but I can’t get the value that the user digits,try to use states but I can’t because it’s not with the other general textInputs but it’s imported as Field.
try to create a state in the component file and move it to the general view and print it to see if it works and not...is there any way to bring this state?
general view:
import Campo from './campoInput';
constructor(props){
super(props);
this.state={
Cbusto:"",
Ccintura:"",
Ccadera:"",
valueArray: []
};
this.addNewEle = false;
}
agregarCampo=()=>{
this.addNewEle = true;
const newlyAddedValue = { text: 'prueba'};
this.setState({
valueArray: [...this.state.valueArray, newlyAddedValue]
});
}
render(){
return(
------Here are the normal textInput-----
<View style={{ flex: 1, padding: 4 }}>
{this.state.valueArray.map((ele) => {
return <Campo item={ele} />;
})}
</View>
<View style={styles.flex}>
<View style={styles.ButtonAdd}>
<Button
title="Add input"
color="#B13682"
onPress={this.agregarCampo}
></Button>
</View>
)
}
Component:
constructor(props){
super(props);
this.state={
info:""
};
}
render(){
return(
<View>
<Text>pruba:{this.props.item.text}</Text>
<View style={styles.input}>
<TextInput onChangeText={(text) => this.setState({info:text})}></TextInput>
</View>
</View>
)
}
can be solved by adding the onChangeText event to the Field component in the overview and in the same way in the TextInput of the component being imported, using props status
General view:
<View style={{ flex: 1, padding: 4 }}>
{this.state.valueArray.map((ele) => {
return <Campo item={ele}
onChangeText={(text) => this.setState({ info: text })}
/>;
})}
</View>
Component
<View>
<Text>pruba:{this.props.item.text}</Text>
<View style={styles.input}>
<TextInput onChangeText={this.props.onChangeText}></TextInput>
</View>
</View>
I want to copy value inside textview by clicking to icon. This is what I've done so far:
render() {
return (
<View style={{marginTop: 50, marginLeft: 50}}>
<View>
<Text>Логин:</Text>
<Text ref='myText'>45645546654</Text>
</View>
<TouchableOpacity onPress={() => Clipboard.setString(this.refs.myText.props.children)}>
<View>
<MaterialIcons
name='content-copy'
size={21}
/>
</View>
</TouchableOpacity>
</View>
);
}
Workspace: https://snack.expo.io/#jasurkurbanov/updated2
It is somewhat working on snack. But what when I am running it on my phone I am getting error.
Undefinied is not an object ('evaluating '_this.refs.myText.props.children')
You should defined your refs variable on constructor().
for example:
constructor() {
...
this.textViewRefs = React.createRef();
...
}
render() {
return (
...
<Text ref={this.textViewRefs}>45645546654</Text>
...
)
}
look this https://reactjs.org/docs/forwarding-refs.html for further information
I am trying to make cards clickable and expandable, but when updating state, it occurs in all the cards . I just want to make the state change in only one card (the one on which the event occurred , in this case, a click event).
However, the state gets updated for every other cards. Currently this does work on one item but it needs to work on others too.
export default class TransactionCards extends React.Component {
constructor(props) {
super(props);
this.state = {
isHidden: true
};
}
toggleHidden() {
this.setState({
isHidden: !this.state.isHidden
});
}
renderCards() {
return this.props.data.map((card, index) => (
<View key={card.id}>
<View style={styles.dateContainer}>
<Text style={styles.dateText}>{card.time}</Text>
</View>
<Card>
<TouchableWithoutFeedback onPress={this.toggleHidden.bind(this)}>
<View>
<View>
<View style={styles.transactionContainer}>
<Image
style={styles.countryImage}
source={require("../../assets/images/us-country-icon.png")}
/>
<Text style={styles.transactionTitle}>{card.title}</Text>
<Text style={styles.transactionAmount}>{card.cost}</Text>
<Icon
name={card.transactionType == "debit" ? "log-out" : "log-in"}
type="feather"
color={card.transactionType == "debit" ? "red" : "green"}
size={18}
iconStyle={styles.transactionIcon}
/>
</View>
<View>
<Text style={styles.transactionBankDetails}>{card.bankDetails}</Text>
</View>
</View>
{/* Setting visiblity condition */}
{!this.state.isHidden && (
<View>
<Divider style={styles.CardItemDivider} />
<View display="flex" flexDirection="row" justifyContent="space-between">
<View>
<Text style={styles.transactionBankDetails}>
{card.transactionCategory}
</Text>
<Text style={styles.transactionBankDetails}>{card.accountName}</Text>
</View>
<View>
<Icon name="bell" type="feather" iconStyle={styles.transactionIcon} />
</View>
</View>
</View>
)}
</View>
</TouchableWithoutFeedback>
</Card>
</View>
));
}
render() {
return <ScrollView showsVerticalScrollIndicator={false}>{this.renderCards()}</ScrollView>;
}
}
Create a new component for card and pass required params
Do the toggleHidden function inside the Card component
then inside the file it should look like
<Card {SetYourPassedParams} />
......
You have two items connected to the same state value on the same state. If you want to separate the behaviours you have to separate the values too.
i am very new to this platform , it my 2nd day on this. i trying to learn it by myself by creating simple login , sign up , news feed application . i am able to build login page but while getting values from InputText , it display me error saying "Can not specify both value and Children" , Here i am posting my login.js class
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
login = () => {
alert(this.state.username + " " + this.state.password);
}
render() {
return (
<View style={styles.container}>
<Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
<View style={styles.content}>
<Image source={require('../images/logo.png')} style={styles.logo}>
</Image>
<View style={styles.inputcontainer}>
<TextInput underLineColorAndroid='transparent' style={styles.input} value={this.state.username} onChangeText={(username) => this.setState({ username })} placeholderText='username' > </TextInput>
<TextInput secureTextEntry={true} underLineColorAndroid='transparent' style={styles.input} value={this.state.password} onChangeText={(password) => this.setState({ password })} placeholderText='password' placeholderTextColor='black'> </TextInput>
</View>
<TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</Image>
</View>
);
}
}
Please let me know where i am going wrong in code
Regards
Can you please try this
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {username: '',password: ''};
}
login = () => {
alert(this.state.username + " " + this.state.password);
}
render() {
return (
<View style={styles.container}>
<Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
<View style={styles.content}>
<Image source={require('../images/logo.png')} style={styles.logo}>
</Image>
<View style={styles.inputcontainer}>
<TextInput
underLineColorAndroid='transparent'
style={styles.input}
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })}
placeholderText='username'/>
<TextInput
secureTextEntry={true}
underLineColorAndroid='transparent'
style={styles.input}
value={this.state.password}
onChangeText={(text) => this.setState({ password:text })}
placeholderText='password'
placeholderTextColor='black'/>
</View>
<TouchableOpacity onPress={this.login()} style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</Image>
</View>
);
}