container doesn't want to display full screen - react-native

my container doesn't want to display full width.. even though I have written the code as below, is there something wrong?
all my style code was here, I gave the background color to show there is a space at the end, and how to remove this until the color become fullscreen
this the code from name.txs
render() {
return (
<Container style = {styles.container}>
<VStack alignItems="center" alignContent="center">
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Please Input your Name
</Text>
<TextInput
style={styles.input}
placeholder='Enter Your Name Here'
onChangeText={ (name) => this.props.authStore.setName(name)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Month of Your Born
</Text>
<TextInput
style={styles.input}
placeholder='January, February, etc.'
onChangeText={ (month) => this.props.authStore.setMonth(month)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Day of Your Born
</Text>
<TextInput
keyboardType="numeric"
placeholder='1-31'
onChangeText={ (day) => this.props.authStore.setDay(day)}
/>
</View>
<View style = {styles.view}>
<Button
title="Submit"
onPress={() => this.props.navigation.push('Zodiac')}/>
</View>
</VStack>
</Container>
);
}

Replace <Container> with <Center flex={1}> from NativeBase

Related

How to resolve the Virtualized Lists warning with multiple Flatlists within a scroll

I have been working my way through legacy views within an app - resolving the issues of FlatLists within a ScrollView component casuing the resulting Virtualised Lists error that is displayed.
I have 5 affected pages - first 3 only had 1 flatlist in the view - so was easy enough to split the urrounding code into flatlist header and footer assets. However I'm not sure what to do in terms of having 2 or more flatlists - how do i apprach the layout in thsi scenario - so there is only 1 scroll?
I may be missing something very simple but need a nudge please!
here is the view code:
<View style={[PRStyles.IRContainer]} >
<StatusBar barStyle="light-content" />
<View style={PRStyles.header}>
<FixedHeader backButton={true} navScreen='HomeViewContainer' />
</View>
<View style={PRStyles.IRBody}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh} />}>
<KeyboardAvoidingView>
<TitleHeader sectionLocaleTxt='Duty Record' sectionTxt='' sectionDesc='End of shift duty Record.' sectionHyphen={false} />
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowTitle}>{this.props.auth.checkedInVenueName}</Text>
<Text style={FormStyles.PrRowDate}>{this.getCurrentDate()}</Text>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>General Manager / Licence Holder:</Text>
<View style={FormStyles.PrTable}>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >{this.state.licenceHolder}</Text></View>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Door Staff (<Text style={FormStyles.PrRowCount}>{this.state.doorStaffCount}</Text> total)</Text>
<View style={FormStyles.PrTable}>
<FlatList
scrollEnabled={true}
data={this.state.rotaRecords}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={this._listStaffEmptyComponent}
renderItem={this._renderDoorStaffItem}
/>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Numbers:</Text>
<View style={FormStyles.PrTable}>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total In <Text style={ FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalIn}</Text></Text></View>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total Out<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalOut}</Text></Text></View>
<View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Overall Difference<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalDifference}</Text></Text></View>
</View>
</View>
<View style={FormStyles.PrRow}>
<Text style={FormStyles.PrRowSubTitle}>Door Counts:</Text>
<FlatList
scrollEnabled={true}
data={this.state.countRecords}
keyExtractor={(item, index) => index.toString()}
ListEmptyComponent={this._listDoorCountEmptyComponent}
ListHeaderComponent={this._listDoorCountHeaderComponent}
renderItem={this._renderDoorCountItem}
/>
</View>
<View style={[FormStyles.form, FormStyles.PrRow, {marginTop:15, paddingTop:0, borderBottomWidth:0} ]}>
<Text style={ModalStyles.formTop}><Text style={[ModalStyles.required, ]}>*</Text>Required Field</Text>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>1. Customer Comments:</Text>
<View style={FormStyles.textInputBlock}>
<TextInput
placeholder="Enter Comments"
numberOfLines={4}
onChangeText={val => this.setState({ comments: val})}
value={this.state.comments}
multiline
style={{minHeight: 280, height: 'auto', textAlignVertical: 'top'}}
/>
</View>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>2. Duty Manager Name<Text style={ModalStyles.required}>*</Text> :</Text>
<View style={FormStyles.textInputBlock}>
<TextInput
ref='signatureName'
placeholder="Please Print Name"
style={FormStyles.textInputText}
autoCorrect={false}
returnKeyType='done'
value={this.state.signatureName}
onChangeText={(text) => this.setState({signatureName:text})}
/>
</View>
<Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>3. Duty Manager Signature: <Text style={ModalStyles.required}>*</Text></Text>
<Text style={[FormStyles.formLabelSub, FormStyles.formLabelSubHigh, FormStyles.superHighLight ]}>Note: PRESS BLUE SAVE BUTTON after applying Signature</Text>
<View style={[FormStyles.textInputBlock, this.isSignatureAdded() && FormStyles.signatureBlock ]}>
{this.signatureBlock()}
</View>
</View>
{submitButton}
</KeyboardAvoidingView>
</ScrollView>
</View>
</View>
This is the most common error when working with scroll view and flat list.
To prevent the error cause, we have to manage our views inside a single flat list and put other components in the list header component and list footer component in an efficient way as we desire.
<FlatList
data={this.state.countRecords}
renderItem={(item) => {
return (
// Your flat list item goes here..
)
}}
ListHeaderComponent={
// Content above the list goes here..
}
ListFooterComponent={
// Content below the list should goes here..
}
/>
You can still check the below link for more understanding.
FlatList Example with Custom Header and Custom Footer

