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:
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 have a modal that contains various children components. One of them being a calendar component that is opened after pressing the text "Select Date"
Upon opening the Calendar component renders underneath the other components on the page.
I have tried using position: 'absolute' with a higher zIndex but I still cannot get the Calendar Component to render on top of everything else...how can I accomplish this?
JSX For the components
<View style={styles.container}>
<View style={styles.routineitems}>
<TouchableOpacity >
<Text style={{ }}>Due Date</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>calendarShouldShow(calendarVisible)}>
<Text style={{ }}>Select Date</Text>
</TouchableOpacity>
</View>
<Calendar style={{position: 'absolute',zIndex: 4}}/>
<View style={styles.routineitems}>
<Text>Tags</Text>
<DropDownPicker
placeholder="Tags"
/>
</View>
<View style={styles.routineitems}>
<Text>Notes</Text>
<TextInput
style={styles.input}
onChangeText ={ value => setNotes(value)}
value={notes}
laceholder="Notes"
textAlign={'right'}
/>
</View>
</View>
STYLESHEET
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: '100%'
},
routineitems: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: '90%',
marginBottom: '1%',
marginTop: '1%',
alignItems: 'center',
zIndex: 0
},
input: {
height: 40,
width: '30%',
borderRadius: 20,
backgroundColor: 'white',
fontSize: 50,
textAlignVertical:'bottom',
paddingTop: 0,
paddingBottom:0,
textAlign: 'right'
}
});
I am trying to put the text in center of the screen while the thumbnail is towards the right end of the screen, in the same line as text. However, the icon overlaps with the text. How can I move it to the right?
When I tried the same styling for Text instead of an icon, it seemed to work.
export default function App() {
return (
<View style={styles.container}>
<View style={styles.topMiddleContainer}>
<Text>All Locations</Text>
{/* <Text style={{
position: 'absolute',
right: moderateScale(10)
}}>ADD</Text> */}
<TouchableOpacity
>
<IconFA name="plus" size={25} style={{
position: 'absolute',
right: moderateScale(0)
}} />
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ecf0f1',
},
topMiddleContainer: {
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row'
},
});
Codesandbox:
https://snack.expo.io/GWBrKI6F9
Just move the styles of IconFA tag to TouchableOpacity.
<TouchableOpacity
style={{
position: 'absolute',
right: moderateScale(0)
}}
>
<IconFA name="plus" size={25} />
</TouchableOpacity>
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.
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