Making a to-do list type thing to add in my app but when trying to align the 'add todo' button to the bottom right, the button goes anywhere but there.
I'm pretty good with CSS but get pretty messed up when using React CSS/styles. I've played around with different properties, giving a parent a style instead of the child etc.
The class is as follows
class AgendaScreen extends React.Component {
addReminder = () => {
//blank so far :)
};
render() {
return (
<View>
<Text style={styles.titleStyle}>Agenda</Text>
<View style={styles.reminderView}>
<TouchableOpacity style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
and the styles here
//Agenda screen styles
reminderView: {
flex: 1,
justifyContent: 'flex-end',
},
reminderTouch: {
width: 60,
height: 60,
backgroundColor: 'orange',
borderRadius: 100,
textAlign: 'center',
margin: 20,
},
reminderBtn: {
fontSize: 50,
margin: 10,
alignSelf: 'flex-end',
},
The goal is to align the plus symbol in the middle of the circle and align that circle to the bottom right. With the pasted settings the circle is in the top left and the plus symbol is aligned to the bottom of the circle.
Also, the code posted above wasn't the closest I've gotten as I could easily do it with padding but I'd prefer to use flexbox.
Simply change your style replace with this style and Please add style to your top view
<View style={{flex:1}}>
<Text>Agends</Text>
<View style={styles.reminderView}>
<TouchableOpacity style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
</View>
</View>
reminderView: {
flex: 1,
right:0,
margin:5,
bottom:0,
position:'absolute'
},
reminderTouch: {
width: 60,
height: 60,
backgroundColor: 'orange',
borderRadius: 100,
justifyContent:'center',
alignItems:'center',
margin: 20,
},
reminderBtn: {
fontSize: 50,
margin: 5,
alignSelf: 'center',
}
Please check this snack.expo link
Here is how I would do it:
<View style={{
flex: 1,
justifyContent: 'center',
width:'100%',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}}>
<View
style={{
justifyContent:'center',
alignItems:"center",
width:65,
borderRadius:100,
height:65,
position:'absolute',
bottom:15,
right:15,
backgroundColor:"red",
elevation:10
}}
>
<Icon
name="plus"
size={25}
color="white"
/>
</View>
</View>
What it does is that it makes the round button float on the bottom right corner of the screen. Since you are making a todo app, you would want it to float over the todo list when it becomes longer.
https://snack.expo.io/#ammarahmed/rebellious-donuts
Related
I'm currently trying to place a text over an image that is covering the entire page in react-pdf renderer. Does anyone know how to do this? Tried checking the issues in their docs and found this thread: https://github.com/diegomura/react-pdf/issues/1905 with no correct answers.
My code:
import { View, Page, Image, StyleSheet, Text } from "#react-pdf/renderer";
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#fff",
width: "100%",
orientation: "portrait",
},
view: {
width: "100%",
height: "100%",
padding: 0,
backgroundColor: "white",
},
title: {
margin: 20,
fontSize: 25,
textAlign: "center",
textTransform: "uppercase",
},
});
export const IntroductionPage = () => (
<Page object-fit="fill" style={styles.page} size="A4">
<View style={styles.view}>
<Text style={styles.title}>HELLO WORLD</Text>
<Image src="https://images.unsplash.com/photo-1523047840906-018758c5ffa1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3026&q=80" />
</View>
</Page>
);
I want to place the text HELLO WORLD over the image but instead it only renders on top and pushes the image down.
The best way that worked for me was using absolute positioning for Text components. Something similar to this
const styles = StyleSheet.create({
text: {
position: "absolute",
left: '0px',
right: '0px',
marginHorizontal: 'auto',
textAlign: "center",
justifyContent: 'center',
}
...
})
<Document >
<Page size="A4" style={styles.body}>
<View >
<Image src={invitation}></Image>
</View>
<Text style={{top:"350px", ...styles.text }} >
{details.groom}
</Text>
<Text style={{top:"450px", ...styles.text }} >
{details.bride}
</Text>
<Text style={{top:"550px",...styles.text,}} >
would love your presence to celebrate our wedding {"\n"}{"\n"}
Friday 30 August 2023 At 6:00 PM{"\n"}
At Sousse Municipality
</Text>
</Page>
</Document>
</PDFViewer>
The result ended up being like this (I ommited some code in this answer for readability but you can find my entire code in here https://codepen.io/daliovic/pen/VwdZwEo?editors=0010)
I'm using libraries: "react-native-svg": "12.1.0" & "react-native-svg-transformer": "0.14.3"
import FooIcon from '../assets/images/icons/fooIcon.svg';
<View style={{ flex: 1, paddingTop: 8 }}>
<FooIcon></FooIcon>
<View style={{ position: 'absolute', top: 35, bottom: 0, left: 14, right: 0 }} >
<Text>foo</Text>
</View>
</View>
How can I have "foo" text centered over the FooIcon. The solution above does not center the text which is important because "foo" text length can change and it has to be in center in every case.
this chunk of code should do the work for you
<View
style={{
justifyContent: 'center',
alignItems: 'center'
}}
>
<SVG /> //your svg image component goes here
<Text
style={{
position: 'absolute'
}}
>
Test
</Text>
</View>
I would recommend not to use an absolute position if the content size can change dynamically. I would build this with just using flex-box:
...
<View style={styles.itemContainer}>
<Text>Foo</Text>
<View style={styles.iconMock} />
</View>
...
const styles = StyleSheet.create({
itemContainer: {
alignItems: "center",
//this has default flex: 0, which means the container will always have the size the children take.
//we then tell it to centre all the children (items) which gives the needed effect.
},
iconMock: {
backgroundColor: "blue",
height: 50,
width: 150,
}
});
Building it this way the text will always be centred:
When I click on my FlatList I can drag and move it in all directions (up/down/right left). Although the list appears to be vertical (maybe because of the styling), the scroll bar still appears horizontally. How can I disable this dragging?
This is how I am using the FlatList:
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
This is from the FriendItem's return
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles for FriendItem:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
I also tried removing the TouchableOpacity but it made no difference.
What you can try. is below :
UPDATE:
<Flatlist
bounces={false}/>
try this here, or add bounces={false} in the top scrollView if its there
Hope it helps. feel free for doubts
This issue happened because of some times you have given a width to the parent view of flat list. like below.
<View style={{width: '90%'}}>
<FlatList/>
</View>
simply add the flatlist to the same width with bounces false.
<View style={{width: '90%'}}>
<FlatList
contentContainerStyle={{width: '90%'}}
bounces={false}
/>
</View>
by adding bounces=false, your flatlist will not be able drag to different directions.
I'm currently working on my React Native's app UI and an alignment problem is killing me: I can't get my text box and text input's texts aligned horizontally.
Here is an excerpt of the render for a line:
render() {
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.textLabel}>Player name:</Text>
<TextInput
style={styles.textBox}
onChangeText={(playerNameState) => this.setState({playerNameState })}
value={this.state.playerNameState} />
</View>
</View>
);
}
And here are the styles I use (background colour is just for boundingbox reference:
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
backgroundColor: 'white'
},
line: {
flexDirection: 'row',
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
margin: 5,
height: 50
},
textLabel: {
height: 50,
fontSize: 18,
backgroundColor: 'blue',
alignItems: 'center'
},
textBox: {
color: 'grey',
height: 50,
fontSize: 18,
backgroundColor: 'red',
flexGrow: 1,
alignItems: 'center'
}
I think I shouldn't be needing as many alaignItems, but I just wanted to show you what I tried. Any ideas?
Wrap those Text(Input)-Components into Views and it should work:
render() {
return (
<View style={styles.container}>
<View style={styles.line}>
<View style={styles.textLabel}>
<Text>Player name:</Text>
</View>
<View style={styles.textBox}>
<TextInput
onChangeText={(playerNameState) => this.setState({playerNameState })}
value={this.state.playerNameState} />
</View>
</View>
</View>
);}
You can also add justifyContent: 'center' to styles.textBox & textLabel to align the content vertically.
problem trying to make fit the image over some text which is like 2/3rd of the screen here's the link of image http://imgur.com/tuJPGqT
layout is designed like
<View style={styles.container} maintainAspectRatio={true} source={logotwo}>
<Container > <Image source={logo} maintainAspectRatio={true} style={styles.logo}>
</Image>
<View >
<Content >
<Text style={styles.boldtext}>SOME TITLE</Text>
<Text style={styles.subtext} adjustsFontSizeToFit={true} numberOfLines={3}>
A str agfdgdfgfdgfsdgsfdggdgfg(some long sentence) nance.</Text>
<View>
<Button style={styles.button}
onPress={() => { this._signIn() } }>
<Text style={{ fontSize: 20, color: '#fff' }}>
LOGIN
</Text>
</Button>
</View>
</Content>
</View>
</Container >
</View>
and style for the same is
container: {
resizeMode: 'cover', height: null,
backgroundColor: '#ffffff',
},
logo: {
width: null,
height: 398,
resizeMode: 'stretch',
},
boldtext: {
textAlign: 'center',
fontSize: 23,
fontWeight: 'bold',
}
,
subtext: {
marginLeft: 10,
marginRight: 10,
opacity: 0.7,
textAlign: 'center',
},
button: {
marginTop: 20,
alignSelf: 'stretch',
height: 70,
fontSize: 50,
}
i tried adjusting the width and height manually but resolution is not matched up with various screens i tested on.
Please suggest some good standard to follow the same for all screens in my app.