Text not getting rendered for an object

I have this below code, The alert shows following message:
{"item":{"isPositive":"false", "balance":"-500","currency":"AUD"}}
If I do alert on "ob" I get undefined. My problem is that the Text doesn't display anything:
_renderItemView(item) {
const ob = item
//alert(JSON.stringify(ob))
alert(JSON.stringify(item))
return(<>
<View style={styles.rowContainer}>
<View style={styles.iconContainer}></View>
<View style={styles.descriptionContainer}>
<Text style={styles.subText}>{item.date}asasas</Text>
{/* <Text style={styles.transactionDescText}>{item.description}</Text>
<Text style={styles.subText}>{item.descFrom}</Text> */}
</View>
<View style={styles.balanceContainer}>
{/* <Text style={styles.balance}>{item.currency}</Text>
<Text style={styles.balanceSubText}>{item.balance}</Text> */}
</View>
</View>
</>)
}
I was using renderItem={(item, index) => _renderItemView(item) to render
I needed an extra brace like this
renderItem={({item, index}) =>

How to create custom tabs in the centre of the screen in React Native

I am doing react native application. In that, One screen have custom tabs in centre of the screen.
My screen is like,
top view around 200px height with some text lines showing.
After that, Custom tabs as picture attached.
After that, I am showing for first tab on tap flat list data.
I have checked online forums and tutorials, According to tab bar, We can show either top or bottom screen with tabs.
But, How to show tabs with customisation like my requirement.
I have 4 tabs, and each tab has same top view which I mentioned in above (some text lines), And if I tap on each tab, different data bottom page should show.
Like,
First tab with some flat list,
second tab with some text lines,
likewise all tabs has different layout in bottom screen.
As I am very new to react native. How to achieve this?
Due to privacy policy, I am unable to post complete screenshot.
Here is my code.
Screen.js
onClickTelugu = () => {
alert("you clicked onClickTelugu")
}
onClickTamil = () => {
alert("you clicked onClickTamil")
}
onClickHindi = () => {
alert("you clicked onClickHindi")
}
onClickEnglish = () => {
alert("you clicked onClickEnglish");
}
render(item) {
return (
<View style={styles.container}>
<View style ={styles.Container}>
<Text style={styles.textStyle}>
Some Text
</Text>
<View style={styles.somestyles}>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.somestyles}
source={MenuImage}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.menuIcon}
source={MenuImage}
/>
</TouchableOpacity>
</View>
</View>
<View style ={styles.somestyles}>
<View style={styles.somestyles}>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles} >
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style ={styles.somestyles}>
Some Text
</Text>
</Text>
</View>
<View style={styles.somestyles}>
<Text style={styles.somestyles}>some text</Text>
<Text style={styles.somestyles} >some text</Text>
<Text style={styles.somestyles}>date</Text>
<Text style={styles.somestyles}>some other date</Text>
</View>
</View>
</View>
<View style = {styles.tabContainer}>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>
</View>
</View>
<View style = {styles.flatListContainer}>
<FlatList style = {styles.flatList}
showsVerticalScrollIndicator = {true}
data = {this.state.dataArray}
renderItem = {({item}) => (
<TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
<Image
style={styles.flatListArrowImage}
source={image}
/>
</View>
<View style={styles.flatListItemInsideSeparator}>
)
}
ItemSeparatorComponent = {() => (
<View style={{height:15, backgroundColor:'#F8F8F8'}}/>
)}
/>
</View>
</View>
);
}
}
And I have to show overlay tab images too. If 1st tab tapped, 2,3,4
tabs images should be like delighted images. Like
highlighted/delighted images.
Ok you need to give this component it's own state to keep track of what you want to show in the lower section. then you should replace all of your onClick events with just one onClick event that you pass different languages to. For Example this.onClickTelugu becomes () => this.onClick('telugu'), then your onClick event should be:
onClick = (language) => {
this.setState({selectedLanguage: language})
}
then in your renderBottomContent function, you can render different things depending on what this.state.selectedLanguage is.
something like...
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = { selectedLanguage: null}
}
onClick = (language) => {
this.setState({selectedLanguage: language})
}
renderBottomContent = () => {
const {selectedLanguge} = this.state
switch(selectedLanguage) {
case "telugu":
return <View><Text>Telugu</Text></View>
case "tamil":
return <View><Text>Tamil</Text></View>
case "hindi":
return <View><Text>Hindi</Text></View>
case "english":
return <View><Text>English</Text></View>
default:
return <View><Text>No Language Selected...</Text></View>
}
}
render() {
...
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Telugu
</Text>
</TouchableOpacity>
</View>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Tamil
</Text>
</TouchableOpacity>
</View>
...
// after all the other tab buttons, render bottom content depending on the component state
{this.renderBottomContent()}
}
}

