In my React Native app, I have a card with a bunch of buttons at the bottom of it -- see image below.
I want to leave the first two icons where they are, on the left but move the (X) button all the way to the right. How do I accomplish this?
Here's what I have right now which is not working:
<Card style={styles.listItem}>
<Card.Content>
<Paragraph>{item.description}</Paragraph>
</Card.Content>
<Card.Actions>
<Button><Icon name="checkcircleo" /> </Button>
<Button><Icon name="clockcircleo" /> </Button>
<Button style={{ alignItems: 'stretch' }}><Icon name="closecircle" /> </Button>
</Card.Actions>
</Card>
To align the last button to the right, add { marginLeft: 'auto' } style to it.
To align all buttons to the right, add { justifyContent: 'flex-end' } style to Card.Actions.
Try adding alignSelf: "flex-end" to the button style:
<Card style={styles.listItem}>
<Card.Content>
<Paragraph>{item.description}</Paragraph>
</Card.Content>
<Card.Actions>
<Button>
<Icon name="checkcircleo" />
</Button>
<Button>
<Icon name="clockcircleo" />
</Button>
<Button style={{ alignSelf: "flex-end" }}>
<Icon name="closecircle" />
</Button>
</Card.Actions>
</Card>
You can group the first two buttons by flex and flex direction:'row' and you can use the justifyContent:space-between on the group button and the cross button.
Here is an example of how it can be achieved. :
<Card.Actions>
<View style={{flexDirection:'row',justifyContent:'space-between'}} >
<View style={{flexDirection:'row'}}>
<Button>
<Icon name="checkcircleo" />
</Button>
<Button>
<Icon name="clockcircleo" />
</Button>
</View>
<View>
<Button style={{ alignSelf: "flex-end" }}>
<Icon name="closecircle" />
</Button>
</View>
</View>
</Card.Actions>
Here is the example of the expo snack : expo-snack
Do check out.
Feel free for doubts
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 am tryin g to make the buttons login and register have top spacing from the logo above them but no css attributes work so far
I tried padding top/margin top and top but all don't work and margin left doesn't work also
here's the expo snack link:
https://snack.expo.io/#mai95/intelligent-tortillas
<Button title="Login" style={{top:300}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register"style={{top:300,marginLeft:50}} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
any idea what's wrong?
The styles prop is not available on the <Button /> component. You should consider wrapping the buttons in a div like so:
<View style={{ flexDirection: 'row', marginTop: 100 }}>
<View style={{ marginHorizontal: 25 }}>
<Button title="Login" onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText}>LOG IN</Text>
</Button>
</View>
<View style={{ marginHorizontal: 25 }}>
<Button
title="Register"
onPress={() => navigation.navigate('Details')}>
<Text style={styles.loginText2}>Register</Text>
</Button>
</View>
</View>
MarginTop should be in a container <View/>
Here is the snippet working with marginTop:
<View style={{flexDirection:'row', marginTop: 30}}>
<Button title="Login" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<Button title="Register" onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText2}>Register</Text>
</Button>
</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 like the same style as IOS in android. You can see the in IOS the Icon in the middle is nice, but in android it isn't
The code I use is this one
<Footer style={{ backgroundColor: "#FFFFFF" }}>
<FooterTab style={{ backgroundColor: "#FFFFFF" }}>
<Button onPress={() => { Actions.Startpage();}}>
<Icon name="search" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Ontdekken</Text>
</Button>
<Button onPress={() => { Actions.ThemasPage();}}>
<Icon name="id-card" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Thema's</Text>
</Button>
<Button style={{marginBottom:20, borderRadius:50, height: 90, backgroundColor: '#FFFFFF', overflow: 'visible'}} onPress={() => { Actions.EventPage();}}>
<Icon name="calendar-plus-o" size={50} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Evenementen</Text>
</Button>
<Button onPress={() => { Actions.Wildpage();}}>
<Icon name="binoculars" size={30} color="#e50040" />
<Text style={styles.smalltext} numberOfLines={1}>100% Wild</Text>
</Button>
<Button onPress={() => { Actions.MenuPage();}}>
<Icon name="bars" size={30} color="#3ba936" />
<Text style={styles.smalltext} numberOfLines={1}>Menu</Text>
</Button>
</FooterTab>
</Footer>
This is because the button is bigger than the container.
In iOS it will be visible but on android the container will crop any inner element that overflow.
What you can do is to change the height on Footer to be equal to that middle button, and make sure that the other buttons are smaller in height to give you the same effect without any overflow outside parent Component.
And for the gray line you can add a view with height of 1 and full width
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.