I'm using Native-base components to create a card.
But, i find a problem in displaying icons with text. I want to display it like this :
But i get this result :
This is my code :
<Card style= {{ flex: 1 , width : width-30 , marginTop :10}}>
<CardItem cardBody>
<Image source= { require('./images/post-media/1.png') } style={{height: 200, width: null, flex: 1}}>
</Image>
</CardItem>
<CardItem style = {{backgroundColor: 'white'}}>
<Body>
<Text style= {styles.txt}>
this is my text blabla blabla blabla
</Text>
<View style={{ borderBottomWidth: 1, borderBottomColor: '#839fcc', width: width-70 }} />
</Body>
</CardItem>
<CardItem >
<Left>
<Button transparent>
<Icon name="time" style={styles.icon} />
<Text>2017.07.05 </Text>
</Button>
</Left>
<Body>
<Button transparent >
<Icon name="heart" style={styles.icon} />
<Text >325</Text>
</Button>
</Body>
<Right>
<Icon name="chatbubbles" style={styles.activeIcon} />
<Text>325</Text>
</Right>
</CardItem>
</Card>
For the style :
icon: {
color: '#839fcc'
},
activeIcon:{
color:'#0d5be9'
}
Any idea please ?
Your question is not clear,but from the screen shot i see that breakage is the problem.
Import these things from the below library(this answer works only if you use this library)
import { Col, Row, Grid } from 'react-native-easy-grid';
In you code use the Row tag and give proper flux to place the icon and text in proper manner.
<CardItem >
<Left>
<Row>
<Button transparent>
<View style={{flex: 1}}>
<View style={{flex: 2}}>
<Icon name="time" style={styles.icon} />
</View>
<View style={{flex: 2}}>
<Text>2017.07.05 </Text>
</View>
</View>
</Button>
</Row>
</Left>
</CardItem>
Above i have only edited the left tag , use flux or else it will break in different screen sizes.By properly altering the flux values you can arrange their position in suitable manner.
Related
In ios it is ok however when i click input in android, button appears over keyboard and it seems so bad. how can i handle that ? this is my code:
<>
<SafeAreaView style={styles.container}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
keyboardShouldPersistTaps="handled"
style={styles.scrollviewStyle}
>
<FormInput label="1" />
<FormInput label="2" />
<FormInput label="3" />
<FormInput label="4" />
<FormInput label="5" icon={true} />
<Text
style={{
color: '#938E8E',
marginLeft: 30,
fontSize: 14,
fontWeight: '400',
}}
>
text
</Text>
<Dropdown />
<View style={styles.agreementContainer}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CheckBox onPress={chekboxButton} checked={toggleCheckBox} />
<TouchableOpacity>
<Text style={styles.acceptagreementStyle}>
text
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
</SafeAreaView>
</>
this button comes over keyboard:
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
If I understood your question correctly, you can easily fix this problem using
<KeyboardAvoidingView> https://reactnative.dev/docs/keyboardavoidingview
and wrapping your component with that.
this is because android:windowSoftInputMode property in AndroidManifest.xml which is set to adjustResize by default
you have 2 solutions
1 : change your android/app/src/main/AndroidManifest.xml
<activity
....
android:windowSoftInputMode="adjustPan">
2 : use react-native-android-keyboard-adjust
import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
.....
AndroidKeyboardAdjust.setAdjustPan();
I wanted to add space between button but it's not working below is my code. What do I need to add in my code?
render(){
return (
<View>
<Text>Home</Text>
<Button style={styles.button}
title='Add '
/>
<Button style={styles.button}
title='Search/Update'
/>
</View>
)
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
})
Easiest way is to add a spacing view between your two buttons:
<View>
<Text>Home</Text>
<Button style={styles.button} title='Add' />
<View style={styles.space} /> // <------------------------- right here
<Button style={styles.button} title='Search/Update' />
</View>
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
space: {
width: 20, // or whatever size you need
height: 20,
},
})
Or you could use like this:
<View>
<View style={{ flex: 1, marginBottom: 10 }}>
<Button title="Add" />
</View>
<View style={{ flex: 1 }}>
<Button title="Search/Update" />
</View>
</View>
You can apply this styling to View component in order to get space between two buttons.
Also import Dimensions from react-native and adjust the width of View according to your need.
import { Dimensions } from 'react-native';
<View style={{
width:Dimensions.get("window").width * 0.5,
display:"flex",
justifyContent:"space-evenly",
alignItems: "center"
}}>
<Text>Home</Text>
<Button
style={styles.button}
title='Add '
/>
<Button
style={styles.button}
title='Search/Update'
/>
</View>
The code <View style={{marginVertical: 10}} You have to use here.
The Button should come inside View Tag
You can use the below code to add space between button
<View style={{marginVertical: 10}}>
<Button title="Button 1" />
</View>
<View style={{marginVertical: 10}}>
<Button title="Button 2" />
</View>
Basically, I have a working flatlist data obtained from an remote api & presented as cards. I have added share button in the UI, but not able to figure out,
how I can add on press on each card which when clicked opens more details about that specific card or onclick of share button I can share card specific data or copy card specific data
<View>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => <CardBox message={item} />}
keyExtractor={(item) => item.Id.toString()}
onEndReached={() => dispatchFetchPage()}
initialNumToRender={1}
maxToRenderPerBatch={2}
onEndReachedThreshold={0.5}
/>
</View>
<Card>
<CardItem button >
<View style={carddesign.card}>
<View>
<Text>Quote by : {this.props.message.author}</Text>
</View>
<View>
<Text style={carddesign.cardText}>{this.props.message.quote}</Text>
<Text style={carddesign.cardSubText}>{this.props.message.genre}</Text>
</View>
</View>
</CardItem>
<CardItem>
<Left style={{ flex: 1 }}>
<Button transparent onPress={ShareQuote}>
<Icon active name="share" />
<Text style={{ fontSize: 12 }}>Share</Text>
</Button>
</Left>
<Body style={{ flex: 1 }}>
<Button transparent>
<Icon active name="chatbubbles" />
<Text style={{ fontSize: 12 }}>Copy</Text>
</Button>
</Body>
<Right style={{ flex: 1 }}>
<Button transparent>
<Icon active name="download" />
<Text style={{ fontSize: 12 }}>Download</Text>
</Button>
</Right>
</CardItem>
</Card>
You could wrapp card component inside a TouchableOpacity as follows:
<TouchableOpacity onPress={this._onPressButton}>
<Card></Card>
</TouchableOpacity>
Hope it helps.
I am not able to use the native base deck swiper every time I try to run the program using the code given in the official website of native base I get a blank white screen.My code is:-
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
no error is displayed but the only thing I got is a white blank screen
Put your Deckswiper inside the view and give height to that view. it should work
<View style={{height:400}}>
<DeckSwiper
dataSource={cards}
renderItem={item =>
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={item.image} />
<Body>
<Text>{item.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image style={{ height: 300, flex: 1 }} source={item.image} />
</CardItem>
<CardItem>
<Icon name="heart" style={{ color: '#ED4A6A' }} />
<Text>{item.name}</Text>
</CardItem>
</Card>
}
/>
</View>
Whoever searching an answer about this issue remember that the example in native-base docs using internal resources for images. So if you're using external resources for your Image components (like an image url) please use
<Image style={{ height: 300, flex: 1 }} source={{uri:item.image}} />
instead. It's basic as hell but can be overlooked easily.
I'm using native-base to create a React Native app:
I'm using the Header Component to display Body, Left and Right elements. According to the docs, the title should automatically center but it does not (as seen below).
Am I missing something simple here? Any help would be appreciated!
import {
Container,
Header,
Content,
Left,
Right,
Body,
Title,
Icon
} from "native-base"
export default class Seminars extends React.Component{
render(){
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Icon name='arrow-back' />
</Left>
<Body>
<Title>Seminars</Title>
</Body>
<Right>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
}
}
const styles = StyleSheet.create({
container: {
},
header: {
paddingRight: 15,
paddingLeft: 15
},
content: {
display: "flex",
flex: 1,
justifyContent: "center",
padding: 15
}
});
If you want the title to be in the center, you can add flex:1 in Left, Body and Right like this :
return(
<Container style={styles.container}>
<Header style={styles.header}>
<Left style={{flex:1}}>
<Icon name='arrow-back' />
</Left>
<Body style={{flex:1}}>
<Title>Seminars</Title>
</Body>
<Right style={{flex:1}}>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
)
And this is the result :
I hope this answer can help you :)
This answer can help you, worked for me.
<Header style={{backgroundColor:'#ff2929'}}>
<Left style={{flex: 1}}>
<Button transparent style={{width: 65}}>
<Icon style={{color:"#fff"}} type="MaterialIcons" name={this.props.imageLeft}/>
</Button>
</Left>
<Body style={{flex: 3,justifyContent: 'center'}}>
<Title style={{color: '#fff',alignSelf:'center'}}>{this.props.headerTitle}</Title>
</Body>
<Right style={{flex: 1}}>
<Button transparent style={{width: 65}}>
<Icon style={{color:this.props.color}} type="MaterialIcons" name={this.props.imageRight}/>
</Button>
</Right>
</Header>
You can also try this one:
<Header>
<Left style={{ flex: 1 }}>
<Icon name="arrow-back" />
</Left>
<Body style={{ flex: 1 }}>
<Title style={{ alignSelf: "center" }}>Seminars</Title>
</Body>
<Right style={{ flex: 1 }}>
<Icon name="menu" />
</Right>
</Header>
I find the best way to do this and its Work for me.
<Header transparent>
<Left style={{ flex: 1 }}>
<Icon name='arrow-back' />
</Left>
<Body style={{ flex: 1 }}>
<Title style={{ justifyContent: 'center', color: '#9fabdd' }}>Home</Title>
</Body>
<Right style={{ flex: 1 }}>
<Icon name='arrow-back' />
</Right>
</Header>
<Header>
<Left style={{flex: 1}} />
<Body style={{flex: 1}}>
<Title style={{alignSelf: 'center'}}>Header</Title>
</Body>
<Right style={{flex: 1}} />
</Header>
static navigationOptions = ({ navigation }) => {
return {
headerTitle: (
<Image style={{width: 50, height: 10}} alignItems='center' source={require('../assets/zazzy.png')} />
</View>
),
headerLeft: (
<View style={{ padding: 10 }}>
<Ionicons name="ios-apps" color='gold' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
),
headerRight: (
<View style={{ padding: 10 }}>
<Ionicons name="md-search" color='silver' size={24} onPress={() => navigation.navigate('DrawerOpen')} />
</View>
)
}
}
render() {
return (
<HomeScreenTabNavigator screenProps={{ navigation: this.props.navigation }} />
)
}
}
<Container style={styles.container}>
<Header style={styles.header}>
<Left style={{flex:1}}>
<Icon name='arrow-back' />
</Left>
<Body style={{flex:1}>
<Title style={{width:'100%'}}>Seminars</Title>
</Body>
<Right style={{flex:1}}>
<Icon name='menu' />
</Right>
</Header>
<Content contentContainerStyle={styles.content} >
<Text>Content Here</Text>
</Content>
</Container>
I found this as a solution when the left and right items are of unequal sizes, works for both android and iOS