I am using native base and in this picture you will see stackedLabel form. I'm trying to move it to the center of the screen but it doesn't work with justifyContent and still stays at the top of the screen. Also I am trying to change background color of the whole screen which is also doesn't work.
Here is the code:
<Container>
<Content contentContainerStyle={{
justifyContent:"center",
flex:1,
backgoroundColor: #00A577}}>
<Form style={styles.form}>
<Field name="email"
component={this.renderInput}
validate={[email, required]} />
<Field
name="password"
component={this.renderInput}
validate={[alphaNumeric, minLength8, maxLength15, required]}
/>
</Form>
<Button
full
style={styles.button}
onPress={() => this.signin()}
>
<Text style={{color:"#ffffff"}}>Sign In</Text>
</Button>
</Content>
</Container>
How can I fix these 2 issues?
replace flex:1 by flexGrow:1 in contentContainerStyle
Code
import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Button, Text } from 'native-base';
export default class App extends Component {
render() {
return (
<Container>
<Content contentContainerStyle={{ justifyContent: "center", flexGrow: 1, backgroundColor: "#00A577" }}>
<Form>
<Input placeholder="e-mail" />
<Input placeholder="password" />
</Form>
<Button full>
<Text style={{ color: "#ffffff" }}>Sign In</Text>
</Button>
</Content>
</Container >
);
}
}
You've a typo on 'backgoroundColor'.
Related
I'm not sure why TouchableOpacity is not working in a map.
Here is my code:
<Content>
<Form>
<Header>
<Title>{concernName}</Title>
</Header>
{ values.map(value => (
<TouchableOpacity
key={value.id}
onPress={() => console.log('pressed')}
style={styles.touchable}>
<ListItem>
<CheckBox />
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</ListItem>
</TouchableOpacity>
)) }
</Form>
</Content>
To confirm the placement of the TouchableOpacity I've added the style:
touchable: {
width: '100%',
backgroundColor: '#e5edf9',
margin: 10,
height: 55
},
This produces the following:
When I click on the blue area, nothing happens. I get no error just nothing happens.
Any ideas what I'm doing wrong?
I ended up getting this to work by eliminating the TouchableOpacity. For some reason the TouchableOpacity wasn't working with a nested checkbox.
{ values.map(value => (
<ListItem key={value.id} onPress={ () => console.log('pressed') }>
<CheckBox checked={ this.activateCheckBox(item) }/>
<Body>
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</Body>
</ListItem>
)) }
With the above I can check the whole row and also check the checkbox.
Please check your import statement and make sure that your TouchableOpacity is imported from react-native and not from react-native-gesture-handler because the same thing happens when you import it from react-native-gesture-handler
In such case you can use TouchableOpacity from 'react-native-gesture-handler' package instead of 'react-native' package
you missed a pair of curly braces in onPress={() => console.log('pressed')}
it should be onPress={() => {console.log('pressed')}}
what you did is to just return a meaningless value(a function), you should actually call the function with help of curly braces.
Arrow function by default return the value at right side of the arrow, and execute the codes if it's wrapped with curly braces.
CheckBox interface extends Touchableopacity props in NativeBase.
So you can call onPress in Touchableopacity as below,
<Content>
<Form>
<Header>
<Title>{concernName}</Title>
</Header>
{values.map(value => (
<TouchableOpacity
key={value.id}
onPress={() => console.log('pressed')}
style={styles.touchable}>
{/* <ListItem>
<CheckBox />
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</ListItem> */}
</TouchableOpacity>
))}
</Form>
</Content>
Or you can pass onPress as a prop to CheckBox
<Content>
<Form>
<Header>
<Title>{concernName}</Title>
</Header>
{values.map(value => (
<TouchableOpacity
key={value.id}
style={styles.touchable}>
<ListItem>
<CheckBox onPress={() => console.log('pressed')} />
<Text style={styles.bodyTextOptions}>{value.name}</Text>
</ListItem>
</TouchableOpacity>
))}
</Form>
</Content>
I have a fresh install of native base + expo and I'm trying to make a list. Usually, no problem but today something just aint right.
And the code which makes this list.
<Container>
<Content>
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
</Left>
<Body>
<Text>Awesome group</Text>
<Text note>Awesome group</Text>
</Body>
<Right>
<Text>2/13</Text>
</Right>
</ListItem>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
</Left>
<Body>
<Text>Awesome group</Text>
<Text note>Awesome group</Text>
</Body>
<Right>
<Text>1/2</Text>
</Right>
</ListItem>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: 'http://i.pravatar.cc/100' }} />
</Left>
<Body>
<Text>Awesome group</Text>
<Text note>Awesome group</Text>
</Body>
<Right>
<Text>22/103</Text>
</Right>
</ListItem>
</List>
</Content>
</Container>
Really, according to the native base docs, it should actually look like this:
It seems like it doesn't apply a lot of the styling driven from the props. E.G the note prop on the second line of text doesn't apply and I assume the heights are broken because the avatar prop of the list itself does not apply.
Any suggestions?
i added minimum height styling to the body
<Body style={{ minHeight: 70 }}>
<Text>Awesome group</Text>
<Text note>Awesome group</Text>
</Body>
see what value of min height will work for you
Ok so it turns out this is because I had the extends setup like this:
class App extends React.Component {
But for NativeBase to pick up things properly, you need to import Component and use it like this
import React, {Component} from 'react';
class App extends Component {
And then it all just works :)
I'm trying to make an component which has two TextInput's :
Number of the street
Name of the street
I want the first one to have a width of 35 and the second one to fill the remaining space horizontally.
How would you do that ?
My code:
import React from 'react';
import {StyleSheet, View} from 'react-native';
import FormInput from "./FormInput"
export default class NoStreetInput extends React.Component {
render() {
return(
<View style={{flex:1, flexDirection: 'row'}}>
<FormInput style={{container: {width: 35}}} placeholder="N°" defaultValue="4"/>
<FormInput style={{container: {flexGrow: 1}}} placeholder="Addresse" defaultValue="Chemin Du Moulin" />
</View>
);
}
}
My FormInput component (just in case) :
<View style={styles.container}>
<TextInput
style={styles.textInput}
autoCorrect={false}
defaultValue={this.props.defaultValue}
placeholder={this.props.placeholder}
secureTextEntry={secureTextEntry}
password={password}
keyboardType={keyboardType}
/>
</View>
To do this, you will simply need to have one TextInput's width set to 35 (which you did), and the other's TextInput with its flex attribute set to 1:
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<TextInput value="No" style={{ width: 35 }} />
<TextInput value="Street Name" style={{ flex: 1 }} />
</View>
(obviously your styling should be kept inside a StyleSheet instead, but you get the point)
Here's a working example
Actually I found out what was missing. I begin with React Native and I thought I could access my children style properties of my custom component without adding a props.
I forgot to create a props for my component so that it can take a style from outside.
I finally made it like that :
style={{..}} is now a props in my custom component (see 2nd code)
export default class NoStreetInput extends React.Component {
render() {
return(
<View style={{flex:1, flexDirection: 'row'}}>
<FormInput style={{flex:0, width:35}} placeholder={this.props.placeholderNo}
defaultValue={this.props.defaultValueNo} width="35" keyboardType="number-pad" upperLabel="No"/>
<FormInput style={{flex:1}} placeholder={this.props.placeholderStree}
defaultValue={this.props.defaultValueStreet} upperLabel="Rue" />
</View>
);
}
}
My custom component (it's a bit different than before but the logic is the same) :
<View style={[styles.container, this.props.style]}>
<Text style={[styles.upperLabel, customStyle]}>{upperLabel}</Text>
<TextInput
style={[styles.textInput, this.props.textInputStyle]}
autoCorrect={false}
defaultValue={this.props.defaultValue}
value={text}
placeholder={this.props.placeholder}
secureTextEntry={secureTextEntry}
password={password}
keyboardType={keyboardType}
maxLength={maxLength}
onChangeText={this.handleChangeText}
onSubmitEditing={this.handleSubmitEditing}
/>
</View>
style={[styles.textInput, this.props.textInputStyle]} allows me to have a default style for my component, which can be overriden by this.props.textInputStyle :)
I'm trying to use NavigationBar from the Shoutem UI toolkit.
My code:
<Screen>
<NavigationBar centerComponent={<Title>TITLE</Title>}/>
<ListView
data={groupedData}
renderRow={this.renderRow}
loading ={this.state.loading}
onRefresh={this.getAllNewsfeed.bind(this)}
onLoadMore ={this.loadMoreData.bind(this)}
loadMoreSpinner={<Spinner/>} />
<Button onPress={this.onLogout.bind(this)}>
<Text>
LOGOUT
</Text>
</Button>
</Screen>
But NavigationBar always hidden, listview above NavigationBar. But when I try replace it to Title. It still work. But I don't want use Title because I want add button back or something else same that.
This PR solves it https://github.com/shoutem/ui/pull/104/files but somehow we have removed it from the theme. We are going to fix that in next release but until then you can help yourself by this:
<Screen>
<NavigationBar
style={{
container: {
position: 'relative',
width: Dimensions.get('window').width,
}
}}
centerComponent={<Title>TITLE</Title>}
/>
<ListView
data={groupedData}
renderRow={this.renderRow}
loading ={this.state.loading}
onRefresh={this.getAllNewsfeed.bind(this)}
onLoadMore ={this.loadMoreData.bind(this)}
loadMoreSpinner={<Spinner/>}
/>
<Button onPress={this.onLogout.bind(this)}>
<Text>
LOGOUT
</Text>
</Button>
</Screen>
After release you will just have to change style prop to:
<NavigationBar
styleName="inline"
centerComponent={<Title>TITLE</Title>}
/>
as the image can show it , my app shows a line at the top of my Footer and at the bottom of my Header. Its seems a common thing in Native Base. I have checked out the native-base theme but I can´t find some to fix this error.
Code:
import React, { Component } from 'react';
import { Container, Content, Footer, FooterTab, Button, Icon, Text, Header, Title, Left, Right, Body, } from 'native-base';
export default class FooterTabsExample extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right>
<Button transparent>
<Icon name='menu' />
</Button>
</Right>
</Header>
<Content style={{backgroundColor:'black'}}/>
<Footer >
<FooterTab>
<Button>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
<Button>
<Icon name="camera" />
<Text>Camera</Text>
</Button>
<Button active>
<Icon active name="navigate" />
<Text>Navigate</Text>
</Button>
<Button>
<Icon name="person" />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
Just override the borderBottomWidth for Header and borderTopWidth for Footer:
<Header style={{borderBottomWidth: 0}}>
...
</Header>
...
<Footer style={{borderTopWidth: 0}}>
...
</Footer>
<Header style={{borderBottomWidth: 0, shadowOffset: {height: 0, width: 0},
shadowOpacity: 0, elevation: 0}}>
This worked for me. If you're using Android you must add elevation: 0.
You just need to set border color which you are using in the header or footer background.
<Header style={{
backgroundColor:'#141414',
borderColor: "#141414",
}}></Header>
The top answer doesn't work for android as you also need: elevation:0
So #ap003's answer is more complete.
This worked for me for footer on android:
<Footer style = {{borderTopWidth: 0, elevation: 0,}} />
You can use the same logic for header (replace borderTopWidth with borderBottomWidth)
...
Sorry for separate comment as I'm unable to comment on existing posts (new user huhu).
Just use following style to remove bottom border line.
<Header style = {{elevation: 0}} />
For React Navigation v5 add shadowColor: 'transparent' in 'headerStyle' in the options props.