I want to remove keyboard toolbar. You can see Image. please tell me how can i remove keyboard toolbar.
here is my code:
<View style={styles.mainContainer}>
<View style={styles.messagesContainer}>
<FlatList
inverted={true}
data={messages}
renderItem={({ item }) => {
const newDate = new Date(item.createdAt)
return (
<View style={item.user._id === 1 ? styles.messageTextContainer2 : styles.messageTextContainer}>
<Text style={item.user._id === 1 ? styles.messageText2 : styles.messageText}>{item.text}</Text>
<Text style={item.user._id === 1 ? styles.timeText2 : styles.timeText}>{newDate.toLocaleTimeString()}</Text>
</View>
)
}}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
autoCorrect={false}
onChangeText={setText}
style={styles.input}
placeholder="Type a message..."
value={text}
/>
<TouchableOpacity style={styles.sendContainer}>
<Text onPress={() => onSend()} style={styles.sendText}>Send</Text>
</TouchableOpacity>
</View>
</View>
Related
After a lot of research, I'm getting this error every time I enter text into the message box.
I've removed a lot of code - so the issue is with the TextInput and var state{ ... }
I have no idea what to do
I plan on submitting the data to an SQLite database in the future, but for now, I'm just trying to capture the text input on the button press - I found a script online, but it doesn't work.
const JournalNewEntryScreen = ({navigation}) => {
const messageImage = require('./images/Imatter-icons-13.png');
const homeImage = require('./images/Imatter-icons-14.png');
const settingsImage = require('./images/Imatter-icons-11.png');
const journalHomeImage = require('./images/Imatter-icons-09.png');
const cancelAlert = () =>
Alert.alert(
"Are You Sure?",
"Any content will be deleted and cannot be recovered",
[
{
text: "Cancel",
style: "cancel"
},
{ text: "Yes, I'm Sure",
onPress: () => navigation.navigate("JournalHome") }
]
);
var state = {
message: '',
}
const getValues = () => {
console.log(this.state.message);
}
return (
<>
<StatusBar barStyle='dark-content' />
<SafeAreaView style={homePage.flexContainer}>
<View style={{ flex: 1 }}>
<ScrollView>
<View style={JournalNewEntryPage.container}>
<Image
source={require("./assets/images/cropped-img_1619-1-e1610564001477.png")}
resizeMode="contain"
style={JournalNewEntryPage.image}>
</Image>
<Text style={JournalNewEntryPage.myJournal}>New Journal Entry</Text>
<Text style={JournalNewEntryPage.descriptionText}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</Text>
<Text style={JournalNewEntryPage.messageText}>
Type a message
</Text>
<TextInput
multiline
editable
numberOfLines={4}
style={JournalNewEntryPage.textBox}
onChangeText={(text) => this.setState({ message: text })}
/>
<Text style={JournalNewEntryPage.messageText}>
Attach a file:
</Text>
<Text style={JournalNewEntryPage.upload}>
+ Add a photo, audio or video file
</Text>
<TouchableOpacity onPress={() => this.getValues()}>
<Text style = {JournalNewEntryPage.journalButton}>
Save Entry
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={cancelAlert}>
<Text style = {JournalNewEntryPage.journalButton}>
Cancel
</Text>
</TouchableOpacity>
<View style = {custom.spacer10}></View>
</View>
</ScrollView>
</View>
{/* <Button title="Reload" onPress={() => navigation.navigate('Home')}/> */}
<View style={homePage.tabBarContainer}>
<View style={homePage.column}>
<TouchableOpacity onPress={hide ? dataButtonHandler : onPress1}>
<Text style={hide ? homePage.button : homePage.codeButton}>{hide ? "Data" : "XXXXXX"}</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<Image style={homePage.navImage} source={homeImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
<Image style={homePage.navImage} source={journalHomeImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={messagesButtonHandler}>
<Image style={homePage.navImage} source={messageImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Settings')}>
<Image style={homePage.navImage} source={settingsImage}/>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={hide ? logButtonHandler : onPress3}>
<Text style={hide ? homePage.button : homePage.codeButton}>{hide ? "Logs" : "XXXXXX"}</Text>
</TouchableOpacity>
</View>
</View>
<View style={homePage.tabBarContainerText}>
<View style={homePage.column}>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<Text style={homePage.button}>Home</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
<Text style={homePage.button}>Journal</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={messagesButtonHandler}>
<Text style={homePage.button}>Messages</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
<TouchableOpacity onPress={() => navigation.navigate('Settings')}>
<Text style={homePage.button}>Settings</Text>
</TouchableOpacity>
</View>
<View style={homePage.column}>
</View>
</View>
</SafeAreaView>
</>
);
};
Image of error
You're using functional component not class-based, so this is not the way to go with declaring states and setState, this only works with class-based component.
So you need to check this doc out for handling states with React Hooks https://reactnative.dev/docs/state
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 use library react-native-app-intro-slider
I make custom renderPagination, but I can't use goToSlide method in library.
I've already tried custom Pagination Login Signup Buttons, but I can't use too.
This is my code:
const _renderPagination = (activeIndex) => {
return (
<View style={style.paginationContainer}>
<SafeAreaView>
<View style={style.paginationDots}>
{slides.length > 1 &&
slides.map((_, i) => (
<TouchableOpacity
key={i}
style={[
style.dot,
i === activeIndex
? {backgroundColor: '#9948fc'}
: {backgroundColor: 'rgba(0, 0, 0, .2)'},
]}
onPress={() => goToSlide(activeIndex, true)} //Error
/>
))}
</View>
{activeIndex === slides.length - 1 ? (
<View>
<TouchableOpacity
style={[style.button, {backgroundColor: '#9948fc'}]}
onPress={() => navigation.navigate('signup')}
>
<Text style={style.buttonText}>회원가입</Text>
</TouchableOpacity>
<TouchableOpacity
style={[style.button, {backgroundColor: 'transparent'}]}
onPress={()=> navigation.navigate('signup', {log:1})}>
<Text style={[style.buttonText, {color: '#707070'}]}>
로그인
</Text>
</TouchableOpacity>
</View>
) : (
<View>
<TouchableOpacity
style={[style.button, {backgroundColor: 'transparent'}]}
><Text style={style.buttonText}/></TouchableOpacity>
<TouchableOpacity
style={[style.button, {backgroundColor: 'transparent'}]}
onPress={() => goToSlide(activeIndex+1, true)}
>
<Text style={[style.buttonText, {color: '#707070'}]}>
다음
</Text>
</TouchableOpacity>
</View>
)}
</SafeAreaView>
</View>
);
};
i just want to add the solution in functional component. This works for me:
const slider = useRef();
return(
<AppIntroSlider
renderItem={renderItem}
data={slides}
onDone={onDone}
showNextButton={true}
ref={(ref) => (slider.current = ref)} // the ref
/>
);
onPress={() => slider.current.goToSlide(1, true)}
The problems is :
You have to set your reference from your AppIntroSlider Tag like:
render() {
return (
<View style={{flex: 1}}>
<StatusBar translucent backgroundColor="transparent" />
<AppIntroSlider
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
renderPagination={this._renderPagination}
data={data}
ref={(ref) => (this.slider = ref)} //Here~~~~~~~~~~~~~~~!!!!!
/>
</View>
);
}
}
So that you could call goToSlide() like this:
<TouchableOpacity
key={i}
style={[
styles.dot,
i === activeIndex
? {backgroundColor: 'white'}
: {backgroundColor: 'rgba(0, 0, 0, .2)'},
]}
onPress={() => this.slider.goToSlide(i, true)} //Here~~~~~~~~!!! From the reference
/>
DOC example
I am new in react native and I need to show and hide for text input on each comment reply option.How to unique each and every section so I can hide and show text input for each button click.
Here is my flat list:
<FlatList
data={item.comments}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowItem}
extraData={this.state}
/>
Here is render row item:
renderRowItem = (itemData) => {
Moment.locale('en');
return (
<View style={styles.commentSection}>
<View style={{flexDirection:'row'}}>
<View style={{flex:1,flexDirection:'row'}}>
<Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
source={{ uri: this.state.profile_image }} resizeMode='cover' />
<View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
<View style={{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:'600',fontSize:14}}>
{itemData.item.firstName} {itemData.item.surname}</Text>
<Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
{Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
</View>
<Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
{itemData.item.comment}</Text>
<Text onPress={this.ShowHideTextComponentView} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
Reply</Text>
<View>
<FlatList
data={itemData.item.replies}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowReply}
/>
</View>
<View>
{
this.state.replyboxShow ?
<View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
<TextInput
style = {[styles.inputReplyBox,
!this.state.postValidate ? styles.error : null]}
placeholder="Enter message here"
placeholderTextColor="grey"
onChangeText = {reply => this.setState({reply})}
/>
<TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
onPress={() => this.replyCom(itemData.item._id)}>
<Icon name="paper-plane-o" size={20} color="#F766FF" />
</TouchableOpacity>
</View>
: null
}
</View>
</View>
</View>
</View>
</View>
)
}
In the end of render item I am using reply button and on click I want to show and hide each text input fields:
This is design I need to implement.
My ShowHideTextComponentView function:
ShowHideTextComponentView = () =>{
if(this.state.replyboxShow == true){
this.setState({replyboxShow: false})
}else{
this.setState({replyboxShow: true})
}
}
With your replyboxShow state, all the item will be showing or hiding,
i create a replyboxShowId state to save the item_id of the element
you want to show.
renderRowItem = (itemData) => {
Moment.locale('en');
return (
<View style={styles.commentSection}>
<View style={{flexDirection:'row'}}>
<View style={{flex:1,flexDirection:'row'}}>
<Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
source={{ uri: this.state.profile_image }} resizeMode='cover' />
<View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
<View style={{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:'600',fontSize:14}}>
{itemData.item.firstName} {itemData.item.surname}</Text>
<Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
{Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
</View>
<Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
{itemData.item.comment}</Text>
<Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
Reply</Text>
<View>
<FlatList
data={itemData.item.replies}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowReply}
/>
</View>
<View>
{
this.state.replyBoxShowId === itemData.item._id ?
<View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
<TextInput
style = {[styles.inputReplyBox,
!this.state.postValidate ? styles.error : null]}
placeholder="Enter message here"
placeholderTextColor="grey"
onChangeText = {reply => this.setState({reply})}
/>
<TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
onPress={() => this.replyCom(itemData.item._id)}>
<Icon name="paper-plane-o" size={20} color="#F766FF" />
</TouchableOpacity>
</View>
: null
}
</View>
</View>
</View>
</View>
</View>
)
}
ShowHideTextComponentView:
ShowHideTextComponentView = (id) =>{
this.setState({
replyBoxShowId : id
})
}
My problem so far, is following: I'm getting Tweets from Twitter Streaming API, so new data is appended to the bottom of the ListView, however the last item is not displayed in full, ie the last line of text (Text element), and there is no way I can scroll down to see that line.
My code for rendering ListView is:
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <View style={{height: 515}}>
<ListView
ref='list'
onLayout={(event) => {
var layout = event.nativeEvent.layout;
this.setState({
listHeight : layout.height
});
}}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
console.log(rowData.text);
return (
<View>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</View>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderFooter={() => {
return (
<View onLayout={(event)=>{
var layout = event.nativeEvent.layout;
this.setState({
footerY : layout.y
});
}}>
</View>
);
}}
/>
</View>
}
</View>
);
}
And in the main render function (just in case this error caused by ScrollableTabView)
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar />}
ref={(tabView) => { this.tabView = tabView; }}
>
{this.renderTwitterSearch()}
{this.renderRealtimeSearch()}
{this.renderDBSearch()}
</ScrollableTabView>
);
}
}
You can simply add a style property with flex=1 on the root component of the listview.
<View style={{flex: 1}}>
<ListView
style={{paddingBottom: 5, marginBottom: 0}}
enableEmptySections
dataSource={this.state.albums}
renderRow={album => <AlbumDetail key={album.title}
album={album}/>}
/>
</View>
In case it may be the help to others, I'd post a solution: in order to make this piece of code work, I wrap ListView and its children into ScrollView element, so code would be as follow:
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <ScrollView style={{height: 520}}>
<ListView
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
return (
<ScrollView>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</ScrollView>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
</ScrollView>
}
</View>
);
}