How Can I reslove this issue Keyboard overlapped when i entered text input

How can i solve this issue .
keyboard overlapping like this below
Code Here
<View style={styles.container}>
<View style={styles.Subcontainer}>
<ScrollView contentContainerStyle={styles.scrolViewFlex} ref='scrollView' automaticallyAdjustContentInsets={true} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true}>
<View style={styles.logoView}>
<Image source={require('#images/Icon_K.png')} style={styles.imageStyles} />
</View>
<View style={styles.textInputView}>
<ActivityIndicator
animating = {this.state.animating}
color = '#494949'
size = "large"
style = {styles.activityIndicator}
/>
<View style={styles.namesContainer}>
{/*<View style={styles.exploreContainerDirection}> */}
<View style={styles.pincodeContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
style={[styles.firstnameTextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" First Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'FirstName')}
value={this.state.updateAccountValues.FirstName}
onFocus={this.inputFocused.bind(this,'FirstName')}
onSubmitEditing={(event)=>{
this.refs.SecondInput.focus();
}}/>
</View>
<View style={styles.spaceview}/>
<View style={styles.mobileNoContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
ref="SecondInput"
style={[styles.lastnametextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" Last Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'LastName')}
onFocus={this.inputFocused.bind(this,'LastName')}
value={this.state.updateAccountValues.LastName}
onSubmitEditing={(event)=>{
this.refs.ThirdInput.focus();
}}/>
</View>
{/* </View>*/}
</View>
</ScrollView>
</View>
</View>
So this is my Screen short when i enter in textinput keyboard appers some times like this below screen
So, Please check it once and find Our my Issue
I followed this: Set
android:windowSoftInputMode="adjustPan" in MainfestFile.xml file
React-native: How to control what keyboard pushes up

React Native - Scrollview vertical with scrollview horizontal in it?

I'm creating an APP to show points of interest of monuments. Right now I'm rendering the information on a ScrollView (vertical way). The output is like this:
I edited the image, it continues, but I think you get the point.
Here is my code:
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<ScrollView>
{monumento.pois.map((poi, index) => (
<View key={index} style={{marginBottom: 15}} >
<Tile
imageSrc = {{uri:poi.image}}
contentContainerStyle = {{marginBottom: -30}}
/>
<View style={styles.map}>
<Icon
raised
reverse
name='location-on'
color='#075e54'
size={36}
onPress={() => navigate('Mapa', {monumento: monumento})} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>{poi.name}</Text>
</View>
<View style={styles.bodyContent}>
<Text style={styles.bodyText}>{poi.description}</Text>
</View>
</View>
))}
</ScrollView>
</View>
</View>
);
What I want is to scroll normally for one Point of Interest (PoI), but the next PoI I want him to appear by scrooling horizontal (swiping left)...like this:
sample
How can I accomplish that? Thanks!